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).

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