bakery-admin/bakery-ia

Fork 0

Files

Urtzi Alfaro 4215026d61 Add frontend testing - Playwright

2025-11-14 07:46:29 +01:00

3.2 KiB

Raw Blame History

E2E Testing with Playwright - Quick Start

⚡ Quick Start

Run E2E Tests

cd frontend
npm run test:e2e

Open Interactive UI

npm run test:e2e:ui

Generate Tests by Recording

npm run test:e2e:codegen

📖 Full Documentation

See 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:

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

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

# 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

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

Need help? Check tests/README.md or Playwright Docs

3.2 KiB Raw Blame History