mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
0705de8f1b
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.
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
/**
|
|
* 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,
|
|
});
|
|
});
|
|
});
|