should() with chainers in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the should() command in Cypress?

The should() command is used to make assertions about the state of elements or variables. It checks if something meets a condition and helps verify expected behavior during tests.

beginner

How do chainers work with should() in Cypress?

Chainers are words like be.visible, have.text, or contain that describe what to check. You can combine multiple chainers inside should() to check several conditions in one step.

beginner

Example: What does cy.get('button').should('be.visible').and('contain', 'Submit') check?

It checks that the button is visible on the page and that it contains the text 'Submit'. Both conditions must be true for the test to pass.

intermediate

Can you use multiple chainers inside a single should() call?

Yes, you can pass an array of chainers like should(['be.visible', 'have.class', 'active']) to check multiple conditions at once.

beginner

What happens if one of the chainers in should() fails?

If any chainer condition fails, the test will fail immediately. Cypress shows which assertion did not pass, helping you find the problem quickly.

What does should('be.visible') check in Cypress?

A If the element is disabled

B If the element is hidden

C If the element is visible on the page

D If the element contains text

should('be.visible') checks that the element is visible to the user on the page.

How can you check multiple conditions on an element using should()?

A Use multiple <code>should()</code> calls separately

B Pass an array of chainers inside one <code>should()</code>

C Use <code>expect()</code> instead

D Use <code>wait()</code> before <code>should()</code>

You can use multiple should() calls separately or chain them with and() to check multiple conditions.

What does cy.get('input').should('have.value', 'hello') verify?

A The input is empty

B The input has the value 'hello'

C The input is disabled

D The input is visible

This checks that the input element's value is exactly 'hello'.

What happens if a should() assertion fails during test execution?

A The test retries the assertion until it passes or times out

B The test skips the assertion

C The test immediately fails and stops

D The test continues ignoring the failure

Cypress retries should() assertions automatically until they pass or the timeout is reached.

Which of these is a valid chainer to use inside should()?

A type

B click

C wait

D be.visible

be.visible is a valid assertion chainer. click, wait, and type are commands, not chainers.

Explain how should() works with chainers in Cypress and why it is useful.

Think about how you check if something is true in a test.

Describe what happens when a should() assertion fails and how Cypress handles it.

Consider how Cypress waits and retries assertions.

Practice

1. What does the should() command do in Cypress testing?

easy

A. It asserts that the selected element meets a specific condition.

B. It clicks on the selected element.

C. It waits for the page to load completely.

D. It navigates to a new URL.

Solution

1. Step 1: Understand the purpose of should()

   The should() command is used to check if an element meets a condition, like visibility or text content.

2. Step 2: Differentiate from other commands

   Commands like clicking or navigation are done by other Cypress commands, not should().

3. Final Answer:

   It asserts that the selected element meets a specific condition. -> Option A

4. Quick Check:

   should() = assertion [OK]

Hint: Remember: should() checks conditions, it doesn't perform actions [OK]

Common Mistakes:

• Confusing should() with click() or visit()
• Thinking should() changes page state
• Using should() without a condition

2. Which of the following is the correct syntax to check if an element is visible and contains the text 'Submit' using should() with chaining?

easy

A. cy.get('button').should('visible', 'Submit')

B. cy.get('button').should('be.visible', 'contain', 'Submit')

C. cy.get('button').should('contain', 'Submit').should('visible')

D. cy.get('button').should('be.visible').and('contain', 'Submit')

Solution

1. Step 1: Identify correct chaining syntax

   The correct way is to use should() for the first assertion and and() for chaining additional assertions.

2. Step 2: Check each option

   cy.get('button').should('be.visible').and('contain', 'Submit') uses should('be.visible') then and('contain', 'Submit'), which is correct syntax. Others misuse parameters or chaining.

3. Final Answer:

   cy.get('button').should('be.visible').and('contain', 'Submit') -> Option D

4. Quick Check:

   Use should() then and() for multiple checks [OK]

Hint: Use should() first, then and() to chain assertions [OK]

Common Mistakes:

• Passing multiple conditions in one should() call incorrectly
• Using should() multiple times instead of and()
• Wrong order of chaining

3. What will be the result of the following Cypress code?

cy.get('input').should('have.attr', 'type').and('eq', 'text')

medium

A. The test throws a syntax error.

B. The test passes if the input element has a type attribute equal to 'text'.

C. The test passes if the input element has any type attribute, regardless of value.

D. The test fails if the input element has any type attribute.

Solution

1. Step 1: Understand the first assertion

   should('have.attr', 'type') checks if the element has a 'type' attribute.

2. Step 2: Understand the chained assertion

   and('eq', 'text') checks if the attribute's value equals 'text'. Both must be true for the test to pass.

3. Final Answer:

   The test passes if the input element has a type attribute equal to 'text'. -> Option B

4. Quick Check:

   have.attr + eq chaining = attribute equals value [OK]

Hint: Chain have.attr with eq to check attribute value [OK]

Common Mistakes:

• Thinking have.attr only checks presence, not value
• Confusing eq with contain
• Assuming syntax error due to chaining

4. Identify the error in this Cypress test code:

cy.get('button').should('be.visible').and('contain', Submit)

medium

A. The selector 'button' is invalid.

B. The chaining with and() is not allowed after should().

C. The text 'Submit' should be a string inside quotes.

D. The should() command cannot check visibility.

Solution

1. Step 1: Check the parameter passed to contain

   The word Submit is not in quotes, so it is treated as a variable, which causes an error.

2. Step 2: Verify chaining and selector

   Chaining with and() is valid, and 'button' is a valid selector. should('be.visible') is also valid.

3. Final Answer:

   The text 'Submit' should be a string inside quotes. -> Option C

4. Quick Check:

   Text values must be quoted in assertions [OK]

Hint: Always quote text strings in should() and and() assertions [OK]

Common Mistakes:

• Forgetting quotes around text in contain
• Thinking and() chaining is invalid
• Misunderstanding selector syntax

5. You want to verify that a checkbox is checked and also has the attribute 'disabled' set to true. Which Cypress command chain correctly performs both checks?

hard

A. cy.get('input[type=checkbox]').should('be.checked').and('have.attr', 'disabled', 'true')

B. cy.get('input[type=checkbox]').should('have.attr', 'disabled', 'true').should('checked')

C. cy.get('input[type=checkbox]').should('be.checked', 'have.attr', 'disabled', 'true')

D. cy.get('input[type=checkbox]').and('be.checked').and('have.attr', 'disabled', 'true')

Solution

1. Step 1: Understand chaining with should() and and()

   Use should() for the first assertion and and() to chain the second assertion.

2. Step 2: Check each option's correctness

   cy.get('input[type=checkbox]').should('be.checked').and('have.attr', 'disabled', 'true') correctly chains should('be.checked') and and('have.attr', 'disabled', 'true'). cy.get('input[type=checkbox]').should('have.attr', 'disabled', 'true').should('checked') uses invalid chainer should('checked') instead of should('be.checked'). cy.get('input[type=checkbox]').should('be.checked', 'have.attr', 'disabled', 'true') incorrectly passes multiple conditions in one should(). cy.get('input[type=checkbox]').and('be.checked').and('have.attr', 'disabled', 'true') uses and() without should() first, which is invalid.

3. Final Answer:

   cy.get('input[type=checkbox]').should('be.checked').and('have.attr', 'disabled', 'true') -> Option A

4. Quick Check:

   should() then and() for multiple assertions [OK]

Hint: Start with should(), then chain with and() for multiple checks [OK]

Common Mistakes:

• Passing multiple conditions in one should() call
• Using and() without should() first
• Using multiple should() calls unnecessarily