test: less fragile - use semantic locators\helpers

web/e2e/helpers/page.ts

@@ -1,6 +1,13 @@
-import { expect, type Page } from "playwright/test";
+import { expect, type Locator, type Page } from "playwright/test";
 import type { SourceFile } from "./fixtures";
 
+export const TEST_IDS = {
+	source: "source-image",
+	result: "result-image",
+	verdict: "result-verdict",
+	empty: "empty-state",
+} as const;
+
 export type ErrorSink = { errors: string[] };
 
 export function trackErrors(page: Page): ErrorSink {
@@ -12,39 +19,72 @@ export function trackErrors(page: Page): ErrorSink {
 	return { errors };
 }
 
+export async function useEnglish(page: Page): Promise<void> {
+	await page.addInitScript(() => {
+		window.localStorage.setItem("locale", "en");
+	});
+}
+
 export async function openTool(page: Page, id: string): Promise<void> {
+	await useEnglish(page);
 	await page.goto(`/tools/${id}`);
-	await expect(page.locator(".schema-tool h1")).toBeVisible();
+	await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+}
+
+export function toolLink(page: Page, id: string): Locator {
+	return page.locator(`a[href="/tools/${id}"]`);
+}
+
+export function resultImage(page: Page): Locator {
+	return page.getByTestId(TEST_IDS.result);
+}
+
+export function sourceImage(page: Page): Locator {
+	return page.getByTestId(TEST_IDS.source);
+}
+
+export function verdictStatus(page: Page): Locator {
+	return page.getByTestId(TEST_IDS.verdict);
+}
+
+export function textResult(page: Page): Locator {
+	return page.getByLabel("Text result");
+}
+
+export function errorAlert(page: Page): Locator {
+	return page.getByRole("alert");
+}
+
+export function emptyState(page: Page): Locator {
+	return page.getByTestId(TEST_IDS.empty);
+}
+
+export function rangeInput(page: Page, name: RegExp | string): Locator {
+	return page.getByRole("slider", { name });
 }
 
 export async function uploadImage(page: Page, file: SourceFile): Promise<void> {
-	await page.locator('.actions input[type="file"]').setInputFiles({
+	const input = page.locator('input[type="file"]');
+	await expect(input).toHaveCount(1);
+	await input.setInputFiles({
 		name: file.name,
 		mimeType: file.mimeType,
 		buffer: file.buffer,
 	});
 }
 
-export async function metaValue(page: Page, caption: string): Promise<string> {
-	const row = page.locator(".meta-row", { hasText: caption });
-	await expect(row).toBeVisible();
-	const value = await row.locator(".meta-value").textContent();
-	return value?.trim() ?? "";
-}
-
-export async function suggestedDownloadName(
-	page: Page,
-	selector: string,
-): Promise<string> {
+export async function downloadResult(page: Page): Promise<string> {
+	const button = page.getByRole("button", { name: "Download result" });
+	await expect(button).toBeVisible();
 	const [download] = await Promise.all([
 		page.waitForEvent("download"),
-		page.locator(selector).click(),
+		button.click(),
 	]);
 	return download.suggestedFilename();
 }
 
 export async function expectNoErrorAlert(page: Page): Promise<void> {
-	await expect(page.locator('[role="alert"]')).toHaveCount(0);
+	await expect(errorAlert(page)).toHaveCount(0);
 }
 
 export async function expectNoErrors(sink: ErrorSink): Promise<void> {