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
+40 -54
View File
@@ -7,33 +7,26 @@ import {
opaquePng,
} from "./helpers/fixtures";
import {
downloadResult,
emptyState,
errorAlert,
expectNoErrorAlert,
expectNoErrors,
metaValue,
openTool,
suggestedDownloadName,
rangeInput,
resultImage,
sourceImage,
trackErrors,
uploadImage,
useEnglish,
} from "./helpers/page";
test("flip-png: full flow - upload, result, meta, download", async ({
page,
}) => {
test("flip-png: full flow - upload, result, download", async ({ page }) => {
const sink = trackErrors(page);
await openTool(page, "flip-png");
await uploadImage(page, landscapePng);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
await expect(page.locator('img[alt="Result image"]')).toHaveAttribute(
"src",
/^(blob:|data:image\/png;base64,)/,
);
const resultMeta = await metaValue(page, "RESULT");
expect(resultMeta).toBe("64 × 16 px");
const downloadName = await suggestedDownloadName(
page,
'button[aria-label="Download result"]',
);
expect(downloadName).toBe("flip-png.png");
await expect(resultImage(page)).toBeVisible();
expect(await downloadResult(page)).toBe("flip-png.png");
await expectNoErrorAlert(page);
expectNoErrors(sink);
});
@@ -42,12 +35,8 @@ test("convert-png-to-jpg: produces a downloadable jpg", async ({ page }) => {
const sink = trackErrors(page);
await openTool(page, "convert-png-to-jpg");
await uploadImage(page, opaquePng);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
const downloadName = await suggestedDownloadName(
page,
'button[aria-label="Download result"]',
);
expect(downloadName).toBe("convert-png-to-jpg.jpg");
await expect(resultImage(page)).toBeVisible();
expect(await downloadResult(page)).toBe("convert-png-to-jpg.jpg");
await expectNoErrorAlert(page);
expectNoErrors(sink);
});
@@ -55,53 +44,50 @@ test("convert-png-to-jpg: produces a downloadable jpg", async ({ page }) => {
test.fixme("reset clears result but keeps source", async ({ page }) => {
await openTool(page, "flip-png");
await uploadImage(page, opaquePng);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
await expect(resultImage(page)).toBeVisible();
await page.getByRole("button", { name: "Reset" }).click();
await expect(page.locator('img[alt="Result image"]')).toHaveCount(0);
await expect(page.locator(".empty")).toContainText("no result yet");
await expect(page.locator('img[alt="source"]')).toBeVisible();
await expect(resultImage(page)).toHaveCount(0);
await expect(emptyState(page)).toBeVisible();
await expect(sourceImage(page)).toBeVisible();
});
test("blur: changing slider updates result image", async ({ page }) => {
await openTool(page, "blur-png");
await uploadImage(page, opaquePng);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
const src1 = await page
.locator('img[alt="Result image"]')
.getAttribute("src");
await expect(async () => {
await page.locator('input[type="range"]').fill("20");
await expect(page.locator('img[alt="Result image"]')).not.toHaveAttribute(
"src",
src1 ?? "",
);
}).toPass();
await expect(resultImage(page)).toBeVisible();
const firstSource = await resultImage(page).getAttribute("src");
await rangeInput(page, /radius/i).fill("20");
await expect(resultImage(page)).not.toHaveAttribute("src", firstSource ?? "");
});
test("runs without Web Worker (fallback)", async ({ browser }) => {
const context = await browser.newContext();
await context.addInitScript(() => {
Object.defineProperty(window, "Worker", {
value: undefined,
configurable: true,
try {
await context.addInitScript(() => {
Object.defineProperty(window, "Worker", {
value: undefined,
configurable: true,
});
});
});
const page = await context.newPage();
const sink = trackErrors(page);
await openTool(page, "flip-png");
await uploadImage(page, landscapePng);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
await expectNoErrorAlert(page);
expectNoErrors(sink);
await context.close();
const page = await context.newPage();
await useEnglish(page);
const sink = trackErrors(page);
await openTool(page, "flip-png");
await uploadImage(page, landscapePng);
await expect(resultImage(page)).toBeVisible();
await expectNoErrorAlert(page);
expectNoErrors(sink);
} finally {
await context.close();
}
});
test("invalid file upload shows error, no crash", async ({ page }) => {
const sink = trackErrors(page);
await openTool(page, "flip-png");
await uploadImage(page, corruptPng);
await expect(page.locator('[role="alert"]')).toBeVisible();
await expect(page.locator('img[alt="Result image"]')).toHaveCount(0);
await expect(errorAlert(page)).toBeVisible();
await expect(resultImage(page)).toHaveCount(0);
expectNoErrors(sink);
});
@@ -110,7 +96,7 @@ for (const fixture of [onePixelPng, largePng]) {
const sink = trackErrors(page);
await openTool(page, "flip-png");
await uploadImage(page, fixture);
await expect(page.locator('img[alt="Result image"]')).toBeVisible();
await expect(resultImage(page)).toBeVisible();
expectNoErrors(sink);
});
}