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.

Practice

1. Why are data-cy attributes recommended for locating elements in Cypress tests?

easy

A. They improve page loading speed.

B. They automatically generate test data for forms.

C. They provide stable and unique selectors that don't change with UI updates.

D. They style elements with CSS.

Solution

1. Step 1: Understand the purpose of data-cy attributes

   data-cy attributes are used as custom selectors in tests to find elements reliably.

2. Step 2: Recognize why stability matters in tests

   Using data-cy keeps tests stable because these attributes don't change when the page design or CSS changes.

3. Final Answer:

   They provide stable and unique selectors that don't change with UI updates. -> Option C

4. Quick Check:

   Stable selectors = They provide stable and unique selectors that don't change with UI updates. [OK]

Hint: Remember: stable selectors = stable tests [OK]

Common Mistakes:

• Thinking data-cy affects page style
• Confusing data-cy with test data generation
• Assuming data-cy improves performance

2. Which of the following is the correct way to select an element with data-cy='submit-button' in Cypress?

easy

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

B. cy.get('submit-button')

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

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

Solution

1. Step 1: Recall the syntax for attribute selectors in Cypress

   To select an element by attribute, use cy.get('[attribute=value]').

2. Step 2: Match the attribute and value correctly

   The attribute is data-cy and value is submit-button, so the selector is [data-cy=submit-button].

3. Final Answer:

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

4. Quick Check:

   Attribute selector syntax = cy.get('[data-cy=submit-button]') [OK]

Hint: Use square brackets for attribute selectors [OK]

Common Mistakes:

• Omitting square brackets in selector
• Using ID or class selectors instead of attribute
• Not quoting attribute values when needed

3. Given this HTML snippet:

<button data-cy="login-btn">Login</button>

What will the following Cypress command do?

cy.get('[data-cy=login-btn]').click()

medium

A. Find the button with data-cy 'login-btn' and click it.

B. Throw an error because the selector is invalid.

C. Click the first button on the page regardless of attributes.

D. Find all buttons and click them all.

Solution

1. Step 1: Understand the selector usage

   The command cy.get('[data-cy=login-btn]') selects the element with attribute data-cy equal to login-btn.

2. Step 2: Understand the action performed

   The .click() method clicks on the selected element, which is the login button.

3. Final Answer:

   Find the button with data-cy 'login-btn' and click it. -> Option A

4. Quick Check:

   Selector + click = Find the button with data-cy 'login-btn' and click it. [OK]

Hint: Selector matches attribute, then perform action [OK]

Common Mistakes:

• Assuming selector is invalid syntax
• Thinking it clicks all buttons
• Confusing attribute selector with tag selector

4. You wrote this Cypress test:

cy.get('[data-cy=submit]').click()

But the test fails with "Cannot find element" error. What is the most likely cause?

medium

A. The click() method is not supported on buttons.

B. The element does not have a data-cy='submit' attribute.

C. The selector syntax is incorrect; it should be cy.get('data-cy=submit').

D. Cypress cannot click elements inside forms.

Solution

1. Step 1: Check the selector correctness

   The selector [data-cy=submit] is correct syntax for attribute selection.

2. Step 2: Identify why element is not found

   If the test fails to find the element, it likely means the element does not have the data-cy='submit' attribute in the HTML.

3. Final Answer:

   The element does not have a data-cy='submit' attribute. -> Option B

4. Quick Check:

   Missing attribute = The element does not have a data-cy='submit' attribute. [OK]

Hint: Check if attribute exists on element first [OK]

Common Mistakes:

• Blaming click() method for failure
• Using wrong selector syntax
• Assuming Cypress can't click form elements

5. You want to make your Cypress tests more stable by adding data-cy attributes. Which practice will best improve test stability?

hard

A. Use data-cy attributes only on buttons, ignoring other elements.

B. Add data-cy attributes with random values generated at runtime.

C. Use CSS classes as selectors instead of data-cy attributes for flexibility.

D. Add unique, descriptive data-cy attributes to key elements and use them in tests.

Solution

1. Step 1: Understand the goal of data-cy attributes

   They help tests find elements reliably and keep tests stable even if UI changes.

2. Step 2: Identify best practice for stability

   Using unique, descriptive data-cy attributes on important elements ensures selectors remain stable and easy to maintain.

3. Final Answer:

   Add unique, descriptive data-cy attributes to key elements and use them in tests. -> Option D

4. Quick Check:

   Unique descriptive attributes = Add unique, descriptive data-cy attributes to key elements and use them in tests. [OK]

Hint: Use clear, unique data-cy names for stable tests [OK]

Common Mistakes:

• Adding attributes only to buttons
• Relying on CSS classes that may change
• Using random values that break selectors