Getting started + codegen

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

But first things first. I often see people confused about what Playwright actually is. And indeed, things got a bit blurry over the last few months. If you look at the official docs, you'll see this statement:

Playwright enables reliable web automation for testing, scripting and AI agents.

There's the Playwright library, Playwright Test, Playwright MCP and the Playwright CLI. They all have their own use cases.

If we ignore the AI tech for a moment, many people confuse the Playwright library and Playwright Test. The library and Playwright Test are two different things.

"Vanilla Playwright" is the automation library; Playwright Test is the test framework built on top of it. Throughout this workshop, "Playwright" and "PWT" always refer to the test framework.

The same flow looks very different depending on which one you use:

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();

Today is all about Playwright Test for end-to-end testing and the new AI agent automation tools.

Let's get used to some common Playwright Test commands and CLI flags.

Watch the example tests run

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

$ npx playwright test --headed

Three browsers click around on your screen and disappear. Now let's get to work and record some new tests.

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 turns them into Playwright code.

$ npx playwright codegen https://www.playwright-workshop.online/

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 Inspector window record your actions:

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

test("test", async ({ page }) => {
  await page.goto("https://www.playwright-workshop.online/");
  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, paste it into a new file (tests/shop.spec.ts), and run it.

$ npx playwright test tests/shop.spec.ts

Play around with codegen. If you run into errors, don't worry. We'll look at debugging Playwright tests in the following lessons.

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