Cypress end-to-end and component testing patterns for web apps: reliable selectors, stable waits, network stubbing, auth handling, CI parallelization, and flake reduction

Cypress (E2E + Component Testing) Overview Cypress runs browser automation with first class network control, time travel debugging, and a strong local dev workflow. Use it for critical path E2E tests and for component tests when browser level rendering matters. Quick Start Install and open Minimal spec Core Patterns 1) Stable selectors Prefer data testid (or data cy ) attributes for selectors. Avoid brittle CSS chains and text only selectors for critical interactions. 2) Deterministic waiting (avoid fixed sleeps) Wait on app visible conditions or network aliases rather than cy.wait(1000) . 3) Network control with cy.intercept Stub responses for deterministic tests and speed. Keep a small set of “real backend” smoke tests separate. 4) Authentication strategies Prefer cy.session to cache login for speed and stability. Component Testing Run component tests to validate UI behavior in isolation while keeping browser rendering. CI Patterns Artifacts (videos/screenshots) Store artifacts for failed runs and keep videos optional to reduce storage. Parallelization (Cypress Cloud) Parallelize long E2E suites via Cypress Cloud when runtime dominates feedback loops. Anti Patterns Use cy.wait(1000) as a synchronization mechanism. Select elements via deep CSS paths. Mix heavy network stubbing with “real backend” assertions in the same spec. Depend on test order; isolate state with cy.session and per test setup. Troubleshooting Symptom: flaky click or element not found Actions: Add a data testid hook for the element. Assert visibility before interaction ( should("be.visible") ). Wait on network alias for the data that renders the element. Symptom: tests fail only in CI Actions: Increase run mode retries and record screenshots on failure. Verify viewport and baseUrl config match CI environment. Eliminate reliance on local only seed data; create data via API calls. Resources Cypress docs: https://docs.cypress.io/ Best practices: https://docs.cypress.io/guides/references/best practices