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.

Practice

1. What does cy.contains('Submit') do in a Cypress test?

easy

A. Finds the first element containing the visible text 'Submit'.

B. Clicks the button named 'Submit' automatically.

C. Types 'Submit' into an input field.

D. Checks if the page URL contains the word 'Submit'.

Solution

1. Step 1: Understand cy.contains() basic function

   The command searches the page for an element that has visible text matching the given string.

2. Step 2: Analyze the given text 'Submit'

   It finds the first element that contains the text 'Submit' anywhere inside it.

3. Final Answer:

   Finds the first element containing the visible text 'Submit'. -> Option A

4. Quick Check:

   cy.contains('text') finds element by visible text [OK]

Hint: cy.contains() finds elements by visible text quickly [OK]

Common Mistakes:

• Thinking cy.contains() clicks automatically
• Confusing cy.contains() with typing commands
• Assuming it checks URL instead of page content

2. Which of the following is the correct syntax to find a button with text 'Login' using cy.contains()?

easy

A. cy.contains(button, Login)

B. cy.contains('button', 'Login')

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

D. cy.contains('button' + 'Login')

Solution

1. Step 1: Recall cy.contains() syntax with selector

   The correct syntax is cy.contains(selector, text) where selector is a string like 'button'.

2. Step 2: Match the correct option

   cy.contains('button', 'Login') uses cy.contains('button', 'Login') which is correct. Other options misuse quotes or argument order.

3. Final Answer:

   cy.contains('button', 'Login') -> Option B

4. Quick Check:

   cy.contains('selector', 'text') correct syntax [OK]

Hint: Use cy.contains('selector', 'text') to narrow search [OK]

Common Mistakes:

• Omitting quotes around selector or text
• Swapping the order of selector and text
• Concatenating strings incorrectly inside cy.contains()

3. What will the following Cypress code do?

cy.contains('Submit').click()

medium

A. Types 'Submit' into the focused input field.

B. Throws an error because click() cannot be chained.

C. Finds the first element with text 'Submit' and clicks it.

D. Finds all elements with 'Submit' text but does not click.

Solution

1. Step 1: Understand cy.contains() chaining

   cy.contains('Submit') finds the first element with visible text 'Submit'.

2. Step 2: Analyze the chained click()

   Calling .click() on the found element triggers a click event on it.

3. Final Answer:

   Finds the first element with text 'Submit' and clicks it. -> Option C

4. Quick Check:

   cy.contains('text').click() clicks matched element [OK]

Hint: Chain .click() after cy.contains() to click element [OK]

Common Mistakes:

• Thinking click() types text instead
• Assuming click() cannot be chained
• Believing it clicks multiple elements

4. You wrote cy.contains(button, 'Save').click() but the test fails with a syntax error. What is the problem?

medium

A. You must use cy.get() before cy.contains().

B. cy.contains() cannot be chained with click().

C. The text 'Save' must be uppercase.

D. The selector button should be a string: 'button'.

Solution

1. Step 1: Check argument types in cy.contains()

   The selector argument must be a string, so 'button' needs quotes.

2. Step 2: Identify the syntax error cause

   Using button without quotes causes a syntax error because it's treated as a variable.

3. Final Answer:

   The selector button should be a string: 'button'. -> Option D

4. Quick Check:

   Selector must be string in cy.contains() [OK]

Hint: Always quote selectors in cy.contains() [OK]

Common Mistakes:

• Forgetting quotes around selector
• Thinking click() can't be chained
• Assuming text case matters in cy.contains()

5. You want to verify that a page contains a link with text 'Learn More' inside a <nav> element. Which Cypress command is best?

hard

A. cy.get('nav').contains('a', 'Learn More').should('exist')

B. cy.contains('nav a', 'Learn More').click()

C. cy.contains('Learn More').should('be.visible')

D. cy.get('a').contains('nav', 'Learn More')

Solution

1. Step 1: Narrow search inside <nav> for link text

   Use cy.get('nav') to select the nav element first.

2. Step 2: Use contains() with selector 'a' and text 'Learn More'

   Calling .contains('a', 'Learn More') inside nav finds the link with that text.

3. Step 3: Assert existence with should('exist')

   This confirms the link is present inside nav.

4. Final Answer:

   cy.get('nav').contains('a', 'Learn More').should('exist') -> Option A

5. Quick Check:

   Use get() then contains() to scope text search [OK]

Hint: Use cy.get() then contains() to scope text search [OK]

Common Mistakes:

• Using contains() without scoping to nav
• Trying to chain contains() incorrectly
• Assuming contains() alone checks element existence