E2E-тесты на Playwright

npm init -y
npm install -D @playwright/test
npx playwright install
npx playwright --version

// Demo app for e2e tests, not production code: sessions and leads live in memory.
import { randomUUID } from "node:crypto";
import { readFile } from "node:fs/promises";
import { createServer } from "node:http";

const PORT = Number(process.env.PORT ?? 4173);
const DEMO_USER = { email: "manager@example.com", password: process.env.DEMO_PASSWORD ?? "demo-password" };
const leads = new Map();
const sessions = new Map();

const send = (res, status, body, headers = {}) => {
  res.writeHead(status, headers);
  res.end(body);
};
const readBody = async (req) => {
  let data = "";
  for await (const chunk of req) data += chunk;
  return data;
};
const escapeHtml = (s) =>
  s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
const sessionOf = (req) => sessions.get(/(?:^|; )sid=([^;]+)/.exec(req.headers.cookie ?? "")?.[1]);

createServer(async (req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`);

  if (req.method === "GET" && ["/", "/login", "/app.js"].includes(url.pathname)) {
    const file = { "/": "index.html", "/login": "login.html", "/app.js": "app.js" }[url.pathname];
    const type = file.endsWith(".js") ? "text/javascript" : "text/html; charset=utf-8";
    return send(res, 200, await readFile(new URL(`./public/${file}`, import.meta.url)), { "content-type": type });
  }

  if (req.method === "POST" && url.pathname === "/api/leads") {
    const { name = "", phone = "" } = JSON.parse((await readBody(req)) || "{}");
    if (!/^\+7\d{10}$/.test(phone)) return send(res, 400, JSON.stringify({ error: "invalid_phone" }));
    const lead = { id: randomUUID(), name: String(name).slice(0, 100), phone };
    leads.set(lead.id, lead);
    await new Promise((r) => setTimeout(r, 500)); // simulate a slow backend
    return send(res, 201, JSON.stringify(lead), { "content-type": "application/json" });
  }

  if (req.method === "DELETE" && url.pathname.startsWith("/api/leads/")) {
    leads.delete(url.pathname.slice("/api/leads/".length));
    return send(res, 204);
  }

  if (req.method === "POST" && url.pathname === "/login") {
    const form = new URLSearchParams(await readBody(req));
    if (form.get("email") !== DEMO_USER.email || form.get("password") !== DEMO_USER.password) {
      return send(res, 303, "", { location: "/login?error=1" });
    }
    const sid = randomUUID();
    sessions.set(sid, DEMO_USER.email);
    return send(res, 303, "", { location: "/account", "set-cookie": `sid=${sid}; HttpOnly; SameSite=Lax; Path=/` });
  }

  if (req.method === "GET" && url.pathname === "/account") {
    const email = sessionOf(req);
    if (!email) return send(res, 303, "", { location: "/login" });
    const items = [...leads.values()].map((l) => `<li>${escapeHtml(l.name)} — ${l.phone}</li>`).join("");
    return send(
      res,
      200,
      `<!doctype html><html lang="en"><title>Requests</title><main><h1>Requests</h1><p>Signed in as ${escapeHtml(email)}</p><ul aria-label="Requests">${items}</ul></main></html>`,
      { "content-type": "text/html; charset=utf-8" },
    );
  }

  send(res, 404, "Not found");
}).listen(PORT, () => console.log(`Listening on http://localhost:${PORT}`));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Request a call</title>
  </head>
  <body>
    <main>
      <h1>Request a call</h1>
      <form id="lead-form" novalidate>
        <label>Name <input name="name" autocomplete="name" /></label>
        <label>Phone <input name="phone" type="tel" placeholder="+77011234567" /></label>
        <button type="submit">Send request</button>
      </form>
      <p role="alert" id="error"></p>
      <p role="status" id="result"></p>
    </main>
    <script type="module" src="/app.js"></script>
  </body>
</html>

const form = document.querySelector("#lead-form");
const button = form.querySelector("button");
const error = document.querySelector("#error");
const result = document.querySelector("#result");

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  error.textContent = "";
  result.textContent = "";
  const data = Object.fromEntries(new FormData(form));
  if (!/^\+7\d{10}$/.test(data.phone)) {
    error.textContent = "Enter the phone as +7 and 10 digits";
    return;
  }
  button.disabled = true;
  button.textContent = "Sending…";
  try {
    const res = await fetch("/api/leads", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    form.reset();
    result.textContent = "Thanks! We will call you back.";
  } catch {
    error.textContent = "Something went wrong. Please try again.";
  } finally {
    button.disabled = false;
    button.textContent = "Send request";
  }
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sign in</title>
  </head>
  <body>
    <main>
      <h1>Sign in</h1>
      <form method="post" action="/login">
        <label>Email <input name="email" type="email" autocomplete="username" /></label>
        <label>Password <input name="password" type="password" autocomplete="current-password" /></label>
        <button type="submit">Sign in</button>
      </form>
    </main>
  </body>
</html>

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  globalTimeout: 10 * 60 * 1000,
  reporter: process.env.CI ? [["list"], ["html", { open: "never" }]] : "list",
  use: {
    baseURL: "http://localhost:4173",
    trace: "on-first-retry",
    screenshot: "only-on-failure",
  },
  projects: [
    { name: "setup", testMatch: /.*\.setup\.ts/ },
    { name: "chromium", use: { ...devices["Desktop Chrome"] }, dependencies: ["setup"] },
    { name: "firefox", use: { ...devices["Desktop Firefox"] }, dependencies: ["setup"] },
    { name: "webkit", use: { ...devices["Desktop Safari"] }, dependencies: ["setup"] },
    {
      name: "edge",
      use: { ...devices["Desktop Edge"], channel: "msedge" },
      dependencies: ["setup"],
      default: false,
    },
  ],
  webServer: {
    command: "node server.mjs",
    url: "http://localhost:4173",
    reuseExistingServer: !process.env.CI,
  },
});

import { expect, test } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("/");
});

test("sends a request and shows a confirmation", async ({ page }) => {
  await page.getByLabel("Name").fill("Aigerim");
  await page.getByLabel("Phone").fill("+77011234567");
  await page.getByRole("button", { name: "Send request" }).click();

  // While the server responds (~0.5 s), the button is disabled and renamed.
  await expect(page.getByRole("button", { name: "Sending…" })).toBeDisabled();
  await expect(page.getByRole("status")).toHaveText("Thanks! We will call you back.");
  await expect(page.getByLabel("Phone")).toBeEmpty();
});

test("rejects an invalid phone without calling the API", async ({ page }) => {
  const apiCalls: string[] = [];
  page.on("request", (request) => {
    if (request.url().endsWith("/api/leads")) apiCalls.push(request.url());
  });

  await page.getByLabel("Phone").fill("8701");
  await page.getByRole("button", { name: "Send request" }).click();

  await expect(page.getByRole("alert")).toHaveText("Enter the phone as +7 and 10 digits");
  expect(apiCalls).toHaveLength(0);
});

test("shows an error when the server fails", async ({ page }) => {
  await page.route("**/api/leads", (route) => route.fulfill({ status: 500, body: "{}" }));

  await page.getByLabel("Phone").fill("+77011234567");
  await page.getByRole("button", { name: "Send request" }).click();

  await expect(page.getByRole("alert")).toHaveText("Something went wrong. Please try again.");
  await expect(page.getByRole("button", { name: "Send request" })).toBeEnabled();
});

import { expect, test } from "@playwright/test";

// Deliberately wrong: reads the text right after the click, without waiting.
test("reads the status without waiting", async ({ page }) => {
  await page.goto("/");
  await page.getByLabel("Phone").fill("+77011234567");
  await page.getByRole("button", { name: "Send request" }).click();

  expect(await page.getByRole("status").textContent()).toBe("Thanks! We will call you back.");
});

$ npx playwright test tests/no-wait.spec.ts --project=chromium --trace retain-on-failure

Running 2 tests using 1 worker

  ok 1 [setup] › tests\auth.setup.ts:5:6 › sign in as manager (257ms)
  x  2 [chromium] › tests\no-wait.spec.ts:4:5 › reads the status without waiting (230ms)


  1) [chromium] › tests\no-wait.spec.ts:4:5 › reads the status without waiting ─────────────────────

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: "Thanks! We will call you back."
    Received: ""

       7 |   await page.getByRole("button", { name: "Send request" }).click();
       8 |
    >  9 |   expect(await page.getByRole("status").textContent()).toBe("Thanks! We will call you back.");
         |                                                        ^
      10 | });
      11 |
        at …\tests\no-wait.spec.ts:9:56

    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
    test-results\no-wait-reads-the-status-without-waiting-chromium\test-failed-1.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

    Error Context: test-results\no-wait-reads-the-status-without-waiting-chromium\error-context.md

    attachment #3: trace (application/zip) ─────────────────────────────────────────────────────────
    test-results\no-wait-reads-the-status-without-waiting-chromium\trace.zip
    Usage:

        npx playwright show-trace test-results\no-wait-reads-the-status-without-waiting-chromium\trace.zip

    ────────────────────────────────────────────────────────────────────────────────────────────────

  1 failed
    [chromium] › tests\no-wait.spec.ts:4:5 › reads the status without waiting ──────────────────────
  1 passed (4.1s)

-  expect(await page.getByRole("status").textContent()).toBe("Thanks! We will call you back.");
+  await expect(page.getByRole("status")).toHaveText("Thanks! We will call you back.");

import { randomUUID } from "node:crypto";
import { test as base, expect } from "@playwright/test";

type Lead = { id: string; name: string; phone: string };

export const test = base.extend<{ lead: Lead }>({
  lead: async ({ request }, use) => {
    // Setup: create the lead through the API, not by clicking through the form.
    const response = await request.post("/api/leads", {
      data: { name: `Test lead ${randomUUID().slice(0, 8)}`, phone: "+77010000001" },
    });
    await expect(response).toBeOK();
    const lead = (await response.json()) as Lead;

    await use(lead);

    // Teardown runs even if the test failed.
    await request.delete(`/api/leads/${lead.id}`);
  },
});

export { expect };

import { expect, test as setup } from "@playwright/test";

const authFile = "playwright/.auth/manager.json";

setup("sign in as manager", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("manager@example.com");
  await page.getByLabel("Password").fill(process.env.DEMO_PASSWORD ?? "demo-password");
  await page.getByRole("button", { name: "Sign in" }).click();

  // Wait for the final page: by then the session cookie is set.
  await expect(page.getByRole("heading", { name: "Requests" })).toBeVisible();
  await page.context().storageState({ path: authFile });
});

import { expect, test } from "./fixtures";

test.use({ storageState: "playwright/.auth/manager.json" });

test("manager sees a new request in the account", async ({ page, lead }) => {
  await page.goto("/account");

  await expect(page.getByText("Signed in as manager@example.com")).toBeVisible();
  await expect(page.getByRole("list", { name: "Requests" })).toContainText(lead.name);
});

test.describe("without a session", () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test("redirects to the sign-in page", async ({ page }) => {
    await page.goto("/account");
    await expect(page).toHaveURL(/\/login$/);
  });
});

{
  "cookies": [
    {
      "name": "sid",
      "value": "f2489922-86c3-4ed6-921a-8c6522adc678",
      "domain": "localhost",
      "path": "/",
      "expires": -1,
      "httpOnly": true,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": []
}

$ npx playwright test

Running 16 tests using 14 workers

  ok  1 [setup] › tests\auth.setup.ts:5:6 › sign in as manager (258ms)
  ok  3 [chromium] › tests\account.spec.ts:15:7 › without a session › redirects to the sign-in page (554ms)
  ok 11 [webkit] › tests\account.spec.ts:15:7 › without a session › redirects to the sign-in page (2.0s)
  ok  4 [chromium] › tests\lead-form.spec.ts:18:5 › rejects an invalid phone without calling the API (669ms)
  ok  6 [chromium] › tests\lead-form.spec.ts:31:5 › shows an error when the server fails (679ms)
  ok 15 [webkit] › tests\lead-form.spec.ts:18:5 › rejects an invalid phone without calling the API (2.1s)
  ok 12 [webkit] › tests\account.spec.ts:5:5 › manager sees a new request in the account (2.4s)
  ok  2 [chromium] › tests\account.spec.ts:5:5 › manager sees a new request in the account (1.3s)
  ok 14 [webkit] › tests\lead-form.spec.ts:7:5 › sends a request and shows a confirmation (2.8s)
  ok  5 [chromium] › tests\lead-form.spec.ts:7:5 › sends a request and shows a confirmation (1.5s)
  ok 16 [webkit] › tests\lead-form.spec.ts:31:5 › shows an error when the server fails (993ms)
  ok  7 [firefox] › tests\account.spec.ts:5:5 › manager sees a new request in the account (3.9s)
  ok 10 [firefox] › tests\lead-form.spec.ts:18:5 › rejects an invalid phone without calling the API (3.4s)
  ok 13 [firefox] › tests\lead-form.spec.ts:31:5 › shows an error when the server fails (3.1s)
  ok  9 [firefox] › tests\account.spec.ts:15:7 › without a session › redirects to the sign-in page (2.5s)
  ok  8 [firefox] › tests\lead-form.spec.ts:7:5 › sends a request and shows a confirmation (3.7s)

  16 passed (13.4s)

name: E2E tests

on:
  pull_request:
  push:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 24
          cache: npm
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v7
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 14

$ CI=1 npx playwright test

Running 16 tests using 1 worker

  ok  1 [setup] › tests\auth.setup.ts:5:6 › sign in as manager (276ms)
  ok  2 [chromium] › tests\account.spec.ts:5:5 › manager sees a new request in the account (779ms)
  ok  3 [chromium] › tests\account.spec.ts:15:7 › without a session › redirects to the sign-in page (152ms)
  …
  ok 16 [webkit] › tests\lead-form.spec.ts:31:5 › shows an error when the server fails (655ms)

  16 passed (19.0s)