Common assertions (exist, be.visible, have.text) in Cypress

Introduction

Assertions check if things on a webpage are correct. They help us know if the page works as expected.

Check if a button or link is present on the page before clicking it.

Verify that a message or label is visible to the user.

Confirm that a heading or paragraph has the right text.

Make sure an error message appears after a wrong input.

Ensure a loading spinner disappears after content loads.

Syntax

Cypress

cy.get('selector').should('exist')
cy.get('selector').should('be.visible')
cy.get('selector').should('have.text', 'expected text')

exist checks if the element is in the page's HTML.

be.visible checks if the element can be seen by the user.

Examples

Check if the submit button is present in the page.

Cypress

cy.get('#submit-button').should('exist')

Verify the welcome message is visible to the user.

Cypress

cy.get('.welcome-message').should('be.visible')

Confirm the main heading has the exact text.

Cypress

cy.get('h1').should('have.text', 'Welcome to Our Site')

Sample Program

This test visits a sample page. It checks if the banner exists, is visible, and has the heading text 'Kitchen Sink'.

Cypress

describe('Common Assertions Test', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io')
  })

  it('checks element existence', () => {
    cy.get('.banner').should('exist')
  })

  it('checks element visibility', () => {
    cy.get('.banner').should('be.visible')
  })

  it('checks element text', () => {
    cy.get('.banner h1').should('have.text', 'Kitchen Sink')
  })
})

Important Notes

Use unique and stable selectors to avoid flaky tests.

Text assertion with have.text checks exact text including spaces.

Visibility means the element is not hidden by CSS or overlapped.

Summary

Assertions help confirm page elements are correct and visible.

Use exist to check presence, be.visible for visibility, and have.text for exact text.

These checks make tests reliable and user-focused.

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