29074f26a6
- Deleted `I18N_IMPLEMENTATION_PLAN.md` and `PROJECT_PROGRESS.md` to declutter the repository. - These documents were finalized, no longer relevant, and superseded by implemented features and external references.
130 lines
3.3 KiB
Markdown
130 lines
3.3 KiB
Markdown
# E2E Testing with Playwright
|
|
|
|
## Overview
|
|
|
|
This directory contains end-to-end (E2E) tests for the authentication system using Playwright. These tests verify the complete user flows in a real browser environment.
|
|
|
|
## Test Coverage
|
|
|
|
- **Login Flow** (`auth-login.spec.ts`)
|
|
- Form validation
|
|
- Invalid credentials handling
|
|
- Successful login
|
|
- Navigation between auth pages
|
|
- Password visibility toggle
|
|
- Loading states
|
|
|
|
- **Registration Flow** (`auth-register.spec.ts`)
|
|
- Form validation (email, first_name, password, confirmPassword)
|
|
- Field-specific validation errors
|
|
- Duplicate email handling
|
|
- Successful registration
|
|
- Navigation and UI interactions
|
|
|
|
- **Password Reset Flow** (`auth-password-reset.spec.ts`)
|
|
- Request reset email validation
|
|
- Success message display
|
|
- Confirm with token validation
|
|
- Missing/invalid token handling
|
|
- Password strength validation
|
|
- Password mismatch validation
|
|
|
|
- **AuthGuard Protection** (`auth-guard.spec.ts`)
|
|
- Route protection
|
|
- Public route access
|
|
- Token persistence
|
|
- Logout behavior
|
|
- Expired token handling
|
|
- Intended destination preservation
|
|
|
|
## Running Tests
|
|
|
|
```bash
|
|
# Run all E2E tests
|
|
npm run test:e2e
|
|
|
|
# Run tests in specific browser
|
|
npm run test:e2e -- --project=chromium
|
|
npm run test:e2e -- --project=firefox
|
|
npm run test:e2e -- --project=webkit
|
|
|
|
# Run tests in headed mode (see browser)
|
|
npm run test:e2e -- --headed
|
|
|
|
# Run specific test file
|
|
npm run test:e2e -- auth-login.spec.ts
|
|
|
|
# Debug mode
|
|
npm run test:e2e -- --debug
|
|
```
|
|
|
|
## Current Status
|
|
|
|
Comprehensive E2E test coverage across all authentication flows. Tests are designed to be non-flaky with proper waits and selectors.
|
|
|
|
Run `npm run test:e2e` to verify current status.
|
|
|
|
## Prerequisites
|
|
|
|
- **Dev Server**: Must be running on `localhost:3000`
|
|
- **Backend API**: Should be running on `localhost:8000` (optional for some tests)
|
|
- **Playwright Browsers**: Auto-installed via `npx playwright install`
|
|
|
|
## Configuration
|
|
|
|
See `playwright.config.ts` for:
|
|
|
|
- Browser targets (Chromium, Firefox, WebKit)
|
|
- Base URL configuration
|
|
- Screenshot and video settings
|
|
- Parallel execution settings
|
|
|
|
## Test Structure
|
|
|
|
Each test file follows this pattern:
|
|
|
|
```typescript
|
|
test.describe('Feature Name', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Setup before each test
|
|
await page.goto('/route');
|
|
});
|
|
|
|
test('should do something', async ({ page }) => {
|
|
// Test implementation
|
|
await expect(page.locator('selector')).toBeVisible();
|
|
});
|
|
});
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Wait for elements** - Use `await expect().toBeVisible()` instead of `page.waitForSelector()`
|
|
2. **Unique selectors** - Prefer `data-testid`, `role`, or specific text over generic CSS
|
|
3. **Avoid hardcoded delays** - Use Playwright's auto-waiting instead of `waitForTimeout()`
|
|
4. **Test independence** - Each test should be able to run in isolation
|
|
5. **Clean state** - Clear cookies and storage before each test
|
|
|
|
## Debugging
|
|
|
|
```bash
|
|
# Run with UI mode
|
|
npx playwright test --ui
|
|
|
|
# Generate trace
|
|
npm run test:e2e -- --trace on
|
|
|
|
# View test report
|
|
npx playwright show-report
|
|
```
|
|
|
|
## Future Enhancements
|
|
|
|
- [ ] Add API mocking for consistent test data
|
|
- [ ] Add visual regression testing
|
|
- [ ] Add accessibility testing (axe-core)
|
|
- [ ] Add performance testing
|
|
- [ ] Integrate with CI/CD pipeline
|
|
- [ ] Add test data fixtures
|
|
- [ ] Add page object models for better maintainability
|