Add visual regression coverage

tests/visual/helpers.ts

@@ -0,0 +1,50 @@
+import { expect, type Locator, type Page } from '@playwright/test'
+
+export const VIEWPORTS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const
+
+export const FULL_SESSION = 9472
+
+/** Wait for web fonts and layout to settle before screenshots. */
+export async function waitForScreenshotReady(page: Page): Promise<void> {
+  await page.evaluate(() => document.fonts.ready)
+  await page.waitForTimeout(150)
+}
+
+export async function gotoRaceHubReady(page: Page, sessionKey = FULL_SESSION): Promise<void> {
+  await page.goto(`/race-hub?session_key=${sessionKey}`)
+  await expect(page.getByText('Final Classification')).toBeVisible()
+  await expect(page.locator('.drv-code', { hasText: 'VER' })).toBeVisible()
+  await waitForScreenshotReady(page)
+}
+
+export async function gotoDataLibraryReady(page: Page): Promise<void> {
+  await page.goto('/data-library')
+  await expect(page.getByTestId('data-library')).toBeVisible()
+  await expect(page.getByTestId('dl-meeting-1229')).toBeVisible()
+  await expect(page.getByTestId('meeting-detail')).toBeVisible()
+  await waitForScreenshotReady(page)
+}
+
+export async function gotoLiveEmptyReady(page: Page): Promise<void> {
+  await page.goto('/live')
+  await expect(page.locator('.loading-state')).toHaveCount(0)
+  await expect(page.getByTestId('live-empty')).toBeVisible()
+  await waitForScreenshotReady(page)
+}
+
+export async function screenshotPage(
+  page: Page,
+  name: string,
+  options?: { mask?: Locator[] },
+): Promise<void> {
+  await expect(page).toHaveScreenshot(`${name}.png`, {
+    fullPage: true,
+    animations: 'disabled',
+    caret: 'hide',
+    mask: options?.mask,
+  })
+}

tests/visual/mvp-screens.spec.ts

@@ -0,0 +1,24 @@
+import { test } from '@playwright/test'
+import {
+  gotoDataLibraryReady,
+  gotoLiveEmptyReady,
+  gotoRaceHubReady,
+  screenshotPage,
+} from './helpers'
+
+test.describe('MVP visual regression', () => {
+  test('race-hub', async ({ page }) => {
+    await gotoRaceHubReady(page)
+    await screenshotPage(page, 'race-hub')
+  })
+
+  test('data-library', async ({ page }) => {
+    await gotoDataLibraryReady(page)
+    await screenshotPage(page, 'data-library')
+  })
+
+  test('live-empty', async ({ page }) => {
+    await gotoLiveEmptyReady(page)
+    await screenshotPage(page, 'live')
+  })
+})