e2e-testing-patterns

Playwright tests use the test and expect functions with auto-waiting locators like getByRole and getByLabel. Structure tests with the Page Object Model to encapsulate page logic, and configure retries, tracing, and screenshots in playwright.config.ts.

Playwright offers native cross-browser support including WebKit, built-in parallelization, and network interception via page.route. Cypress provides an interactive test runner and custom commands via Cypress.Commands.add. Both support API mocking and TypeScript.

Replace fixed timeouts like waitForTimeout with condition-based waits such as waitForURL, waitForResponse, and auto-waiting assertions. Use stable data-testid selectors, isolate test data per test, and enable retries with trace capture in CI.

Use page.route to intercept requests matching a URL pattern and fulfill them with custom status codes and JSON bodies. In Cypress, use cy.intercept with req.reply to stub, modify, or delay API responses.

Avoid testing unit-level logic, API contracts, exhaustive edge cases, and internal implementation details with E2E tests. Reserve E2E for critical user journeys like login, checkout, and signup, following the testing pyramid.

Enable fullyParallel in the config and use test sharding with the --shard flag to split tests across CI workers. Set retries to 2 in CI, limit workers to 1 per machine, and capture traces and videos on failure.