data-cy attributes for test stability in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using data-cy attributes in testing?

data-cy attributes are used to create stable and reliable selectors for tests. They help tests find elements without depending on classes or IDs that might change during development.

beginner

Why should you avoid using classes or IDs for selectors in Cypress tests?

Classes and IDs often change as the UI evolves, which can break tests. data-cy attributes are dedicated for testing and usually stay the same, making tests more stable.

beginner

How do you select an element with data-cy='submit-button' in Cypress?

You use cy.get('[data-cy="submit-button"]') to select the element with that attribute.

intermediate

What is a key benefit of using data-cy attributes for test selectors?

They separate test selectors from styling or functionality code, reducing the chance that UI changes will break tests.

beginner

Can data-cy attributes affect the user experience or page layout?

No, data-cy attributes are invisible to users and do not affect styling or layout. They are only used for testing purposes.

What is the main reason to use data-cy attributes in Cypress tests?

A To improve page loading speed

B To style elements with CSS

C To add IDs to elements

D To create stable selectors that don't break when UI changes

data-cy attributes help tests find elements reliably even if the UI changes, making tests stable.

Which selector is best practice for selecting a button with data-cy='login'?

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

B cy.get('.login')

C cy.get('#login')

D cy.get('button')

Using data-cy attributes is best practice for stable selectors in tests.

What happens if you use classes for selectors and the class name changes?

A Tests continue to work without changes

B Tests may fail because selectors no longer match

C The page layout breaks

D The browser crashes

Changing class names can break tests that rely on them as selectors.

Are data-cy attributes visible to users on the webpage?

A Yes, they show as labels

B Yes, they change the color of elements

C No, they are invisible and only used for testing

D No, but they slow down the page

data-cy attributes do not affect the page visually and are only for tests.

Which of the following is NOT a benefit of using data-cy attributes?

A Makes tests run faster

B Separates test selectors from styling

C Reduces test breakage from UI changes

D Improves test stability

data-cy attributes improve stability but do not directly affect test speed.

Explain why using data-cy attributes improves test stability in Cypress.

Think about what breaks tests when UI changes.

Describe how to write a Cypress command to select a button with data-cy='submit' and click it.

Remember the syntax for attribute selectors in Cypress.