test: less fragile - use semantic locators\helpers

This commit is contained in:
2026-09-25 17:40:58 +05:00
parent 16d4288912
commit 5313567e70
26 changed files with 436 additions and 274 deletions
+48 -41
View File
@@ -10,10 +10,18 @@ import {
expectNoErrorAlert,
expectNoErrors,
openTool,
resultImage,
trackErrors,
uploadImage,
verdictStatus,
} from "./helpers/page";
async function expectVerdict(page: Parameters<typeof verdictStatus>[0]) {
const verdict = verdictStatus(page);
await expect(verdict).toBeVisible();
await expect(verdict).toHaveText(/\S/);
}
for (const [id, input] of [
["base64-to-png", tinyBase64],
["hex-to-png", "ff0000ff"],
@@ -26,11 +34,11 @@ for (const [id, input] of [
] as const) {
test(`text input → ${id} produces result image`, async ({ page }) => {
const sink = trackErrors(page);
await openTool(page, id);
await expect(async () => {
await openTool(page, id);
await page.locator(".text-source textarea").fill(input);
await page.getByRole("textbox", { name: "Text data" }).fill(input);
await page.getByRole("button", { name: "Render text" }).click();
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
await expect(resultImage(page)).toBeVisible();
}).toPass({ timeout: 25_000 });
await expectNoErrorAlert(page);
expectNoErrors(sink);
@@ -41,62 +49,61 @@ 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);
const output = page.getByLabel("Text result");
await expect(output).toBeVisible();
await expect(output).toHaveText(/\S/);
await expectNoErrorAlert(page);
expectNoErrors(sink);
});
for (const [input, expected] of [
[tinyBase64, "Yes — this is a valid PNG signature."],
["aGVsbG8=", "No — the signature does not match a PNG file."],
] 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("verify-is-png renders different verdicts for valid and invalid input", async ({
page,
}) => {
await openTool(page, "verify-is-png");
const input = page.getByRole("textbox", { name: "Text data" });
const render = page.getByRole("button", { name: "Render text" });
const verdict = verdictStatus(page);
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 — all pixels are fully opaque.",
);
await input.fill(tinyBase64);
await render.click();
await expect(verdict).toBeVisible();
const validText = await verdict.textContent();
await input.fill("aGVsbG8=");
await render.click();
await expect(verdict).toBeVisible();
const invalidText = await verdict.textContent();
expect(invalidText).not.toBe(validText);
});
test("png-is-transparent: transparent image → 'Yes'", async ({ page }) => {
test("png-is-transparent: opaque image renders a verdict", async ({ page }) => {
await openTool(page, "png-is-transparent");
await uploadImage(page, opaquePng);
await expectVerdict(page);
});
test("png-is-transparent: transparent image renders a verdict", async ({
page,
}) => {
await openTool(page, "png-is-transparent");
await uploadImage(page, transparentPng);
await expect(page.locator(".verdict-text")).toContainText(
"Yes — there are transparent or semi-transparent pixels.",
);
await expectVerdict(page);
});
test("png-is-grayscale: colored image → 'No'", async ({ page }) => {
test("png-is-grayscale: colored image renders a verdict", async ({ page }) => {
await openTool(page, "png-is-grayscale");
await uploadImage(page, opaquePng);
await expect(page.locator(".verdict-text")).toContainText(
"No — colored pixels were found.",
);
await expectVerdict(page);
});
test("png-orientation: landscape image → Landscape", async ({ page }) => {
test("png-orientation: landscape image renders a verdict", async ({ page }) => {
await openTool(page, "png-orientation");
await uploadImage(page, opaquePng); // 64×48 → landscape
await expect(page.locator(".verdict-text")).toContainText("Landscape");
await uploadImage(page, opaquePng);
await expectVerdict(page);
});
test("png-file-size: returns a size in KB", async ({ page }) => {
test("png-file-size: renders a verdict", 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");
await expectVerdict(page);
});