data-cy attributes for test stability in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ locator

intermediate

Choosing the best locator for stable tests

You want to select a button in your Cypress test that is least likely to break if the UI changes. Which locator is the most stable?

A cy.get('[data-cy="submit-button"]')

B cy.get('button:nth-child(3)')

C cy.get('.btn-primary')

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

💡 Hint

Think about which selector is least affected by style or layout changes.

Using data-cy attributes is best practice for stable tests because they are dedicated for testing and unlikely to change with UI redesigns. Other selectors like classes or element order can change often.

❓ assertion

intermediate

Correct assertion using data-cy attribute

You want to check that a success message is visible after form submission. The message has data-cy="success-msg". Which assertion is correct?

A cy.get('[data-cy="success-msg"]').should('not.exist')

B cy.get('[data-cy="success-msg"]').should('be.visible')

C cy.get('div').contains('Success').should('be.visible')

D cy.get('.success-msg').should('contain', 'Success')

💡 Hint

Use the exact data-cy attribute and check visibility.

Option B uses the stable data-cy selector and asserts the element is visible, which matches the test goal. Other options either use unstable selectors or wrong assertions.

❓ Predict Output

advanced

Output of Cypress test with data-cy selectors

What will be the result of this Cypress test snippet?

Cypress

cy.get('[data-cy="login-button"]').click()
cy.get('[data-cy="error-msg"]').should('contain.text', 'Invalid credentials')

A Test passes if error message 'Invalid credentials' appears after clicking login

B Test fails because data-cy selectors are invalid syntax

C Test passes even if error message is missing

D Test fails due to missing .click() on error message

💡 Hint

Consider what the selectors do and what the assertions check.

The test clicks the login button identified by data-cy="login-button" and then asserts the error message with data-cy="error-msg" contains the expected text. If the message appears, the test passes.

🔧 Debug

advanced

Why does this test fail intermittently?

This Cypress test sometimes fails:

cy.get('[data-cy="submit-btn"]').click()
cy.get('[data-cy="loading-spinner"]').should('not.exist')
cy.get('[data-cy="success-msg"]').should('be.visible')

What is the most likely cause?

A The data-cy attributes are misspelled

B The click command is missing a .then() callback

C The test does not wait for the spinner to disappear before checking success message

D The success message is checked before clicking submit

💡 Hint

Think about asynchronous UI changes and timing.

The test clicks submit, then checks the spinner is gone, then checks success message. If the spinner removal is slow, the success message check may run too early causing intermittent failure. Proper waiting or retries are needed.

❓ framework

expert

Best practice for using data-cy attributes in a large test suite

In a large Cypress test suite, what is the best way to manage data-cy selectors for maintainability and stability?

A Avoid using <code>data-cy</code> attributes and rely on element text content

B Hardcode <code>data-cy</code> selectors directly in each test for clarity

C Use CSS classes instead of <code>data-cy</code> attributes to reduce HTML clutter

D Define all <code>data-cy</code> selectors as constants in a separate file and import them in tests

💡 Hint

Think about how to avoid duplication and ease updates.

Defining data-cy selectors as constants in one place helps keep tests consistent and makes updates easier if selectors change. Hardcoding or using classes/text can cause brittle tests.