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.