Drive a flow, create tests and debug

You watched an agent run a browser session in the previous lesson. It opened a browser, searched, and clicked around. It's wild, isn't it?

But so far no test came out of it. Let's extend this agent flow with an add-to-cart step and turn the transcript into a runnable spec.

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

There's one caveat, though: the CLI only prints actions. Assertions are your (or your agent's) job.

Prompt a complete cycle

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 printed 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 your agent run it):

$ npx playwright test tests/snowboard.spec.ts

When to use AI generation — and when not

So, your agent can hand you a spec draft after receiving one(!) vague prompt. Whether you should take it depends on what you're testing and whether the run was worth the tokens.

The quality bar is the same as in a code review: would you ship it as-is? If yes, ship it. If not, you have a low-effort starting point. Keep editing until you would.

When generation goes sideways

Coding agents can look confident and still totally mess up. You'll see locators that match three things, overlays that swallow clicks, or assertions that fire too early. When the generated test fails or the agent gets stuck mid-flow, the easiest fix is to hand the problem back to the agent with the same tools it used to build the test.

That prompt alone can get you surprisingly far. The agent opens a browser again and inspects the page directly:

• playwright-cli snapshot: what's actually rendered, with the same refs the spec would use.
• playwright-cli console: app errors the test never showed.
• 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.

You don't need new commands or a special mode. Agents are pretty good at figuring this stuff out these days, and the Playwright skill tells them what to do. Give them the tools and the expected outcome, and they'll keep iterating.

But there are some fairly new agentic debugging tools if things get very tricky.

How your agent can debug your Playwright tests

If you're dealing with failing Playwright tests, you can ask your agent to debug them for you.