Add frontend testing - Playwright

2025-11-14 07:46:29 +01:00
parent a8d8828935
commit 4215026d61
21 changed files with 3071 additions and 0 deletions
--- a/frontend/E2E_TESTING.md
+++ b/frontend/E2E_TESTING.md
@@ -0,0 +1,141 @@
+# E2E Testing with Playwright - Quick Start
+
+## ⚡ Quick Start
+
+### Run E2E Tests
+```bash
+cd frontend
+npm run test:e2e
+```
+
+### Open Interactive UI
+```bash
+npm run test:e2e:ui
+```
+
+### Generate Tests by Recording
+```bash
+npm run test:e2e:codegen
+```
+
+## 📖 Full Documentation
+
+See [tests/README.md](./tests/README.md) for complete documentation.
+
+## 🎯 What's Tested
+
+- ✅ **Authentication**: Login, registration, logout flows
+- ✅ **Onboarding**: Multi-step wizard with file upload
+- ✅ **Dashboard**: Health status, action queue, purchase orders
+- ✅ **Operations**: Product/recipe creation, inventory management
+- 🔜 **Analytics**: Forecasting, sales analytics
+- 🔜 **Settings**: Profile, team, subscription management
+
+## 🔧 Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run test:e2e` | Run all tests (headless) |
+| `npm run test:e2e:ui` | Run with interactive UI |
+| `npm run test:e2e:headed` | Run with visible browser |
+| `npm run test:e2e:debug` | Debug tests step-by-step |
+| `npm run test:e2e:report` | View test results report |
+| `npm run test:e2e:codegen` | Record new tests |
+
+## 🚀 CI/CD
+
+Tests run automatically on GitHub Actions:
+- Every push to `main` or `develop`
+- Every pull request
+- Results posted as PR comments
+- Artifacts (screenshots, videos) uploaded on failure
+
+## 🔐 Test Credentials
+
+Set environment variables:
+```bash
+export TEST_USER_EMAIL="test@bakery.com"
+export TEST_USER_PASSWORD="your-test-password"
+```
+
+Or create `.env` file in frontend directory:
+```
+TEST_USER_EMAIL=test@bakery.com
+TEST_USER_PASSWORD=your-test-password
+```
+
+## 📂 Project Structure
+
+```
+frontend/tests/
+├── auth/           # Login, register tests
+├── onboarding/     # Wizard flow tests
+├── dashboard/      # Dashboard tests
+├── operations/     # Business logic tests
+├── fixtures/       # Test data (CSV, etc.)
+└── helpers/        # Reusable utilities
+```
+
+## 🎓 Writing Your First Test
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('My Feature', () => {
+  test.use({ storageState: 'tests/.auth/user.json' }); // Use auth
+
+  test('should work correctly', async ({ page }) => {
+    await page.goto('/app/my-page');
+    await page.getByRole('button', { name: 'Click me' }).click();
+    await expect(page).toHaveURL('/success');
+  });
+});
+```
+
+## 🐛 Debugging
+
+```bash
+# Step through test with inspector
+npm run test:e2e:debug
+
+# Run specific test
+npx playwright test tests/auth/login.spec.ts
+
+# Run with browser visible
+npm run test:e2e:headed
+```
+
+## 📊 View Reports
+
+```bash
+npm run test:e2e:report
+```
+
+Opens HTML report with:
+- Test results
+- Screenshots on failure
+- Videos on failure
+- Execution traces
+
+## 🌍 Multi-Browser Testing
+
+Tests run on:
+- ✅ Chromium (Chrome/Edge)
+- ✅ Firefox
+- ✅ WebKit (Safari)
+- ✅ Mobile Chrome (Pixel 5)
+- ✅ Mobile Safari (iPhone 13)
+
+## 💰 Cost: $0
+
+Playwright is 100% free and open source. No cloud subscription required.
+
+## 📚 Learn More
+
+- [Full Documentation](./tests/README.md)
+- [Playwright Docs](https://playwright.dev)
+- [Best Practices](https://playwright.dev/docs/best-practices)
+
+---
+
+**Need help?** Check [tests/README.md](./tests/README.md) or [Playwright Docs](https://playwright.dev)