Best practices for selectors in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why prefer data-* attributes for selectors?

In Cypress tests, why is it best to use data-* attributes as selectors instead of classes or IDs?

A Because classes are always dynamically generated and cannot be used in selectors.

B Because <code>data-*</code> attributes are less likely to change and do not affect styling or functionality.

C Because IDs are not unique and can cause test failures.

D Because <code>data-*</code> attributes automatically improve test speed.

💡 Hint

Think about what changes often in UI and what stays stable for testing.

Using data-* attributes keeps selectors stable because they are meant for testing and do not change with styling or layout updates.

❓ assertion

intermediate

Which selector best follows best practices?

Given a button with HTML: <button data-test='submit-btn' class='btn primary'>Submit</button>, which Cypress selector is best for stable tests?

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

B cy.get('#submit-btn')

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

D cy.get('.btn.primary')

💡 Hint

Look for the selector that is least likely to break if styles or text change.

Using data-test attribute is stable and independent of styling or text changes, making tests less brittle.

❓ Predict Output

advanced

What is the test result of this selector usage?

Consider this Cypress test code snippet:

cy.get('[data-cy=login]').click()
cy.get('.btn-primary').should('be.visible')

If the data-cy attribute is missing but the class exists, what happens?

A The first command fails with a <code>Cannot find element</code> error; the second passes if the button is visible.

B Both commands pass because class selectors always work.

C Both commands fail because <code>data-cy</code> is required for all selectors.

D The test passes but clicks the wrong element.

💡 Hint

Think about what happens if a selector targets a missing attribute.

The first cy.get fails because the element with data-cy=login does not exist. The second command passes if the class .btn-primary is present and visible.

🔧 Debug

advanced

Identify the problem with this selector

Review this Cypress selector code:

cy.get('button.submit-btn.active').click()

The test intermittently fails because the button is not found. What is the likely cause?

A The button element cannot be clicked because it is disabled.

B The selector is missing a <code>data-*</code> attribute, causing syntax errors.

C The selector requires the button to have both classes <code>submit-btn</code> and <code>active</code>, which may not always be true.

D The selector uses invalid CSS syntax and causes a runtime error.

💡 Hint

Consider how class combinations affect element matching.

The selector looks for a button with both classes submit-btn and active. If the active class is added dynamically, the selector may fail when the class is missing.

❓ framework

expert

Which Cypress selector strategy best supports maintainable tests?

Choose the selector strategy that best supports maintainable and robust Cypress tests in a large project.

A Use text content selectors like <code>:contains()</code> to select elements by visible text.

B Use IDs exclusively because they are unique and fast to select.

C Use complex CSS selectors combining multiple classes and element types for precision.

D Use unique <code>data-cy</code> attributes for all interactive elements and avoid relying on classes or IDs.

💡 Hint

Think about what makes selectors stable and easy to maintain as UI changes.

Using unique data-cy attributes isolates selectors from styling and layout changes, making tests more maintainable and less brittle.