142 lines
3.2 KiB
Markdown
142 lines
3.2 KiB
Markdown
# 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)
|