Multiple assertions chaining in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Chaining multiple assertions on a button element

Given the Cypress test code below, what will be the result of running it if the button has text 'Submit' and is visible and enabled?

Cypress

cy.get('button#submit-btn').should('be.visible').and('contain.text', 'Submit').and('be.enabled')

A Test passes because all assertions are true

B Test fails because 'contain.text' is not a valid assertion

C Test fails because chaining multiple 'and' is not allowed

D Test fails because 'be.enabled' is not a valid assertion

💡 Hint

Remember that Cypress allows chaining multiple assertions with 'and' if they apply to the same subject.

The code chains three assertions on the same button element: it checks visibility, text content, and enabled state. All are valid assertions and chaining with 'and' is supported, so the test passes if all conditions are met.

❓ assertion

intermediate

Understanding failure in chained assertions

What happens when the following Cypress test runs if the element with id 'login' is visible but does NOT contain the text 'Welcome'?

Cypress

cy.get('#login').should('be.visible').and('contain.text', 'Welcome')

A Test fails at the second assertion with a clear error message

B Test passes because the first assertion is true

C Test fails at the first assertion due to visibility check

D Test passes but logs a warning about missing text

💡 Hint

Chained assertions stop at the first failure and report it.

The first assertion 'be.visible' passes, but the second 'contain.text' fails because the text is missing. Cypress stops and reports the failure at the second assertion.

❓ Predict Output

advanced

Output of chained assertions with negation

What is the test result when running this Cypress code if the input field with id 'email' is visible and empty?

Cypress

cy.get('#email').should('be.visible').and('have.value', '').and('not.be.disabled')

A Test fails because the input is empty and should have a value

B Test fails because 'have.value' cannot check empty string

C Test fails because 'not.be.disabled' is invalid syntax

D Test passes because all assertions are true

💡 Hint

Check carefully each assertion and what it expects.

The input is visible, has an empty value (''), and is not disabled. All assertions are valid and true, so the test passes.

🔧 Debug

advanced

Identify the error in chained assertions

What error will Cypress report when running this code snippet?

Cypress

cy.get('.nav-link').should('be.visible').and('have.text')

A SyntaxError due to missing parentheses

B Test fails because 'have.text' is not a valid assertion

C TypeError because 'have.text' requires an argument

D Test passes because 'have.text' checks for any text

💡 Hint

Check the usage of 'have.text' assertion in Cypress documentation.

'have.text' requires a string argument to compare the element's text. Omitting it causes a TypeError during test execution.

❓ framework

expert

Best practice for chaining multiple assertions on different elements

Which Cypress code snippet correctly chains assertions on two different elements without causing errors?

A cy.get('#header').should('be.visible').and('contain.text', 'Welcome').and(cy.get('#footer').should('be.visible'))

B cy.get('#header').should('be.visible').and('contain.text', 'Welcome').then(() => cy.get('#footer').should('be.visible'))

C cy.get('#header').should('be.visible').and('contain.text', 'Welcome'); cy.get('#footer').should('be.visible')

D cy.get('#header').should('be.visible').and('contain.text', 'Welcome').get('#footer').should('be.visible')

💡 Hint

Remember that chaining 'and' continues assertions on the same subject only.

Option B uses 'then' to run a new Cypress command for a different element after the first assertions complete, which is the correct way to chain assertions on different elements. Options B and D misuse chaining and cause errors. Option B runs commands sequentially but not chained.

Practice

1. What is the main benefit of chaining multiple assertions with .should() and .and() in Cypress?

easy

A. It allows checking several conditions on the same element in one statement.

B. It runs tests faster by skipping some assertions.

C. It automatically fixes failing tests.

D. It changes the element's properties during the test.

Solution

1. Step 1: Understand chaining purpose

   Chaining .should() and .and() lets you check multiple things on one element without repeating the element selection.

2. Step 2: Identify benefit

   This makes tests shorter and clearer by combining checks in one statement.

3. Final Answer:

   It allows checking several conditions on the same element in one statement. -> Option A

4. Quick Check:

   Multiple assertions chaining = check many conditions [OK]

Hint: Use .should() once, then .and() for extra checks [OK]

Common Mistakes:

• Thinking chaining skips assertions
• Believing chaining changes element state
• Confusing chaining with test speedup

2. Which of the following is the correct syntax to check that an element is visible and contains text 'Hello' using chaining in Cypress?

easy

A. cy.get('button').should('contain.text', 'Hello').should('be.visible')

B. cy.get('button').and('be.visible').should('contain.text', 'Hello')

C. cy.get('button').should('be.visible').and('contain.text', 'Hello')

D. cy.get('button').and('contain.text', 'Hello').and('be.visible')

Solution

1. Step 1: Check chaining order

   The first assertion must use .should(), then additional checks use .and().

2. Step 2: Validate syntax correctness

   cy.get('button').should('be.visible').and('contain.text', 'Hello') correctly uses .should('be.visible') then .and('contain.text', 'Hello'). Options B and D wrongly start with .and(). cy.get('button').should('contain.text', 'Hello').should('be.visible') uses two .should() but chaining prefers .and() after first .should().

3. Final Answer:

   cy.get('button').should('be.visible').and('contain.text', 'Hello') -> Option C

4. Quick Check:

   First .should(), then .and() [OK]

Hint: Start with .should(), add checks with .and() [OK]

Common Mistakes:

• Starting chain with .and() instead of .should()
• Using multiple .should() instead of .and()
• Mixing order of assertions incorrectly

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

cy.get('#login').should('be.visible').and('have.class', 'active').and('contain.text', 'Login')

medium

A. Test throws syntax error due to chaining.

B. Test fails if element #login is visible but missing class 'active'.

C. Test passes even if element #login is not visible.

D. Test passes if element #login is visible, has class 'active', and contains text 'Login'.

Solution

1. Step 1: Understand chained assertions

   The code checks three things on element with id 'login': visibility, class presence, and text content.

2. Step 2: Determine test pass/fail conditions

   All three conditions must be true for the test to pass. If any fail, test fails. Syntax is correct.

3. Final Answer:

   Test passes if element #login is visible, has class 'active', and contains text 'Login'. -> Option D

4. Quick Check:

   All chained assertions must pass [OK]

Hint: All chained assertions must be true for pass [OK]

Common Mistakes:

• Assuming test passes if only some assertions pass
• Thinking chaining causes syntax error
• Ignoring visibility check importance

4. Identify the error in this Cypress code snippet:

cy.get('.btn').and('be.enabled').should('have.text', 'Submit')

medium

A. Using .and() before .should() causes a syntax error.

B. The selector '.btn' is invalid.

C. The assertion 'have.text' is not supported.

D. No error; code is correct.

Solution

1. Step 1: Check chaining order

   Chaining must start with .should(). Using .and() first is invalid syntax.

2. Step 2: Validate other parts

   Selector '.btn' is valid CSS class selector. 'have.text' is a valid assertion. So no error there.

3. Final Answer:

   Using .and() before .should() causes a syntax error. -> Option A

4. Quick Check:

   Start chain with .should(), not .and() [OK]

Hint: Always start assertions with .should() [OK]

Common Mistakes:

• Starting chain with .and()
• Confusing selector syntax
• Misunderstanding assertion names

5. You want to verify a form input with id 'email' is visible, enabled, has placeholder 'Enter email', and is empty. Which chained assertions correctly achieve this?

hard

A. cy.get('#email').should('be.enabled').should('be.visible').should('have.attr', 'placeholder', 'Enter email').should('have.value', '')

B. cy.get('#email').should('be.visible').and('be.enabled').and('have.attr', 'placeholder', 'Enter email').and('have.value', '')

C. cy.get('#email').and('be.visible').and('be.enabled').and('have.attr', 'placeholder', 'Enter email').and('have.value', '')

D. cy.get('#email').should('have.value', '').should('be.visible').should('be.enabled').should('have.attr', 'placeholder', 'Enter email')

Solution

1. Step 1: Confirm chaining syntax

   Chaining must start with .should() and continue with .and() for multiple assertions on the same element.

2. Step 2: Check assertion order and correctness

   cy.get('#email').should('be.visible').and('be.enabled').and('have.attr', 'placeholder', 'Enter email').and('have.value', '') starts with .should('be.visible') then chains .and() for other checks. cy.get('#email').should('have.value', '').should('be.visible').should('be.enabled').should('have.attr', 'placeholder', 'Enter email') uses multiple .should() starting with value check, which is allowed but less concise and best practice is to start with visibility. cy.get('#email').and('be.visible').and('be.enabled').and('have.attr', 'placeholder', 'Enter email').and('have.value', '') incorrectly starts with .and(). cy.get('#email').should('be.enabled').should('be.visible').should('have.attr', 'placeholder', 'Enter email').should('have.value', '') uses multiple .should() which is allowed but less concise.

3. Final Answer:

   cy.get('#email').should('be.visible').and('be.enabled').and('have.attr', 'placeholder', 'Enter email').and('have.value', '') -> Option B

4. Quick Check:

   Start with .should(), chain with .and() for clarity [OK]

Hint: Start with .should('be.visible'), then chain .and() [OK]

Common Mistakes:

• Starting chain with .and()
• Using multiple .should() instead of chaining
• Ignoring assertion order for readability