should() with chainers in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test assertion?

Consider the following Cypress code snippet:

cy.get('button.submit').should('be.visible').and('contain.text', 'Send')

What happens if the button is visible but its text is 'Submit' instead of 'Send'?

Cypress

cy.get('button.submit').should('be.visible').and('contain.text', 'Send')

A The test ignores the text check and passes.

B The test passes because the button is visible.

C The test throws a syntax error due to chaining.

D The test fails because the text does not contain 'Send'.

💡 Hint

Remember that should() with and() chains all assertions and all must pass.

The should('be.visible') passes, but and('contain.text', 'Send') fails because the button text is 'Submit'. Both must pass for the test to pass.

❓ assertion

intermediate

Which chained assertion correctly checks for a disabled input with a specific placeholder?

You want to verify that an input field is disabled and has the placeholder text 'Enter name'. Which of the following chained should() assertions is correct?

A cy.get('input#name').should('have.attr', 'placeholder', 'Enter name').and('be.disabled')

B cy.get('input#name').should('be.disabled', 'have.attr', 'placeholder', 'Enter name')

C cy.get('input#name').should('be.disabled').and('have.attr', 'placeholder', 'Enter name')

D cy.get('input#name').should('have.attr', 'placeholder').and('be.disabled', 'Enter name')

💡 Hint

Each should() or and() takes one assertion at a time.

Option C chains two separate assertions correctly. Option C also works but the question asks for the correct chained assertion starting with be.disabled. Option C and D misuse the should() syntax by combining multiple assertions in one call.

🔧 Debug

advanced

Why does this chained assertion fail with a TypeError?

Examine this Cypress code:

cy.get('div.alert').should('have.class', 'error').and('contain', 123)

It fails with a TypeError. Why?

A The <code>have.class</code> chainer cannot be chained with <code>contain</code>.

B The <code>contain</code> chainer expects a string, but 123 is a number causing a TypeError.

C The selector <code>div.alert</code> is invalid causing the error.

D The <code>and</code> method is not supported in Cypress chaining.

💡 Hint

Check the expected argument types for contain.

The contain chainer expects a string or RegExp. Passing a number like 123 causes a TypeError during assertion.

🧠 Conceptual

advanced

What is the behavior of multiple chained should() calls in Cypress?

Consider this code:

cy.get('input').should('be.visible').should('be.enabled')

How does Cypress handle these chained should() calls?

A Each <code>should()</code> is a separate assertion and both must pass independently.

B Only the first <code>should()</code> runs; the second is ignored.

C The second <code>should()</code> overrides the first one.

D Cypress throws an error because multiple <code>should()</code> calls are not allowed.

💡 Hint

Think about how Cypress chains commands and assertions.

Each should() is a separate assertion. Cypress runs them sequentially and both must pass for the test to pass.

❓ framework

expert

Which chained should() assertion correctly verifies a list with exactly 3 visible items containing 'Item' text?

You want to check that a list has exactly 3 visible li elements and each contains the text 'Item'. Which chained assertion is correct?

A cy.get('ul#list > li').should('have.length', 3).and('be.visible').each(($el) => { expect($el).to.contain.text('Item') })

B cy.get('ul#list > li').should('have.length', 3).and('each', ($el) => { expect($el).to.contain.text('Item') }).and('be.visible')

C cy.get('ul#list > li').should('have.length', 3).and('be.visible').and(($els) => { expect($els).to.contain.text('Item') })

D cy.get('ul#list > li').should('have.length', 3).and('be.visible').and('contain.text', 'Item')

💡 Hint

Remember that each() is a separate command, not a chainer for should().

Option A correctly chains should() assertions and then uses each() to check each element's text. Option A incorrectly chains contain.text on the whole set. Option A tries to chain each inside and() which is invalid. Option A misuses and() with a callback.

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