What does a first Playwright test look like?

A Playwright test is a function that receives fixtures. The most important fixture is page, a fresh tab in an isolated context. The test should read like a short user story: go somewhere, do something, and verify a result the user can see.

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

test("searches for a product", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("searchbox", { name: "Search" }).fill("lamp");
  await page.getByRole("button", { name: "Search" }).click();

  await expect(page.getByRole("heading", { name: "Results for lamp" })).toBeVisible();
  await expect(page.getByRole("listitem")).toHaveCount(3);
});

The anatomy

• test declares a case with a title and an async callback
• expect provides both generic and web-first assertions
• page is created and torn down by the runner for every test
• Locators describe elements lazily and re-resolve them on each action
• The test file is discovered by the configured test directory pattern

Run the file with npx playwright test tests/search.spec.ts, or add --headed to watch it. Failures produce a report with the failing step, and enabling a trace gives a step-by-step DOM and network timeline.