Test Levels
E2E Testing
Cypress, Playwright, and User Journeys.
E2E (End-to-End) Testing
Simulating a real user opening a browser and clicking buttons.
Tools
- Cypress: Developer friendly. Runs inside the browser. Great debugging. (Limit: Single tab support).
- Playwright (Microsoft): Faster, supports multiple tabs/browsers (WebKit, Firefox). The new industry favorite.
Best Practices
1. Test ID Selectors
Don't select by CSS class (.btn-primary) or text ("Submit"). These change.
Use stable attributes: data-testid="submit-button".
2. Clean State
Every test should start with a clean database.
- Before Hook:
cy.request('POST', '/api/reset-db'). - Don't rely on state left over from the previous test.
3. Smoke Tests vs. Regression
- Smoke Test: Run on every deploy. Checks critical paths only (Login, Checkout).
- Regression Suite: Run nightly. Checks everything.
Flakiness
The enemy of E2E. Network lag causes a test to fail randomly.
Fix: Use await and built-in retry logic (Playwright auto-wait). Never use hardcoded sleep(5000).