test: add e2e test, add manual test checklist

2026-09-08 11:03:05 +05:00
parent 9a7b7c178b
commit 3f21f1c024
18 changed files with 937 additions and 11 deletions
@@ -0,0 +1,102 @@
+import { expect, test } from "playwright/test";
+import {
+	opaquePng,
+	transparentPng,
+	tinyBase64,
+	svgMarkup,
+	pixelRow,
+} from "./helpers/fixtures";
+import {
+	trackErrors,
+	openTool,
+	uploadImage,
+	expectNoErrorAlert,
+	expectNoErrors,
+} from "./helpers/page";
+
+for (const [id, input] of [
+	["base64-to-png", tinyBase64],
+	["hex-to-png", "ff0000ff"],
+	["bytes-to-png", pixelRow(32, [255, 0, 0, 255])],
+	[
+		"rgb-values-to-png",
+		Array.from({ length: 32 }, () => "rgba(255,0,0,255)").join(" "),
+	],
+	["svg-to-png", svgMarkup],
+] as const) {
+	test(`text input → ${id} produces result image`, async ({ page }) => {
+		const sink = trackErrors(page);
+		await expect(async () => {
+			await openTool(page, id);
+			await page.locator(".text-source textarea").fill(input);
+			await page.getByRole("button", { name: "Render text" }).click();
+			await expect(page.locator('img[alt="result"]')).toBeVisible();
+		}).toPass({ timeout: 25_000 });
+		await expectNoErrorAlert(page);
+		expectNoErrors(sink);
+	});
+}
+
+test("png-to-base64 shows decoded text result", async ({ page }) => {
+	const sink = trackErrors(page);
+	await openTool(page, "png-to-base64");
+	await uploadImage(page, opaquePng);
+	const code = page.locator(".result-pre code");
+	await expect(code).toBeVisible();
+	const text = (await code.textContent()) ?? "";
+	expect(text.length).toBeGreaterThan(20);
+	await expectNoErrorAlert(page);
+	expectNoErrors(sink);
+});
+
+for (const [input, expected] of [
+	[tinyBase64, "Yes — valid PNG signature."],
+	["aGVsbG8=", "No — the content is not a PNG."],
+] as const) {
+	test(`verify-is-png verdict: ${expected}`, async ({ page }) => {
+		await expect(async () => {
+			await openTool(page, "verify-is-png");
+			await page.locator(".text-source textarea").fill(input);
+			await page.getByRole("button", { name: "Render text" }).click();
+			await expect(page.locator(".verdict-text")).toContainText(expected);
+		}).toPass({ timeout: 25_000 });
+	});
+}
+
+test("png-is-transparent: opaque image → 'No'", async ({ page }) => {
+	await openTool(page, "png-is-transparent");
+	await uploadImage(page, opaquePng);
+	await expect(page.locator(".verdict-text")).toContainText(
+		"No — fully opaque.",
+	);
+});
+
+test("png-is-transparent: transparent image → 'Yes'", async ({ page }) => {
+	await openTool(page, "png-is-transparent");
+	await uploadImage(page, transparentPng);
+	await expect(page.locator(".verdict-text")).toContainText(
+		"Yes — has transparency.",
+	);
+});
+
+test("png-is-grayscale: colored image → 'No'", async ({ page }) => {
+	await openTool(page, "png-is-grayscale");
+	await uploadImage(page, opaquePng);
+	await expect(page.locator(".verdict-text")).toContainText(
+		"No — contains colors.",
+	);
+});
+
+test("png-orientation: landscape image → Landscape", async ({ page }) => {
+	await openTool(page, "png-orientation");
+	await uploadImage(page, opaquePng); // 64×48 → landscape
+	await expect(page.locator(".verdict-text")).toContainText("Landscape");
+});
+
+test("png-file-size: returns a size in KB", async ({ page }) => {
+	await openTool(page, "png-file-size");
+	await uploadImage(page, opaquePng);
+	const verdict = page.locator(".verdict-text");
+	await expect(verdict).toBeVisible();
+	await expect(verdict).toContainText("KB");
+});