Cypress Selector Helper

Cypress recommends data-cy attributes (e.g., data-cy='submit-button') as the most resilient selector strategy. CSS classes and IDs change during refactoring, breaking tests. data-cy attributes are test-specific and communicate intent clearly. They decouple test selectors from presentation concerns. If you can't add data-cy attributes, prefer role-based selectors (cy.findByRole) or accessible text selectors over CSS classes.

cy.get() queries the entire DOM from the root. cy.find() queries within a previously selected element. Use cy.find() to scope searches: cy.get('[data-cy=form]').find('input') finds all inputs inside the form element. This makes tests more precise and less likely to accidentally target the wrong element when similar elements exist elsewhere on the page.

For elements without visible text (icons, buttons with only SVGs, inputs), use: data-cy attributes (recommended), aria-label for accessibility-compliant elements ('cy.get([aria-label=Close])'), type attribute for inputs ('cy.get(input[type=email])'), or placeholder text ('cy.get(input[placeholder=Email address])'). Avoid selecting by CSS class alone as it's brittle.

Cypress automatically retries commands for up to 4 seconds (configurable via defaultCommandTimeout). For content that loads via API calls, use cy.intercept() to wait for network requests: cy.intercept('GET', '/api/users').as('getUsers'); cy.wait('@getUsers'). This is more reliable than cy.wait(3000) hardcoded delays. For animations, use cy.contains(':visible') to wait for element visibility.

cy.findByRole, cy.findByText, cy.findByLabelText etc. come from the @testing-library/cypress plugin. They encourage accessibility-first selectors — selecting elements the way real users interact with them. cy.findByRole('button', { name: 'Submit' }) is more resilient than cy.get('[data-cy=submit]') and doubles as an accessibility check. Install @testing-library/cypress and add to support/commands.ts for best results.