dfd1bccb89
Production-ready test infrastructure with Page Object Model pattern, reusable fixtures for auth/DB/test-data, and example tests covering login flow, dashboard, accounts CRUD API, and visual regression. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
/**
|
|
* Visual regression tests using Playwright's toHaveScreenshot().
|
|
*
|
|
* These capture pixel-level snapshots and compare against baselines.
|
|
* First run creates the baseline images in tests/e2e/visual.spec.ts-snapshots/.
|
|
*
|
|
* Update baselines: npx playwright test tests/e2e/visual.spec.ts --update-snapshots
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { LoginPage } from '../page-objects';
|
|
|
|
// Use a clean context for login page screenshots
|
|
test.use({ storageState: { cookies: [], origins: [] } });
|
|
|
|
test.describe('Visual Regression', () => {
|
|
test('login page should match baseline', async ({ page }) => {
|
|
const loginPage = new LoginPage(page);
|
|
await loginPage.goto();
|
|
await loginPage.waitForReady();
|
|
|
|
// Wait for any animations to settle
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page).toHaveScreenshot('login-page.png', {
|
|
fullPage: true,
|
|
// Mask dynamic content that changes between runs
|
|
mask: [
|
|
// Mask any CSRF tokens or dynamic ids in the DOM
|
|
page.locator('input[type="hidden"]'),
|
|
],
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Authenticated Visual Regression', () => {
|
|
test('dashboard should match baseline', async ({ page }) => {
|
|
await page.goto('/dashboard');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for charts/data to render
|
|
await page.waitForTimeout(1_000);
|
|
|
|
await expect(page).toHaveScreenshot('dashboard.png', {
|
|
fullPage: true,
|
|
// Mask dates and dynamic numbers that change between runs
|
|
mask: [
|
|
page.locator('time'),
|
|
page.locator('[data-testid="current-date"]'),
|
|
],
|
|
});
|
|
});
|
|
});
|