write-tests-e2e

Writing E2E Tests

Thesis: E2E tests verify browser-visible user journeys against the full stack, so they wait for rendered UI, use stable role selectors, and run serially against shared state.

E2E tests live in frontend/tests/e2e/. They require the full stack running (backend + DB + frontend).

SPA Navigation: Wait for Page Content

SolidJS uses client-side routing (pushState). Playwright's waitForURL waits for a browser load event that never fires during SPA navigation. Always wait for page content instead.

// BAD: hangs forever on SPA navigation
await page.click('button[type="submit"]');
await page.waitForURL("**/dashboard", { timeout: 15000 });

// GOOD: waits for actual rendered content
await page.click('button[type="submit"]');
await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible({
  timeout: 15000,
});

Login Verification

The login page shows "Welcome back" as its heading. Never use /welcome/i to verify login succeeded because it matches the login page before login completes.

// BAD: matches the login page itself
await expect(page.getByText(/welcome/i)).toBeVisible();

// GOOD: "Dashboard" h1 only exists after successful login
await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible({
  timeout: 15000,
});

Selectors

When text appears in multiple elements, use role-based selectors:

// BAD: "Golid" appears in navbar, h1, and footer
await expect(page.getByText("Golid")).toBeVisible();

// GOOD: targets the specific heading
await expect(page.getByRole("heading", { name: "Golid" })).toBeVisible();

When a heading and button share text, target the button role:

// BAD: may click the h2 heading instead of the button
await page.click("text=Change Password");

// GOOD
await page.getByRole("button", { name: "Change Password" }).click();

Playwright has no getByDisplayValue. Use locator + toHaveValue:

await expect(page.locator("#email")).toHaveValue("[email protected]");