Design System page (/design-system): - Showcases all pattern components: SettingsCard, FieldRow, StatusBanner, EmptyState, IconAction, SectionPage - Includes Button variants, Input, Select, Switch, Badge primitives - Each section has data-section attribute for targeted screenshots Visual regression tests (npm run test:visual): - Full design system page screenshot - Individual section screenshots (buttons, status banners, cards, field rows) - Settings page screenshot - Uses maxDiffPixelRatio: 0.01 for tight regression detection Infrastructure: - Add test:visual script to package.json - Update playwright.config.ts with screenshot comparison defaults Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
25 lines
555 B
TypeScript
25 lines
555 B
TypeScript
import { defineConfig } from '@playwright/test';
|
|
|
|
export default defineConfig({
|
|
testDir: './src/__tests__/e2e',
|
|
fullyParallel: true,
|
|
forbidOnly: !!process.env.CI,
|
|
retries: process.env.CI ? 2 : 0,
|
|
workers: process.env.CI ? 1 : undefined,
|
|
reporter: 'html',
|
|
use: {
|
|
baseURL: 'http://localhost:3000',
|
|
trace: 'on-first-retry',
|
|
},
|
|
expect: {
|
|
toHaveScreenshot: {
|
|
maxDiffPixelRatio: 0.01,
|
|
},
|
|
},
|
|
webServer: {
|
|
command: 'npm run dev',
|
|
url: 'http://localhost:3000',
|
|
reuseExistingServer: !process.env.CI,
|
|
},
|
|
});
|