Add mobile-specific regression tests and visual snapshots for mobile-chromium

Author: szolkowski

playwright.config.ts

@@ -53,10 +53,13 @@ export default defineConfig({
       maxDiffPixelRatio: 0,
     },
   },
-  // chromium is the source of truth for visual snapshots — those specs
-  // self-skip on firefox/webkit via `test.skip(browserName !== 'chromium')`.
-  // firefox/webkit cover structural, a11y, JSON-LD, and link tests so we
-  // catch browser-specific CSS/JS regressions cheaply.
+  // chromium is the source of truth for desktop visual snapshots — those
+  // specs self-skip on firefox/webkit via grepInvert. firefox/webkit cover
+  // structural, a11y, JSON-LD, and link tests so we catch browser-specific
+  // CSS/JS regressions cheaply. mobile-chromium runs the whole suite at a
+  // Pixel 7 viewport so the @media (max-width: 640px) branch (mobile-search
+  // hoist) is regression-tested. tests/mobile.spec.ts is mobile-only and
+  // contains the breakpoint-specific assertions + a mobile-only screenshot.
   projects: [
     {
       name: 'chromium',
@@ -65,6 +68,7 @@ export default defineConfig({
         viewport: { width: 1280, height: 800 },
         deviceScaleFactor: 1,
       },
+      testIgnore: /mobile\.spec\.ts/,
     },
     {
       name: 'firefox',
@@ -73,6 +77,7 @@ export default defineConfig({
         viewport: { width: 1280, height: 800 },
       },
       grepInvert: /visual:/,
+      testIgnore: /mobile\.spec\.ts/,
     },
     {
       name: 'webkit',
@@ -81,6 +86,17 @@ export default defineConfig({
         viewport: { width: 1280, height: 800 },
       },
       grepInvert: /visual:/,
+      testIgnore: /mobile\.spec\.ts/,
+    },
+    {
+      name: 'mobile-chromium',
+      use: {
+        ...devices['Pixel 7'],
+      },
+      // Skip desktop visual snapshots — those expect 1280px viewport and
+      // their baselines are platform-keyed without a mobile axis. The
+      // `mobile snapshot:` prefix in mobile.spec.ts bypasses this filter.
+      grepInvert: /visual:/,
     },
   ],
   webServer: {

tests/__snapshots__/mobile.spec.ts/home-mobile-darwin.png

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+// Mobile-specific regression tests. Only runs in the `mobile-chromium`
+// Playwright project (Pixel 7 viewport ≈ 412×915). Desktop projects skip
+// this file via `testIgnore` in playwright.config.ts.
+//
+// Visual tests use the prefix `mobile snapshot:` rather than the desktop
+// `visual:` prefix so the desktop projects' grepInvert doesn't interfere.
+
+test.describe('mobile breakpoint', () => {
+  test('mobile-search is visible, sidebar-search is hidden', async ({
+    page,
+  }) => {
+    await page.goto('/');
+    await expect(page.locator('.mobile-search')).toBeVisible();
+    await expect(page.locator('.sidebar-search')).toBeHidden();
+  });
+
+  test('home page has no critical or serious a11y violations at mobile width', async ({
+    page,
+  }) => {
+    await page.goto('/');
+    await page.waitForLoadState('domcontentloaded');
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+      .exclude('[id^="embedded-badge-"]')
+      .exclude('#disqus_thread')
+      .analyze();
+
+    const blocking = results.violations.filter(
+      (v) => v.impact === 'critical' || v.impact === 'serious',
+    );
+    const formatted = blocking.map((v) => ({
+      id: v.id,
+      impact: v.impact,
+      help: v.help,
+      helpUrl: v.helpUrl,
+      nodes: v.nodes.map((n) => ({ html: n.html, target: n.target })),
+    }));
+    expect(formatted, `axe-core violations on / at mobile`).toEqual([]);
+  });
+
+  test('mobile snapshot: home above the fold', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('domcontentloaded');
+    await expect(page).toHaveScreenshot(
+      `home-mobile-${process.platform}.png`,
+      { fullPage: false },
+    );
+  });
+});