73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown
# Phase 2: Playwright Installation & Setup
|
|
|
|
**Purpose**: Install Playwright and generate optimal configuration
|
|
|
|
## Steps
|
|
|
|
### 1. Install Playwright
|
|
|
|
```bash
|
|
npm init playwright@latest -- --yes
|
|
# Installs Playwright, test runners, and browsers (Chromium, Firefox, WebKit)
|
|
```
|
|
|
|
### 2. Generate playwright.config.ts
|
|
|
|
Configure based on app type:
|
|
- Set base URL (http://localhost:5173 for Vite, etc.)
|
|
- Configure viewport sizes:
|
|
- Desktop: 1280x720
|
|
- Tablet: 768x1024
|
|
- Mobile: 375x667
|
|
- Set screenshot directory: `screenshots/{test-name}/{timestamp}/`
|
|
- Enable trace on failure for debugging
|
|
- Configure retries (2 attempts) and timeout (30s)
|
|
|
|
### 3. Set up directory structure
|
|
|
|
```
|
|
tests/
|
|
├── setup/
|
|
│ └── global-setup.ts # Start dev server
|
|
├── pages/
|
|
│ └── *.page.ts # Page object models
|
|
├── specs/
|
|
│ └── *.spec.ts # Test specifications
|
|
└── utils/
|
|
└── screenshot-helper.ts
|
|
|
|
screenshots/
|
|
├── baselines/ # Reference images
|
|
├── current/ # Latest test run
|
|
└── diffs/ # Visual comparisons
|
|
```
|
|
|
|
### 4. Integrate with existing test setup
|
|
|
|
- Add playwright scripts to package.json
|
|
- Configure alongside Vitest/Jest (no conflicts)
|
|
- Set up TypeScript types for Playwright
|
|
|
|
## Output
|
|
|
|
Fully configured Playwright environment with version-appropriate templates
|
|
|
|
## Performance
|
|
|
|
~2-3 minutes for installation and setup (one-time)
|
|
|
|
## Common Issues
|
|
|
|
**Installation fails**
|
|
- Check Node version (>=16)
|
|
- Retry with --force
|
|
- Suggest manual installation if network issues
|
|
|
|
**Browser download fails**
|
|
- Check disk space (~500MB needed)
|
|
- Try installing specific browser: `npx playwright install chromium`
|
|
|
|
## Transition
|
|
|
|
Proceed to Phase 2.5 (Pre-flight Health Check)
|