103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import AxeBuilder from "@axe-core/playwright";
|
|
import { expect, test } from "@playwright/test";
|
|
|
|
test.describe("dashboard page QA gate", () => {
|
|
test("renders the model-driven dashboard on desktop", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
test.skip(testInfo.project.name !== "chromium-desktop");
|
|
|
|
await page.goto("/");
|
|
|
|
await expect(page.getByRole("main")).toHaveAttribute(
|
|
"aria-labelledby",
|
|
/title/,
|
|
);
|
|
await expect(
|
|
page.getByRole("heading", { level: 1, name: "System Overview" }),
|
|
).toBeVisible();
|
|
await expect(page.getByText("Infra RAM")).toBeVisible();
|
|
await expect(page.getByRole("link", { name: /Vaultwarden/i })).toBeVisible();
|
|
await expect(page.locator("[data-model-id='vaultwarden']")).toBeVisible();
|
|
|
|
const bodyBox = await page.locator("body").boundingBox();
|
|
expect(bodyBox?.width).toBeGreaterThan(1000);
|
|
|
|
const screenshot = await page.screenshot({ fullPage: true });
|
|
expect(screenshot.byteLength).toBeGreaterThan(20_000);
|
|
});
|
|
|
|
test("keeps the first screen usable on mobile", async ({ page }, testInfo) => {
|
|
test.skip(testInfo.project.name !== "chromium-mobile");
|
|
|
|
await page.goto("/");
|
|
|
|
await expect(
|
|
page.getByRole("heading", { level: 1, name: "System Overview" }),
|
|
).toBeVisible();
|
|
await expect(page.getByLabel("Service groups")).toBeVisible();
|
|
|
|
const screenshot = await page.screenshot({ fullPage: true });
|
|
expect(screenshot.byteLength).toBeGreaterThan(12_000);
|
|
});
|
|
|
|
test("exposes usable landmarks and a visible keyboard focus state", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/");
|
|
|
|
await expect(page.getByRole("main")).toHaveCount(1);
|
|
await page.keyboard.press("Tab");
|
|
|
|
const focused = page.locator(":focus");
|
|
await expect(focused).toHaveAttribute("href", /vault\.dimensionlab\.net/);
|
|
|
|
const focusBoxShadow = await focused.evaluate((element) => {
|
|
return window.getComputedStyle(element).boxShadow;
|
|
});
|
|
expect(focusBoxShadow).not.toBe("none");
|
|
});
|
|
|
|
test("passes automated accessibility checks", async ({ page }) => {
|
|
await page.goto("/");
|
|
|
|
const results = await new AxeBuilder({ page }).analyze();
|
|
expect(results.violations).toEqual([]);
|
|
});
|
|
|
|
test("honors reduced-motion preferences", async ({ browser }) => {
|
|
const context = await browser.newContext({ reducedMotion: "reduce" });
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
await page.goto("/");
|
|
const durations = await page.evaluate(() => {
|
|
const element = document.createElement("div");
|
|
element.style.animation = "qa-motion-check 10s infinite";
|
|
element.style.transition = "opacity 10s linear";
|
|
document.body.append(element);
|
|
|
|
const styles = window.getComputedStyle(element);
|
|
return {
|
|
animation: styles.animationDuration,
|
|
transition: styles.transitionDuration,
|
|
};
|
|
});
|
|
|
|
expect(cssDurationToMilliseconds(durations.animation)).toBeLessThanOrEqual(
|
|
0.01,
|
|
);
|
|
expect(cssDurationToMilliseconds(durations.transition)).toBeLessThanOrEqual(
|
|
0.01,
|
|
);
|
|
} finally {
|
|
await context.close();
|
|
}
|
|
});
|
|
});
|
|
|
|
function cssDurationToMilliseconds(duration: string): number {
|
|
if (duration.endsWith("ms")) return Number.parseFloat(duration);
|
|
if (duration.endsWith("s")) return Number.parseFloat(duration) * 1000;
|
|
return Number.NaN;
|
|
}
|