Playwright: setup and first end-to-end tests

Playwright installs with one package, downloads the browsers and runs tests on Chromium, Firefox and WebKit from the same code.

Installation

npm i -D @playwright/test
npx playwright install --with-deps

Playwright ships under the Apache-2.0 licence; install --with-deps downloads the browsers and the system libraries that CI needs.

The configuration

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

export default defineConfig({
  testDir: "./e2e",
  use: { baseURL: "http://localhost:5173", trace: "on-first-retry" },
  webServer: {
    command: "npm run dev",
    url: "http://localhost:5173",
    reuseExistingServer: true,
  },
  projects: [{ name: "chromium", use: devices["Desktop Chrome"] }],
});

webServer starts Vite and waits for the port, so the test does not rely on a server started by hand. trace records the session on the first failure.

The first test

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

test("il login porta alla dashboard", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Password").fill("segreta");
  await page.getByRole("button", { name: "Accedi" }).click();
  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
});

The locators use the same roles as Testing Library: the test follows the page like a person and does not depend on CSS classes.

Running it

npx playwright test
npx playwright show-report

The first command runs the suite and writes the report; the second opens the HTML with the steps, the trace and screenshots of the failures.

Live records in the catalogue

Three components worth a path: login-form, credit-card-form and multistep-form. To browse by category start from 111,985 components.

The limitation

End-to-end tests cost time and infrastructure: each browser downloads hundreds of megabytes and the suite runs in minutes, not seconds. Save them for critical paths, not for every variant of a component.

Where to continue

The layer below is in Testing Library: five tests; the form flow is in progressive forms with Next.js; the framework comparison is in Vue 3 vs React.