test-uilisted

# Playwright E2E Testing Standards Write and maintain browser E2E tests following Playwright best practices. These rules are project-agnostic; project-specific conventions (fixtures, test IDs, config) live in the project's own skill — for the QSF suite, follow the `test-ui-qsf` skill alongside this one. ## Locators (Priority Order) Use user-facing locators. ```typescript // BEST: Semantic locators page.getByRole("button", { name: "Submit" }); page.getByRole("tab", { name: "Dashboard" }); page.getByLabel("Email"); page.getByPlaceholder("Search..."); page.getByText("Welcome"); page.getByTitle("Document title"); // GOOD: Test IDs (attribute set by testIdAttribute in playwright.config.ts) page.getByTestId("delete-row-btn"); // ACCEPTABLE: CSS locators for structural queries page.locator('input[type="file"][multiple]'); // AVOID: Fragile CSS selectors page.locator("#submit-btn"); page.locator("div > button.primary"); ``` ## Auto-Waiting Never use `waitForTimeout()`. Playwright auto-waits for elements. ```typescript // WRONG: Manual timeouts await page.waitForTimeout(1000); await button.click(); // CORRECT: Auto-waiting assertions await expect(button).toBeVisible(); await button.click(); // CORRECT: Poll for async state await expect .poll(async () => page.evaluate(() => localStorage.getItem("theme"))) .toBe("dark"); // CORRECT: Wait for specific conditions await page.waitForLoadState("networkidle"); await page.waitForURL(/\/dashboard/); // ACCEPTABLE: toPass() for