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.