# 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)