Best practices for selectors in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why should you avoid using CSS classes or IDs that might change frequently as selectors in Cypress tests?

Because these selectors can change when the UI design changes, making tests fragile and prone to breaking even if the functionality is fine.

beginner

What is the recommended attribute to use for selectors in Cypress tests?

Use custom data attributes like data-cy or data-test because they are stable and only used for testing, so they don't change with UI updates.

intermediate

How does using semantic HTML elements help with selectors?

Semantic elements like <button> or <nav> make selectors clearer and improve accessibility, which benefits both users and tests.

intermediate

What is a good practice when writing selectors to avoid brittle tests?

Write selectors that are specific enough to find the element but not too tied to styling or layout, for example, use data-cy='submit-button' instead of .btn-primary.

beginner

Why should you avoid using text content as the only selector in Cypress tests?

Because text can change due to translations or content updates, making tests fail even if the element is still there and working.

Which attribute is best to use for stable selectors in Cypress tests?

A data-cy

B class

C id

D style

Custom attributes like data-cy are meant for testing and less likely to change, making tests more stable.

What is a downside of using CSS classes as selectors in tests?

A They improve test speed

B They are always unique

C They might change with UI design updates

D They are recommended by Cypress

CSS classes often change when the UI is redesigned, which can break tests that rely on them.

Why avoid using visible text as the only selector?

A Text is always unique

B Text selectors are recommended for accessibility

C Text selectors are faster

D Text can change due to translations or updates

Text content can change, causing tests to fail even if the element is present.

Which selector practice improves both test stability and accessibility?

A Using inline styles

B Using data attributes and semantic HTML

C Using random IDs

D Using only class names

Data attributes keep selectors stable, and semantic HTML helps screen readers and test clarity.

What is a good way to write selectors to avoid brittle tests?

A Use custom data attributes with meaningful names

B Use very specific selectors tied to styling

C Use selectors based on element position only

D Use very general selectors like 'div'

Custom data attributes with clear names help tests find elements reliably without breaking easily.

Explain why using custom data attributes like data-cy is recommended for selectors in Cypress tests.

Think about what makes a selector less likely to break when the UI changes.

Describe how semantic HTML elements and good selector practices contribute to both accessibility and test stability.

Consider the benefits for users and testers.

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