Test ID
// Definition
A dedicated HTML attribute (`data-testid`, `data-cy`, `data-test`) added solely so tests can locate an element reliably — decoupled from styling, copy, and structure. Because it exists only for testing, it doesn't change when designers restyle or copywriters reword, making it the most stable locator strategy.
// Why it matters
Test IDs are the single biggest lever for locator stability — a suite built on data-cy hooks survives redesigns that would shatter CSS- or text-based locators. QA cares because adding them is a small dev cost that pays back enormously in reduced test maintenance; their absence is why many suites are brittle.
// How to test
// Stable: a hook that exists only for tests
cy.get('[data-cy=submit-order]').click()
// vs brittle alternatives that break on restyle/reword:
// cy.get('button.btn-primary.lg') ← breaks on restyle
// cy.contains('Submit Order') ← breaks on copy change// Common mistakes
- Reusing one test-id on multiple elements (locator matches several)
- Leaking test-ids into production concerns (they're harmless but keep them purposeful)
- Falling back to CSS/text locators instead of asking devs to add a test-id
// Related terms
Locator
A description of how to find an element on a page — by id, CSS, XPath, role, or test attribute. Modern frameworks prefer role and test-id locators because they're resilient to DOM changes.
Selector
A CSS or XPath expression that identifies one or more DOM elements. Often used interchangeably with 'locator', though locator is the broader concept.