test: update fixtures flow, add different browsers

web/e2e/png-fixtures.spec.ts

@@ -39,31 +39,34 @@ async function expectAccepted(page: Page, file: SourceFile): Promise<void> {
 	expectNoErrors(sink);
 }
 
-const rejectedFixtures = [
-	crcBadIdatPng,
-	truncatedHeaderPng,
-	truncatedNoIendPng,
-	idatCutPng,
-];
+type DecodeContract = {
+	file: SourceFile;
+	rejectedIn: readonly string[];
+};
 
-const acceptedFixtures = [
-	crcBadAncillaryPng,
-	garbageTailPng,
-	palette4Png,
-	palette256Png,
-	sixteenBitPng,
+const decodeContracts: readonly DecodeContract[] = [
+	{ file: crcBadIdatPng, rejectedIn: ["chromium", "firefox"] },
+	{ file: truncatedHeaderPng, rejectedIn: ["chromium", "firefox", "webkit"] },
+	{ file: truncatedNoIendPng, rejectedIn: ["chromium"] },
+	{ file: idatCutPng, rejectedIn: ["chromium"] },
+	{ file: crcBadAncillaryPng, rejectedIn: [] },
+	{ file: garbageTailPng, rejectedIn: [] },
+	{ file: palette4Png, rejectedIn: [] },
+	{ file: palette256Png, rejectedIn: [] },
+	{ file: sixteenBitPng, rejectedIn: [] },
 ];
 
 test.describe("PNG special fixtures", () => {
-	for (const file of rejectedFixtures) {
-		test(`${file.name}: shows an error without a result`, async ({ page }) => {
-			await expectRejected(page, file);
-		});
-	}
-
-	for (const file of acceptedFixtures) {
-		test(`${file.name}: decodes without an error`, async ({ page }) => {
-			await expectAccepted(page, file);
+	for (const { file, rejectedIn } of decodeContracts) {
+		test(`${file.name}: matches the engine decode contract`, async ({
+			browserName,
+			page,
+		}) => {
+			if (rejectedIn.includes(browserName)) {
+				await expectRejected(page, file);
+			} else {
+				await expectAccepted(page, file);
+			}
 		});
 	}
 });

web/e2e/text-and-verdicts.spec.ts

@@ -68,9 +68,7 @@ test("verify-is-png renders different verdicts for valid and invalid input", asy
 	const validText = await verdict.textContent();
 
 	await renderText(page, "aGVsbG8=");
-	await expect(verdict).toBeVisible();
-	const invalidText = await verdict.textContent();
-	expect(invalidText).not.toBe(validText);
+	await expect(verdict).not.toHaveText(validText ?? "");
 });
 
 test("png-is-transparent: opaque image renders a verdict", async ({ page }) => {

web/playwright.config.ts

@@ -1,11 +1,25 @@
 import { defineConfig } from "playwright/test";
 
+const browserContractTests = [
+	"**/pipeline.spec.ts",
+	"**/png-fixtures.spec.ts",
+	"**/text-and-verdicts.spec.ts",
+];
+
+const mobileTests = [
+	"**/navigation.spec.ts",
+	"**/catalog.spec.ts",
+	"**/generators.spec.ts",
+	"**/pipeline.spec.ts",
+];
+
 export default defineConfig({
 	testDir: "./e2e",
 	outputDir: "./e2e-results",
 	fullyParallel: true,
 	timeout: 60_000,
 	retries: 0,
+	workers: process.env.CI ? 2 : 1,
 	reporter: [["list"], ["html", { open: "never" }]],
 	use: {
 		baseURL: "http://127.0.0.1:4173",
@@ -19,6 +33,31 @@ export default defineConfig({
 				viewport: { width: 1440, height: 900 },
 			},
 		},
+		{
+			name: "firefox",
+			testMatch: browserContractTests,
+			use: {
+				browserName: "firefox",
+				viewport: { width: 1440, height: 900 },
+			},
+		},
+		{
+			name: "webkit",
+			testMatch: browserContractTests,
+			use: {
+				browserName: "webkit",
+				viewport: { width: 1440, height: 900 },
+			},
+		},
+		{
+			name: "mobile-chromium",
+			testMatch: mobileTests,
+			use: {
+				browserName: "chromium",
+				viewport: { width: 390, height: 844 },
+				hasTouch: true,
+			},
+		},
 	],
 	webServer: {
 		command: "pnpm build && node scripts/serve-static.mjs --port 4173",