93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
# Visual Regression Testing
|
|
|
|
## Playwright Screenshot Comparison
|
|
|
|
```typescript
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test('homepage visual', async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
await expect(page).toHaveScreenshot('homepage.png');
|
|
});
|
|
|
|
test('component visual', async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
const header = page.locator('header');
|
|
await expect(header).toHaveScreenshot('header.png');
|
|
});
|
|
|
|
test('with threshold', async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
await expect(page).toHaveScreenshot('page.png', {
|
|
maxDiffPixels: 100,
|
|
maxDiffPixelRatio: 0.01,
|
|
});
|
|
});
|
|
```
|
|
|
|
## Configuration
|
|
|
|
```typescript
|
|
// playwright.config.ts
|
|
export default defineConfig({
|
|
expect: {
|
|
toHaveScreenshot: { maxDiffPixels: 50, threshold: 0.2 },
|
|
},
|
|
projects: [
|
|
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
|
{ name: 'mobile', use: { ...devices['iPhone 12'] } },
|
|
],
|
|
});
|
|
```
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
npx playwright test --update-snapshots # Update all
|
|
npx playwright test visual.spec.ts -u # Update specific
|
|
```
|
|
|
|
## Workflow
|
|
|
|
1. **Baseline**: First run creates reference screenshots
|
|
2. **Compare**: Subsequent runs compare against baseline
|
|
3. **Review**: Check diff images on failure
|
|
4. **Approve**: Update snapshots if change is intentional
|
|
|
|
## Best Practices
|
|
|
|
- Test critical UI components individually
|
|
- Use consistent viewport sizes
|
|
- Disable animations: `animation-duration: 0s !important`
|
|
- Mock dynamic content (dates, random data)
|
|
- Run on CI with consistent environment
|
|
|
|
## Third-Party Tools
|
|
|
|
| Tool | Use Case |
|
|
|------|----------|
|
|
| Percy | Cloud-based, BrowserStack integration |
|
|
| Chromatic | Storybook visual testing |
|
|
| Playwright | Built-in, no vendor lock-in |
|
|
|
|
## CI Integration
|
|
|
|
```yaml
|
|
- name: Visual Tests
|
|
run: npx playwright test --grep @visual
|
|
- uses: actions/upload-artifact@v4
|
|
if: failure()
|
|
with:
|
|
name: visual-diffs
|
|
path: test-results/
|
|
```
|
|
|
|
## Visual vs Accessibility
|
|
|
|
| Aspect | Visual | Accessibility |
|
|
|--------|--------|---------------|
|
|
| Catches | Layout, colors | Semantic, ARIA |
|
|
| Method | Pixel diff | DOM analysis |
|
|
|
|
**Use both**: Visual misses semantic issues, a11y misses layout bugs.
|