Common assertions (exist, be.visible, have.text) in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the exist assertion check in Cypress?

The exist assertion checks if an element is present in the DOM, regardless of whether it is visible or not.

beginner

Explain the difference between exist and be.visible assertions.

exist checks if the element is in the DOM, while be.visible checks if the element is actually visible to the user on the page.

beginner

How do you check if an element contains specific text using Cypress?

Use the have.text assertion to verify that an element's text content exactly matches the expected string.

beginner

Write a Cypress assertion to check if a button with id #submit is visible.

cy.get('#submit').should('be.visible');

intermediate

Why is it important to use be.visible instead of just exist when testing user interactions?

Because an element might exist in the DOM but be hidden or covered, so be.visible ensures the user can actually see and interact with it.

Which Cypress assertion checks if an element is present in the DOM?

A exist

B be.visible

C have.text

D contain

The exist assertion verifies that the element is in the DOM, regardless of visibility.

What does be.visible assertion ensure?

A Element is in the DOM but hidden

B Element contains specific text

C Element is visible to the user

D Element is clickable

be.visible checks that the element is visible on the page and can be seen by the user.

How do you check if an element's text exactly matches 'Hello World'?

A should('contain', 'Hello World')

B should('have.text', 'Hello World')

C should('exist')

D should('be.visible')

have.text checks for exact text match inside the element.

Which assertion would fail if the element is hidden but present in the DOM?

A exist and be.visible

B exist

C have.text

D be.visible

be.visible fails if the element is hidden, even if it exists in the DOM.

What is the correct Cypress command to check if a button with class '.btn' exists?

A cy.get('.btn').should('exist');

B cy.get('.btn').should('be.visible');

C cy.get('.btn').should('have.text');

D cy.get('.btn').should('contain');

The exist assertion confirms the element is present in the DOM.

Describe the purpose of the Cypress assertions: exist, be.visible, and have.text.

Think about presence, visibility, and text content separately.

Explain why using be.visible is important when testing user interactions compared to just exist.

Consider what the user actually experiences on the page.

Practice

1. Which Cypress assertion checks if an element is present in the DOM, regardless of visibility?

easy

A. should('contain.text')

B. should('be.visible')

C. should('have.text')

D. should('exist')

Solution

1. Step 1: Understand the meaning of exist assertion

   The exist assertion checks if the element is present in the DOM, even if it is hidden.

2. Step 2: Compare with other assertions

   be.visible checks if the element is visible, have.text checks exact text content, and contain.text checks partial text. Only exist fits the question.

3. Final Answer:

   should('exist') -> Option D

4. Quick Check:

   Check presence = should('exist') [OK]

Hint: Exist means element is in DOM, visible or not [OK]

Common Mistakes:

• Confusing 'exist' with 'be.visible'
• Using 'have.text' to check presence
• Thinking 'contain.text' checks existence

2. Which of the following is the correct Cypress syntax to assert that an element with id submitBtn is visible?

easy

A. cy.get('#submitBtn').should('exist')

B. cy.get('#submitBtn').should('contain', 'Submit')

C. cy.get('#submitBtn').should('be.visible')

D. cy.get('#submitBtn').should('have.text', 'Submit')

Solution

1. Step 1: Identify the assertion for visibility

   The assertion should('be.visible') checks if the element is visible on the page.

2. Step 2: Match syntax with element selector

   cy.get('#submitBtn') selects the element by id. Combining with should('be.visible') is correct syntax to check visibility.

3. Final Answer:

   cy.get('#submitBtn').should('be.visible') -> Option C

4. Quick Check:

   Visible check = should('be.visible') [OK]

Hint: Use should('be.visible') to check if element shows on page [OK]

Common Mistakes:

• Using 'exist' instead of 'be.visible' for visibility
• Confusing 'have.text' with visibility check
• Using 'contain' without 'text' for exact text check

3. What will be the result of this Cypress test code?

cy.get('.message').should('have.text', 'Welcome!')

Assuming the element <div class='message'>Welcome!</div> is present and visible.

medium

A. Test passes because text matches exactly

B. Test fails because element is not checked for visibility

C. Test fails because 'have.text' is incorrect syntax

D. Test passes but ignores text content

Solution

1. Step 1: Understand have.text assertion

   This assertion checks if the element's text content exactly matches the given string.

2. Step 2: Check element and text

   The element <div class='message'>Welcome!</div> matches the text 'Welcome!' exactly, so the assertion passes.

3. Final Answer:

   Test passes because text matches exactly -> Option A

4. Quick Check:

   Exact text match = test passes [OK]

Hint: Exact text match means test passes with have.text [OK]

Common Mistakes:

• Assuming visibility must be checked separately
• Thinking 'have.text' is invalid syntax
• Confusing 'have.text' with partial text check

4. Identify the error in this Cypress test code:

cy.get('.alert').should('be.visible').should('have.text', 'Error occurred')

Given the element <div class='alert' style='display:none'>Error occurred</div> is hidden.

medium

A. The element selector is incorrect

B. The element is hidden, so 'be.visible' assertion fails

C. 'have.text' assertion syntax is wrong

D. Chaining assertions is not allowed in Cypress

Solution

1. Step 1: Check element visibility

   The element has style='display:none', so it is hidden and not visible.

2. Step 2: Understand assertion failure

   The should('be.visible') assertion will fail because the element is hidden, causing the test to fail before checking text.

3. Final Answer:

   The element is hidden, so 'be.visible' assertion fails -> Option B

4. Quick Check:

   Hidden element fails 'be.visible' [OK]

Hint: Hidden elements fail 'be.visible' assertion [OK]

Common Mistakes:

• Assuming 'have.text' runs even if visibility fails
• Thinking chaining assertions is invalid
• Ignoring element's CSS display property

5. You want to write a Cypress test to confirm a button with class .save-btn exists, is visible, and has the exact text Save. Which code snippet correctly performs all these checks?

hard

A. cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save')

B. cy.get('.save-btn').should('be.visible').should('contain.text', 'Save')

C. cy.get('.save-btn').should('exist').should('have.text', 'Save')

D. cy.get('.save-btn').should('have.text', 'Save').should('be.visible')

Solution

1. Step 1: Check presence, visibility, and exact text

   We need to confirm the element exists, is visible, and has exact text 'Save'.

2. Step 2: Verify chaining of assertions

   cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save') chains should('exist'), should('be.visible'), and should('have.text', 'Save') correctly to check all conditions.

3. Final Answer:

   cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save') -> Option A

4. Quick Check:

   Chain exist, visible, exact text for full check [OK]

Hint: Chain all assertions to check presence, visibility, and text [OK]

Common Mistakes:

• Skipping 'exist' check before visibility
• Using 'contain.text' instead of 'have.text' for exact match
• Not chaining all required assertions