282 lines
9.6 KiB
TypeScript
282 lines
9.6 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { loginAsUser, TEST_CONFIG } from './utils/test-helpers';
|
|
|
|
/**
|
|
* Visual Regression Tests
|
|
*
|
|
* These tests capture screenshots of UI components and pages
|
|
* to detect visual regressions. Screenshots are stored in:
|
|
* - test-results/visual-regression.spec.ts-snapshots/
|
|
*
|
|
* To update screenshots after intentional changes:
|
|
* - Run: npx playwright test --update-snapshots
|
|
*
|
|
* To run only visual tests:
|
|
* - Run: npx playwright test visual-regression
|
|
*/
|
|
|
|
test.describe('Visual Regression Tests', () => {
|
|
// Use authenticated state for most tests
|
|
test.use({ storageState: 'e2e/.auth/user.json' });
|
|
|
|
test.describe('Authentication Pages', () => {
|
|
test('login page visual snapshot', async ({ page }) => {
|
|
// Use unauthenticated state for login page
|
|
await page.context().clearCookies();
|
|
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/login`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for form to be fully rendered
|
|
await page.waitForSelector('form', { timeout: 5000 });
|
|
await page.waitForTimeout(500); // Allow animations to settle
|
|
|
|
await expect(page).toHaveScreenshot('login-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 100, // Allow small differences (fonts, anti-aliasing)
|
|
});
|
|
});
|
|
|
|
test('register page visual snapshot', async ({ page }) => {
|
|
// Use unauthenticated state for register page
|
|
await page.context().clearCookies();
|
|
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/register`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for form to be fully rendered
|
|
await page.waitForSelector('form', { timeout: 5000 });
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page).toHaveScreenshot('register-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 100,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Dashboard Pages', () => {
|
|
test('dashboard page visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/dashboard`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for main content to load
|
|
await page.waitForSelector('main, [role="main"]', { timeout: 10000 });
|
|
await page.waitForTimeout(1000); // Allow data to load
|
|
|
|
await expect(page).toHaveScreenshot('dashboard-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
|
|
test('dashboard header visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/dashboard`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for header
|
|
const header = page.locator('header').first();
|
|
await header.waitFor({ timeout: 5000 });
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(header).toHaveScreenshot('dashboard-header.png', {
|
|
maxDiffPixels: 50,
|
|
});
|
|
});
|
|
|
|
test('dashboard sidebar visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/dashboard`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for sidebar
|
|
const sidebar = page.locator('aside').first();
|
|
await sidebar.waitFor({ timeout: 5000 });
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(sidebar).toHaveScreenshot('dashboard-sidebar.png', {
|
|
maxDiffPixels: 50,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Profile Page', () => {
|
|
test('profile page visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/profile`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for profile content
|
|
await page.waitForSelector('main, [role="main"]', { timeout: 10000 });
|
|
await page.waitForTimeout(1000);
|
|
|
|
await expect(page).toHaveScreenshot('profile-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Tracks Pages', () => {
|
|
test('tracks list page visual snapshot', async ({ page }) => {
|
|
// Navigate to tracks page (adjust route as needed)
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/tracks`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for tracks list to load
|
|
await page.waitForTimeout(2000); // Allow tracks to load
|
|
|
|
await expect(page).toHaveScreenshot('tracks-list-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Playlists Pages', () => {
|
|
test('playlists page visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/playlists`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for playlists to load
|
|
await page.waitForTimeout(2000);
|
|
|
|
await expect(page).toHaveScreenshot('playlists-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('UI Components', () => {
|
|
test('button variants visual snapshot', async ({ page }) => {
|
|
// Create a test page with button variants
|
|
await page.setContent(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/src/index.css">
|
|
</head>
|
|
<body style="padding: 20px; background: white;">
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<button class="bg-primary text-white px-4 py-2 rounded">Primary Button</button>
|
|
<button class="bg-secondary text-white px-4 py-2 rounded">Secondary Button</button>
|
|
<button class="border px-4 py-2 rounded">Outline Button</button>
|
|
<button class="bg-destructive text-white px-4 py-2 rounded">Destructive Button</button>
|
|
<button class="bg-primary text-white px-4 py-2 rounded" disabled>Disabled Button</button>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page).toHaveScreenshot('button-variants.png', {
|
|
maxDiffPixels: 50,
|
|
});
|
|
});
|
|
|
|
test('card component visual snapshot', async ({ page }) => {
|
|
await page.setContent(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/src/index.css">
|
|
</head>
|
|
<body style="padding: 20px; background: white;">
|
|
<div class="rounded-lg border bg-card shadow-sm p-6" style="max-width: 400px;">
|
|
<h3 class="text-lg font-semibold mb-2">Card Title</h3>
|
|
<p class="text-muted-foreground">This is a card component with some content.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page).toHaveScreenshot('card-component.png', {
|
|
maxDiffPixels: 50,
|
|
});
|
|
});
|
|
|
|
test('form elements visual snapshot', async ({ page }) => {
|
|
await page.setContent(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/src/index.css">
|
|
</head>
|
|
<body style="padding: 20px; background: white;">
|
|
<form style="max-width: 400px; display: flex; flex-direction: column; gap: 15px;">
|
|
<div>
|
|
<label class="block mb-1">Text Input</label>
|
|
<input type="text" class="w-full px-3 py-2 border rounded" placeholder="Enter text">
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1">Email Input</label>
|
|
<input type="email" class="w-full px-3 py-2 border rounded" placeholder="email@example.com">
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1">Password Input</label>
|
|
<input type="password" class="w-full px-3 py-2 border rounded" placeholder="Password">
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1">Textarea</label>
|
|
<textarea class="w-full px-3 py-2 border rounded" rows="3" placeholder="Enter message"></textarea>
|
|
</div>
|
|
<button type="submit" class="bg-primary text-white px-4 py-2 rounded">Submit</button>
|
|
</form>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page).toHaveScreenshot('form-elements.png', {
|
|
maxDiffPixels: 50,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Error States', () => {
|
|
test('404 page visual snapshot', async ({ page }) => {
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/non-existent-page`);
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(1000);
|
|
|
|
await expect(page).toHaveScreenshot('404-page.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 100,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('Responsive Design', () => {
|
|
test('mobile viewport dashboard snapshot', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/dashboard`);
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(1000);
|
|
|
|
await expect(page).toHaveScreenshot('dashboard-mobile.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
|
|
test('tablet viewport dashboard snapshot', async ({ page }) => {
|
|
// Set tablet viewport
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
|
|
await page.goto(`${TEST_CONFIG.FRONTEND_URL}/dashboard`);
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(1000);
|
|
|
|
await expect(page).toHaveScreenshot('dashboard-tablet.png', {
|
|
fullPage: true,
|
|
maxDiffPixels: 200,
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|