External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

test: add axe a11y pass and device visual regression (phase 4c)

Browse Source 
Add scoped axe accessibility audit (a11y.spec.ts, device-a11y.spec.ts)
scanning home, one tool per modality, editor, and login across desktop
chromium and mobile-chromium in EN and AR locales. Uses a committed
baseline (a11y-baseline.json) to gate on NEW critical/serious violations
while documenting existing debt.

Add device-visual.spec.ts with curated screenshots (home, resize tool,
settings dialog) on mobile-chromium and tablet-chromium. Six darwin
baselines generated; linux baselines deferred to the existing
update-visual-baselines workflow.

Trivial a11y fixes applied:
- Login page: outer div -> main (fixes landmark-one-main, reduces region)
- Editor page: outer div -> main for both desktop and mobile gate
- AppLayout main: add tabIndex={-1} for skip-link focusability

Updated DEVICE_SPECS regex to route device-visual and device-a11y specs.
Added @axe-core/playwright as a devDependency.
This commit is contained in:
SnapOtter
2026-06-20 03:44:26 +08:00
parent 692c8ebf91
commit 0705de8f1b
17 changed files with 27491 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/device-visual.spec.ts
+83
View File
@@ -0,0 +1,83 @@
/**
* Device visual regression -- small, curated set.
*
* Screenshots a few key pages on mobile-chromium (Pixel 7) and
* tablet-chromium (Galaxy Tab S9). Uses toHaveScreenshot with
* platform-suffixed baselines (darwin locally, linux via CI workflow).
*
* Tagged @mobile / @tablet so device projects' grep filter picks them up.
* Matched by DEVICE_SPECS for project routing.
*/
import { expect, openSettings, test } from "./helpers";
// ---------------------------------------------------------------------------
// Mobile (Pixel 7 -- mobile-chromium)
// ---------------------------------------------------------------------------
test.describe("@mobile Device visual regression", () => {
test("home page", async ({ loggedInPage: page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-home-mobile.png", {
fullPage: false,
});
});
test("tool page -- image resize (empty state)", async ({ loggedInPage: page }) => {
await page.goto("/image/resize");
await page.waitForLoadState("networkidle");
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-resize-mobile.png", {
fullPage: false,
});
});
test("settings dialog", async ({ loggedInPage: page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
await openSettings(page);
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-settings-mobile.png", {
fullPage: false,
});
});
});
// ---------------------------------------------------------------------------
// Tablet (Galaxy Tab S9 -- tablet-chromium)
// ---------------------------------------------------------------------------
test.describe("@tablet Device visual regression", () => {
test("home page", async ({ loggedInPage: page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-home-tablet.png", {
fullPage: false,
});
});
test("tool page -- image resize (empty state)", async ({ loggedInPage: page }) => {
await page.goto("/image/resize");
await page.waitForLoadState("networkidle");
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-resize-tablet.png", {
fullPage: false,
});
});
test("settings dialog", async ({ loggedInPage: page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
await openSettings(page);
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("device-settings-tablet.png", {
fullPage: false,
});
});
});