cy.contains() for text matching in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What does this cy.contains() command select?

Given the HTML below, what element will cy.contains('Submit') select?

Cypress

<button>Submit</button>
<button>Submit Form</button>
<div>Submit</div>

A All elements containing the text 'Submit'

B The first element containing the text 'Submit'

C The first <button> with exact text 'Submit'

D Only the <div> with text 'Submit'

💡 Hint

cy.contains() finds the first element that contains the text anywhere inside it.

cy.contains() finds the first element in the DOM that contains the given text, not necessarily an exact match. It stops at the first match.

❓ assertion

intermediate

Which assertion correctly checks that an element contains the text 'Welcome'?

You want to verify that a

contains the text 'Welcome'. Which assertion is correct?

Cypress

cy.get('div').contains('Welcome')

A cy.get('div').should('include.text', 'Welcome')

B cy.get('div').should('have.text', 'Welcome')

C cy.get('div').should('contain.text', 'Welcome')

D cy.get('div').should('contain', 'Welcome')

💡 Hint

Use the correct Cypress assertion for partial text matching.

contain.text checks if the element's text includes the given substring. have.text requires exact match.

❓ locator

advanced

Which cy.contains() usage finds a button with exact text 'Cancel' only?

You want to find a

A cy.contains('button', /^Cancel$/)

B cy.get('button').contains('Cancel')

C cy.contains('button', 'Cancel')

D cy.get('button').should('have.text', 'Cancel')

💡 Hint

Use a regular expression to match exact text in cy.contains().

Passing a regex /^Cancel$/ to cy.contains() matches exact text only. Option A matches partial text.

🔧 Debug

advanced

Why does this cy.contains() command fail to find the text?

Given the HTML: <span>Click here</span>, why does cy.contains('click here') fail?

Cypress

cy.contains('click here')

A cy.contains() is case-sensitive and 'click here' does not match 'Click here'

B cy.contains() only matches exact text, so partial text fails

C cy.contains() requires a selector argument before the text

D The element is not visible, so cy.contains() cannot find it

💡 Hint

Check text case sensitivity in cy.contains().

cy.contains() matches text case-sensitively by default, so 'click here' does not match 'Click here'.

❓ framework

expert

How to chain cy.contains() to find a child element with specific text inside a parent?

You want to find a

with class 'card' that contains a

with text 'Hello'. Which command correctly finds the

inside the card?

A cy.get('div.card p').contains('Hello')

B cy.contains('div.card').contains('p', 'Hello')

C cy.get('div.card').contains('p', 'Hello')

D cy.get('div.card').find('p').contains('Hello')

💡 Hint

Use cy.contains() with selector to find child element inside parent.

cy.get('div.card').contains('p', 'Hello') finds a

inside the containing 'Hello'. Option C finds all

but then filters text, which may fail if multiple

exist.