e2e-testing-patterns

Playwright E2E tests use the test runner with page objects, role-based locators like getByRole and getByLabel, and auto-waiting assertions via expect. Configure projects in playwright.config.ts to run across Chromium, Firefox, WebKit, and mobile devices.

Playwright supports multiple browsers including WebKit and offers built-in parallel sharding and trace viewing. Cypress provides custom commands and cy.intercept for API mocking with a simpler debugging experience. Both support network mocking and TypeScript.

Flaky tests usually come from fixed timeouts like waitForTimeout. Replace them with condition-based waits such as waitForURL, waitForResponse, or auto-waiting expect assertions, and use trace viewer and screenshots on failure to diagnose issues.

Use cy.intercept to stub API responses with custom status codes and bodies, modify requests or responses in flight, and simulate slow networks with response delays. Alias intercepts with .as() and use cy.wait() to synchronize test steps.

Use data-testid or data-cy attributes and role-based locators like getByRole and getByLabel for stable selectors. Avoid CSS classes, nth-child, and deep DOM paths since they break when styling or markup structure changes.

Avoid E2E tests for unit-level logic, API contract validation, and edge cases since they are too slow. Follow the testing pyramid: many unit tests, some integration tests, and few E2E tests focused only on critical user journeys.