Why data-cy attributes for test stability in Cypress? - Purpose & Use Cases

The Big Idea

Discover how a tiny attribute can save hours of test failures and frustration!

The Scenario

Imagine you are testing a website manually and trying to find buttons or fields by guessing their names or classes. Sometimes these change because developers update the design or add new features. You spend a lot of time searching for the right element to click or type into.

The Problem

Manually finding elements by their visible text or CSS classes is slow and often breaks tests when the page changes. This causes frustration because tests fail for reasons unrelated to actual bugs, making it hard to trust the results.

The Solution

Using data-cy attributes gives each important element a stable, unique label just for testing. This means tests can find elements reliably, even if the design or classes change. It keeps tests strong and easy to maintain.

Before vs After

✗ Before

cy.get('.btn-primary').click()

✓ After

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

What It Enables

It enables writing tests that stay reliable and easy to update, saving time and reducing frustration.

Real Life Example

When a website changes its button colors or layout, tests using data-cy still find the right buttons without any fixes, so your testing keeps running smoothly.

Key Takeaways

Manual element selection breaks easily with UI changes.

data-cy attributes provide stable, unique selectors for tests.

This leads to reliable, maintainable automated tests.