data-cy attributes for test stability in Cypress - Test Execution Trace

Test Overview

This test checks that a login button with a data-cy attribute can be found and clicked reliably. It verifies that using data-cy attributes helps keep tests stable even if other page elements change.

Test Code - Cypress

Cypress

describe('Login Button Test', () => {
  it('should find and click the login button using data-cy attribute', () => {
    cy.visit('https://example.com/login');
    cy.get('[data-cy="login-button"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to https://example.com/login	Login page is loaded with login button having data-cy='login-button'	-	PASS
3	Find element with selector [data-cy=login-button]	Login button element is found using data-cy attribute	Element exists and is visible	PASS
4	Click the login button	Login button is clicked, triggering navigation	-	PASS
5	Check that URL includes '/dashboard' after click	Browser navigated to dashboard page	URL contains '/dashboard'	PASS

Failure Scenario

Failing Condition: The element with data-cy='login-button' is missing or changed

Execution Trace Quiz - 3 Questions

Why is using data-cy attributes recommended for locating elements in tests?

A They are less likely to change and keep tests stable

B They make the page load faster

C They improve the visual style of the page

D They automatically fix broken tests

Key Result

Using dedicated data-cy attributes for element selectors makes tests more stable and less likely to break when UI changes, because these attributes are meant only for testing and do not affect styling or functionality.