Common assertions (exist, be.visible, have.text) in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the element exists on the page.

Cypress

cy.get('#submit-button').should('[1]')

Drag options to blanks, or click blank then click option'

Ahave.text

Bcontain

Cvisible

Dexist

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' instead of 'exist' checks visibility, not presence.

Using 'have.text' requires specifying the expected text.

The exist assertion checks if the element is present in the DOM.

2fill in blank

medium

Complete the code to check if the element is visible on the page.

Cypress

cy.get('.menu').should('[1]')

Drag options to blanks, or click blank then click option'

Abe.visible

Bbe.enabled

Chave.text

Dexist

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exist' only checks presence, not visibility.

Using 'have.text' requires specifying expected text.

The be.visible assertion checks if the element is visible to the user.

3fill in blank

hard

Fix the error in the code to check if the element has the exact text 'Hello'.

Cypress

cy.get('h1').should('[1]', 'Hello')

Drag options to blanks, or click blank then click option'

Ahave.text

Bbe.visible

Cexist

Dcontain.text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.visible' does not check text content.

Using 'exist' only checks presence, not text.

Using 'contain.text' is not a valid Cypress assertion.

The have.text assertion checks if the element's text exactly matches the given string.

4fill in blank

hard

Fill both blanks to check if the element with id 'message' is visible and contains the text 'Success'.

Cypress

cy.get('#message').should('[1]').and('[2]', 'Success')

Drag options to blanks, or click blank then click option'

Abe.visible

Bhave.text

Cexist

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.text' instead of 'contain' for partial text match.

Using 'exist' instead of 'be.visible' for visibility check.

First, be.visible checks visibility. Then, contain checks if the text includes 'Success'.

5fill in blank

hard

Fill all three blanks to check if the element with class 'alert' exists, is visible, and has the exact text 'Warning!'.

Cypress

cy.get('.alert').should('[1]').and('[2]').and('[3]', 'Warning!')

Drag options to blanks, or click blank then click option'

Aexist

Bbe.visible

Chave.text

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain' instead of 'have.text' for exact text match.

Skipping the 'exist' assertion.

The assertions check presence (exist), visibility (be.visible), and exact text (have.text).