Drive a flow, create tests and debug

You watched an agent run a browser session in the previous lesson — open, search, click around. Useful, but no test came out of it. Now we'll extend that flow with an add-to-cart step and turn the transcript into a runnable spec.

As you've seen, every playwright-cli action emits the equivalent Playwright TypeScript. If you drive a flow once, all the information to generate a test is available.

However, there's one caveat: the CLI emits actions only — assertions are your (or your agent's) job.

A complete cycle, prompted

Open the agent of your choice in your workshop project and prompt:

The agent reads the skill, drives the flow with playwright-cli, and collects every emitted await page.… line into a spec. Yours will look different — but it'll have roughly this shape:

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

test("adds a snowboard to the cart from search", async ({ page }) => {
  await page.goto("https://www.playwright-workshop.online/");

  await page
    .getByRole("searchbox", { name: "Search products" })
    .fill("snowboard");
  await page.keyboard.press("Enter");

  await page.getByRole("link", { name: "All Mountain Snowboard" }).click();
  await page.getByRole("button", { name: "Add item to cart" }).click();

  await expect(page.getByLabel("Open cart")).toContainText("1");
});

Run it (or let you agent run it):

$ npx playwright test tests/snowboard.spec.ts

When to reach for AI generation — and when not

Your agent hands you a spec draft. Whether to take it depends on what you're testing — and on whether the run was worth the spend.

The bar is the same as code review: would you ship it as-is? If yes, ship. If no, you have a starting point — keep editing until you would.

When generation goes sideways

Real pages bite. Locators match three things, an overlay eats a click, the assertion fires a beat before the cart updates. When the generated test runs red — or the agent stalls mid-flow — the lightweight move is to hand the problem back with the same toolbox that built it.

That prompt alone gets you surprisingly far. The agent re-attaches a browser and works the page directly:

• playwright-cli snapshot — what's actually rendered, with the same refs the spec would use.
• playwright-cli console — app-side errors the test never surfaced.
• playwright-cli requests — did a request fail, return the wrong shape, or land too late?
• playwright-cli show --annotate — when the agent can't find something on its own, it can ask you to point at it.

Replaying the failing step emits the corrected await page.… line — that's what gets pasted back into the spec. No new vocabulary, no special mode. Agents are pretty good at figuring this stuff out these days — hand them the tools and the outcome, they iterate.