Getting started + codegen

You set up Playwright in the prep lesson and you have six green example tests. Now we put Playwright to work — against the store you're already looking at — by recording our first real tests with codegen.

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

test("homepage has the right title", async ({ page }) => {
  await page.goto("https://example.com");
  await expect(page).toHaveTitle(/Example/);
});

import { chromium } from "playwright";

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com");
console.log(await page.title());
await browser.close();

Watch the example tests run

You already saw npx playwright test print six green dots in prep. Add --headed and the browsers actually pop open:

$ npx playwright test --headed

Three browsers click around your screen and disappear. Let's record new tests with codegen.

codegen — record a real test against the store

codegen opens a browser, follows you around, and writes the test for you. It listens to clicks, fills, and navigations and emits Playwright code in the right format.

$ npx playwright codegen https://next-example-store-stefan-judis.vercel.app/

Two windows pop open: a browser pointed at the store, and the Playwright Inspector showing generated code as you click.

Click around. Add a product to the cart. Watch the right-hand panel fill in:

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

test("test", async ({ page }) => {
  await page.goto("https://next-example-store-stefan-judis.vercel.app/");
  await page.getByRole("link", { name: "The Multi-managed Snowboard" }).click();
  await page.getByLabel("Add item to cart").click();
});

When you're happy, copy the test out, paste it into a new file under tests/, and run it.

$ npx playwright test tests/shop.spec.ts

Play around with codegen. Pay attention to the small toolbar — it also lets you add assertions on the fly!

npx playwright codegen $YOUR_URL --output tests/new.spec.ts

Recording from VS Code

Most of the CLI lives inside the official Playwright VS Code extension. Click Record new in the Testing sidebar and you get the same recorder without leaving the editor.

Use whichever you prefer — they generate the same code.

Hands-on — record three flows

Record each in a fresh codegen session, paste into tests/shop.spec.ts, and confirm npx playwright test shop.spec.ts is green. Don't worry about assertions yet — we'll add those in the assertions lesson.