Best practices for selectors in Cypress - Test Execution Trace

Test Overview

This test checks that a login form can be submitted using best practice selectors. It verifies that the username and password fields are found by data attributes, the submit button is clicked, and the success message appears.

Test Code - Cypress

Cypress

describe('Login form test with best practice selectors', () => {
  it('submits login form and shows success message', () => {
    cy.visit('/login')
    cy.get('[data-cy=username]').type('testuser')
    cy.get('[data-cy=password]').type('password123')
    cy.get('[data-cy=submit-button]').click()
    cy.get('[data-cy=success-message]').should('be.visible').and('contain.text', 'Login successful')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, browser ready	-	PASS
2	Browser opens and navigates to '/login'	Login page is loaded with username, password fields and submit button	URL contains '/login'	PASS
3	Find username input using data-cy attribute and type 'testuser'	Username input field focused with text 'testuser'	Input value equals 'testuser'	PASS
4	Find password input using data-cy attribute and type 'password123'	Password input field focused with text 'password123'	Input value equals 'password123'	PASS
5	Find submit button using data-cy attribute and click it	Form submitted, page processing login	-	PASS
6	Find success message using data-cy attribute and verify it is visible and contains 'Login successful'	Success message displayed on page	Success message is visible and text contains 'Login successful'	PASS

Failure Scenario

Failing Condition: Selector does not match any element or element is missing

Execution Trace Quiz - 3 Questions

Why is using data-cy attributes recommended for selectors in Cypress tests?

A They select elements by visible text

B They are automatically generated by Cypress

C They are stable and do not change with styling or layout changes

D They are faster than CSS selectors

Key Result

Use custom data attributes like data-cy for selectors to make tests stable and easy to maintain, avoiding selectors tied to styling or layout.