cypress-testing-library - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Cypress code snippet?

Consider this Cypress test using cypress-testing-library commands. What will be the test execution result?

Cypress

describe('Button click test', () => {
  it('should find and click the submit button', () => {
    cy.visit('/form')
    cy.findByRole('button', { name: /submit/i }).click()
    cy.findByText(/form submitted/i).should('exist')
  })
})

A Test passes but the assertion cy.findByText(/form submitted/i).should('exist') is incorrect syntax.

B Test fails because cy.findByRole does not exist in cypress-testing-library.

C Test passes because the button is found and the confirmation text appears.

D Test fails due to a syntax error in the test code.

💡 Hint

Remember that cypress-testing-library extends Cypress with findByRole and findByText commands.

The test uses valid cypress-testing-library commands to find a button by its role and name, clicks it, then asserts that confirmation text appears. This is a correct and common usage pattern.

❓ assertion

intermediate

Which assertion correctly verifies an input field is disabled using cypress-testing-library?

You want to check if an input field with label 'Email' is disabled. Which assertion is correct?

A cy.findByLabelText('Email').should('be.disabled')

B cy.findByLabelText('Email').should('be.enabled')

C cy.findByLabelText('Email').should('not.be.enabled')

D cy.findByLabelText('Email').should('have.attr', 'disabled', false)

💡 Hint

Use the correct Cypress assertion for disabled elements.

The assertion 'should('be.disabled')' correctly checks if the element is disabled. Option A is incorrect because the disabled attribute is either present or not; false is not a valid value. Option A is logically correct but less clear than B. Option A checks for enabled, which is opposite.

❓ locator

advanced

Which locator best follows testing-library best practices to find a checkbox labeled 'Accept Terms'?

Choose the best locator to find the checkbox input associated with the label 'Accept Terms' using cypress-testing-library.

A cy.get('#acceptTermsCheckbox')

B cy.get('input[type="checkbox"][name="accept"]')

C cy.findByLabelText('Accept Terms')

D cy.findByRole('checkbox', { name: 'Accept Terms' })

💡 Hint

Testing-library encourages queries by role with accessible name.

Using findByRole with role 'checkbox' and name 'Accept Terms' is the best practice as it mimics how users perceive the UI. Option D works but is less explicit about role. Options B and D rely on implementation details, which is discouraged.

🔧 Debug

advanced

Why does this cypress-testing-library test fail to find the button?

Given the code below, why does the test fail to find the button labeled 'Save'? cy.visit('/settings') cy.findByRole('button', { name: 'Save' }).click()

A The button is inside an iframe, and cypress-testing-library cannot access elements inside iframes by default.

B The button does not have a role attribute set to 'button', so findByRole fails.

C The button text is 'save' lowercase, so the name option is case sensitive and fails.

D The test is missing a cy.wait() before findByRole, so the button is not yet rendered.

💡 Hint

Consider DOM context and accessibility tree when using findByRole.

cypress-testing-library cannot query inside iframes without special handling. The button inside an iframe is not accessible from the main document context, causing findByRole to fail. Role attributes are inferred from HTML elements, so B is unlikely. The name option is case-insensitive. cy.wait() is rarely needed if the page is fully loaded.

❓ framework

expert

Which cypress-testing-library command chain correctly waits for an async element to appear before asserting?

You want to wait for a loading spinner to disappear and then check that a 'Data Loaded' message appears. Which command chain is correct?

A

cy.findByTestId('spinner').should('not.exist')
cy.findByText('Data Loaded').should('exist')

B cy.findByTestId('spinner').should('not.exist').then(() => cy.findByText('Data Loaded').should('exist'))

C cy.findByTestId('spinner').should('not.exist').findByText('Data Loaded').should('exist')

D cy.findByTestId('spinner').should('not.exist').wait(1000).findByText('Data Loaded').should('exist')

💡 Hint

Use chaining and then() to sequence assertions after async waits.

Option B correctly waits for the spinner to disappear, then in the .then() callback queries for the 'Data Loaded' text and asserts it exists. Option B runs assertions sequentially but does not guarantee spinner is gone before checking text. Option B tries to chain findByText on the result of should('not.exist'), which is invalid. Option B uses arbitrary wait which is unreliable.

Practice

1. What is the main benefit of using cypress-testing-library in your tests?

easy

A. It helps find elements like a user would, improving test readability.

B. It automatically fixes broken tests.

C. It replaces Cypress commands with JavaScript alerts.

D. It only works with CSS selectors.

Solution

1. Step 1: Understand the purpose of cypress-testing-library

   It is designed to find page elements by text, role, or label, mimicking how users interact with the page.

2. Step 2: Compare options with this purpose

   Only It helps find elements like a user would, improving test readability. correctly states that it helps find elements like a user would and improves test readability.

3. Final Answer:

   It helps find elements like a user would, improving test readability. -> Option A

4. Quick Check:

   User-focused element finding = A [OK]

Hint: Remember: testing-library = user-like element finding [OK]

Common Mistakes:

• Thinking it fixes tests automatically
• Confusing it with Cypress core commands
• Assuming it only uses CSS selectors

2. Which of the following is the correct syntax to find a button with the text 'Submit' using cypress-testing-library?

easy

A. cy.findByRole('button', { name: 'Submit' })

B. cy.findByText('Submit')

C. cy.get('button').contains('Submit')

D. cy.querySelector('button:contains("Submit")')

Solution

1. Step 1: Recall cypress-testing-library syntax for roles

   The recommended way is to use findByRole with the role and accessible name.

2. Step 2: Check each option

   cy.findByRole('button', { name: 'Submit' }) uses findByRole('button', { name: 'Submit' }), which is correct. cy.findByText('Submit') relies on text content without specifying the button role, making it less precise. cy.get('button').contains('Submit') uses Cypress core commands, not testing-library. cy.querySelector('button:contains("Submit")') is invalid syntax.

3. Final Answer:

   cy.findByRole('button', { name: 'Submit' }) -> Option A

4. Quick Check:

   Use findByRole with name for buttons = B [OK]

Hint: Use findByRole with name for accessible buttons [OK]

Common Mistakes:

• Using Cypress core commands instead of testing-library
• Missing the role parameter
• Using invalid selectors like querySelector

3. Given the code snippet:

cy.findByLabelText('Email').type('[e-mail]')
cy.findByRole('button', { name: 'Send' }).click()

What will happen when this test runs?

medium

A. It clicks the button but does not type the email.

B. It throws an error because findByLabelText does not exist.

C. It types the email but fails to find the button.

D. It types the email and clicks the 'Send' button successfully.

Solution

1. Step 1: Understand the commands used

   findByLabelText finds an input by its label text, and type enters text. findByRole finds a button by role and name, then click clicks it.

2. Step 2: Analyze the expected behavior

   Both commands are valid and should work if elements exist. So the test will type the email and click the button.

3. Final Answer:

   It types the email and clicks the 'Send' button successfully. -> Option D

4. Quick Check:

   Valid findByLabelText and findByRole = A [OK]

Hint: findByLabelText types, findByRole clicks [OK]

Common Mistakes:

• Assuming findByLabelText is invalid
• Confusing Cypress core commands with testing-library
• Thinking click happens before typing

4. You wrote this test:

cy.findByRole('textbox', { name: 'Username' }).type('admin')
cy.findByRole('button', { name: 'Login' }).click()

But the test fails with "Unable to find element" error on the textbox. What is the likely cause?

medium

A. The test is missing a wait() before typing.

B. The textbox does not have an accessible name 'Username'.

C. The type command is not supported on textboxes.

D. The button role is incorrect.

Solution

1. Step 1: Understand the error message

   "Unable to find element" means the locator did not find the textbox with role 'textbox' and name 'Username'.

2. Step 2: Check possible causes

   If the textbox lacks an accessible name 'Username', the locator fails. The button role is likely correct, and type works on textboxes. wait() is usually unnecessary.

3. Final Answer:

   The textbox does not have an accessible name 'Username'. -> Option B

4. Quick Check:

   Accessible name missing causes find failure = D [OK]

Hint: Check accessible names if findByRole fails [OK]

Common Mistakes:

• Assuming role or command is wrong
• Adding unnecessary waits
• Ignoring accessibility attributes

5. You want to test a form with multiple inputs labeled 'Name' but only one is visible at a time. Which cypress-testing-library method helps you select the visible input labeled 'Name' reliably?

hard

A. cy.findByLabelText('Name', { exact: false })

B. cy.findByLabelText('Name', { selector: ':visible' })

C. cy.findAllByLabelText('Name').filter(':visible').first()

D. cy.findByText('Name').filter(':visible')

Solution

1. Step 1: Identify the problem

   Multiple inputs share the same label 'Name', but only one is visible at a time.

2. Step 2: Choose method to select visible input

   findAllByLabelText returns all matching elements. Using filter(':visible') narrows to visible ones, and first() picks the first visible input.

3. Final Answer:

   cy.findAllByLabelText('Name').filter(':visible').first() -> Option C

4. Quick Check:

   Use findAll + filter visible + first = C [OK]

Hint: Use findAllByLabelText + filter(':visible') + first() [OK]

Common Mistakes:

• Using findByLabelText with invalid selector option
• Using findByText instead of label text
• Ignoring visibility filtering