1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";
const pages = [
["repository-list", "/"],
["home", "/alpha/home"],
["timeline", "/alpha/timeline"],
["tree", "/alpha/tree?ci=tip"],
["org-document", "/alpha/doc/tip/docs/org-support.org"],
["org-wiki", "/alpha/wiki?name=Org%20Wiki"],
["login", "/alpha/login"],
];
for (const colorScheme of ["light", "dark"]) {
for (const [name, path] of pages) {
test(`${name} is legible in ${colorScheme} mode`, async ({ page }) => {
await page.emulateMedia({ colorScheme });
await page.goto(path);
await expect(page.locator("body")).toContainText("Copland");
const viewportOverflow = await page.evaluate(
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
);
expect(viewportOverflow).toBe(false);
let accessibilityScan = new AxeBuilder({ page })
.withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
.disableRules(["html-has-lang"])
.exclude(".submenu");
if (name === "login") {
accessibilityScan = accessibilityScan.exclude("form");
}
const accessibility = await accessibilityScan.analyze();
expect(accessibility.violations).toEqual([]);
const screenshotMasks = [page.locator(".site-footer span:last-child")];
if (name === "login") {
screenshotMasks.push(page.locator("form"));
}
await expect(page).toHaveScreenshot(`${name}-${colorScheme}.png`, {
fullPage: true,
animations: "disabled",
mask: screenshotMasks,
maxDiffPixelRatio: 0.001,
});
});
}
}
test.describe("mobile", () => {
test.use({ viewport: { width: 320, height: 720 } });
test("navigation remains usable", async ({ page }) => {
await page.goto("/alpha/timeline");
await expect(page.locator(".site-brand")).toHaveText("Copland");
await expect(page.locator(".mainmenu")).toBeVisible();
const viewportOverflow = await page.evaluate(
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
);
expect(viewportOverflow).toBe(false);
await expect(page).toHaveScreenshot("timeline-mobile.png", {
fullPage: true,
mask: [page.locator(".site-footer span:last-child")],
});
});
test("Org documentation remains readable", async ({ page }) => {
await page.goto("/alpha/doc/tip/docs/org-support.org");
await expect(page.locator(".org-document")).toBeVisible();
await expect(page.locator(".org-toc")).toBeVisible();
const viewportOverflow = await page.evaluate(
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
);
expect(viewportOverflow).toBe(false);
await expect(page).toHaveScreenshot("org-document-mobile.png", {
fullPage: true,
mask: [page.locator(".site-footer span:last-child")],
});
});
test("Org wiki remains readable", async ({ page }) => {
await page.goto("/alpha/wiki?name=Org%20Wiki");
await expect(page.locator(".org-document")).toBeVisible();
await expect(page.locator(".org-toc")).toBeVisible();
const viewportOverflow = await page.evaluate(
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
);
expect(viewportOverflow).toBe(false);
await expect(page).toHaveScreenshot("org-wiki-mobile.png", {
fullPage: true,
mask: [page.locator(".site-footer span:last-child")],
});
});
});
|
