Common assertions (exist, be.visible, have.text) in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Check element visibility and text content

You want to verify that a button with id #submitBtn is visible and has the exact text Submit. Which Cypress assertion chain correctly does this?

Cypress

cy.get('#submitBtn')

A should('exist').and('be.visible').and('have.text', 'Submit')

B should('be.visible').and('exist').and('contain.text', 'Submit')

C should('exist').and('have.text', 'Submit').and('be.visible')

D should('be.visible').and('have.text', 'Submit').and('exist')

💡 Hint

Remember the order of assertions does not affect the test, but the exact text match requires 'have.text'.

Option A uses 'exist' to check presence, 'be.visible' to ensure the element is shown, and 'have.text' to check exact text. Other options use 'contain.text' which allows partial match or change order but 'have.text' is required for exact match.

❓ assertion

intermediate

Detect missing element with assertion

You want to confirm that an element with class .error-message does NOT exist on the page. Which assertion correctly verifies this?

Cypress

cy.get('.error-message')

A should('have.length', 0)

B should('not.be.visible')

C should('not.have.text')

D should('not.exist')

💡 Hint

To check absence, use the 'not.exist' assertion.

Option D correctly asserts the element does not exist in the DOM. Option D only checks visibility but element may exist hidden. Option D is invalid because cy.get throws error if element not found. Option D is invalid syntax.

❓ Predict Output

advanced

What is the test result of this assertion chain?

Given the HTML <div id='msg' style='display:none'>Hello</div>, what will be the result of this Cypress code?

Cypress

cy.get('#msg').should('exist').and('be.visible').and('have.text', 'Hello')

A Test fails at 'be.visible' assertion

B Test passes successfully

C Test fails at 'have.text' assertion

D Test fails at 'exist' assertion

💡 Hint

The element exists but is hidden by CSS.

The element exists in the DOM, so 'exist' passes. The text is correct, so 'have.text' would pass if reached. But 'be.visible' fails because the element is hidden with CSS 'display:none'.

❓ locator

advanced

Choose the best locator for asserting text content

You want to assert the text of a paragraph inside a section with id #info. Which locator is best to use with Cypress for this assertion?

A cy.get('.info p')

B cy.get('#info > p')

C cy.contains('p', 'expected text')

D cy.get('p').eq(0)

💡 Hint

Use a locator that is specific and stable.

Option B uses an ID selector with direct child paragraph, which is specific and stable. Option B selects first paragraph on page, which may change. Option B searches by text which may be dynamic. Option B uses a class selector which may not exist or be less specific.

❓ framework

expert

Identify the failing assertion in a chained test

Consider this Cypress test code snippet:

cy.get('.notification')
  .should('exist')
  .and('be.visible')
  .and('have.text', 'Success')
  .and('have.class', 'active')

If the element exists, is visible, has text 'Success', but does NOT have class 'active', which assertion causes the test to fail?

Cypress

cy.get('.notification').should('exist').and('be.visible').and('have.text', 'Success').and('have.class', 'active')

A 'have.text' assertion fails

B 'exist' assertion fails

C 'have.class' assertion fails

D 'be.visible' assertion fails

💡 Hint

Check which condition is not met by the element.

The element exists, is visible, and has the correct text, so those assertions pass. The element lacks the 'active' class, so the 'have.class' assertion fails.