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.

Practice

1. Which of the following is the best practice for choosing selectors in Cypress tests?

easy

A. Use text content that may change frequently.

B. Use CSS classes that might change with styling updates.

C. Use element positions like :nth-child() selectors.

D. Use unique IDs or custom data attributes for selectors.

Solution

1. Step 1: Understand selector stability

   Selectors should be stable and unique to avoid breaking tests when UI changes.

2. Step 2: Evaluate options for stability

   IDs and custom data attributes are stable and unique, unlike classes or text that can change.

3. Final Answer:

   Use unique IDs or custom data attributes for selectors. -> Option D

4. Quick Check:

   Stable selectors = IDs or data attributes [OK]

Hint: Pick selectors that rarely change, like IDs or data attributes [OK]

Common Mistakes:

• Using CSS classes that change with styling
• Selecting by visible text that may vary
• Relying on element order which can shift

2. Which of the following is the correct syntax to select an element with a custom attribute data-test='submit-btn' in Cypress?

easy

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

B. cy.get('data-test=submit-btn')

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

D. cy.get('.submit-btn')

Solution

1. Step 1: Recall attribute selector syntax

   In CSS selectors, attributes are selected with square brackets and quotes if needed.

2. Step 2: Match correct Cypress syntax

   cy.get('[data-test=submit-btn]') correctly uses attribute selector syntax.

3. Final Answer:

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

4. Quick Check:

   Attribute selectors use brackets [] [OK]

Hint: Use brackets [] around attribute selectors in cy.get() [OK]

Common Mistakes:

• Omitting brackets for attribute selectors
• Using ID or class selectors incorrectly
• Missing quotes around attribute values

3. Given the HTML snippet:

<button data-cy='login-btn' class='btn primary'>Login</button>

What will cy.get('.btn.primary').click() do if the class changes to btn secondary later?

medium

A. The test will fail because the selector no longer matches.

B. The test will still pass because class selectors are stable.

C. The test will click a different button automatically.

D. The test will ignore the class and find the button by text.

Solution

1. Step 1: Understand selector dependency on class names

   The selector '.btn.primary' depends on the button having both classes 'btn' and 'primary'.

2. Step 2: Analyze effect of class change

   If the class changes to 'btn secondary', the selector '.btn.primary' no longer matches, causing failure.

3. Final Answer:

   The test will fail because the selector no longer matches. -> Option A

4. Quick Check:

   Class selectors break if classes change [OK]

Hint: Avoid class selectors that can change with styling [OK]

Common Mistakes:

• Assuming class selectors are stable
• Expecting automatic fallback to other selectors
• Thinking text selectors are used automatically

4. You wrote this Cypress selector: cy.get('button.submit-btn') but the test fails because the button has no class submit-btn. How can you fix it following best practices?

medium

A. Add the class submit-btn to the button in HTML.

B. Change selector to use a stable attribute like data-cy='submit-btn'.

C. Use cy.get('button') to select all buttons.

D. Use cy.contains('Submit') to select by text.

Solution

1. Step 1: Identify the problem with class selector

   The button lacks the class 'submit-btn', so the selector fails.

2. Step 2: Apply best practice for stable selectors

   Using a custom attribute like data-cy='submit-btn' is stable and recommended.

3. Final Answer:

   Change selector to use a stable attribute like data-cy='submit-btn'. -> Option B

4. Quick Check:

   Stable selectors use custom attributes [OK]

Hint: Use custom data attributes for stable selectors [OK]

Common Mistakes:

• Relying on missing or changing classes
• Selecting too broadly causing flaky tests
• Using text selectors that may change

5. You want to write a Cypress test that clicks the 'Save' button inside a form. The button has no ID but has data-test='save-btn'. The form has multiple buttons with different data-test attributes. Which selector is best to ensure you click the correct button inside the form?

hard

A. cy.get('form button').eq(0).click()

B. cy.get('[data-test=save-btn]').click()

C. cy.get('form').find('[data-test=save-btn]').click()

D. cy.get('button').contains('Save').click()

Solution

1. Step 1: Understand the need for context-specific selection

   Since multiple buttons have data-test attributes, selecting within the form narrows scope.

2. Step 2: Choose selector that scopes to form and targets correct button

   Using cy.get('form').find('[data-test=save-btn]') ensures the button inside the form is selected.

3. Final Answer:

   cy.get('form').find('[data-test=save-btn]').click() -> Option C

4. Quick Check:

   Scoped selectors avoid ambiguity [OK]

Hint: Scope selectors inside containers to avoid ambiguity [OK]

Common Mistakes:

• Selecting buttons globally causing wrong clicks
• Using text selectors that may match multiple elements
• Using index-based selectors that can break easily