Playwright Screencasts and Agentic Receipts

Test evidence is often too sparse or too noisy. Logs tell you what happened, screenshots tell you what something looked like, but neither gives you much of a narrative. That is why the new screencast work in Playwright 1.59 immediately caught my attention.

A good receipt should explain the path taken, not just prove that a test failed or passed.

What Playwright 1.59 Adds

Version 1.59 introduces a unified page.screencast API that makes it much easier to capture test evidence in a structured way. Instead of treating video as an afterthought, you can now record the session with precise start and stop control, layer in annotations, and hand over something that is genuinely useful to another human or an agent.

• Screencast recordings with precise start and stop control.
• Action annotations that highlight each interaction during the recording.
• Visual overlays and chapter markers that add context to the video itself.
• Real-time frame capture for live processing or future AI-assisted workflows.
• Agentic video receipts that are easier to review than a wall of text.

Setting It Up

The setup is simple enough: upgrade to the latest Playwright release, start the screencast before the flow you want to evidence, and write the recording into the test output folder so it is available as an artifact.

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

test("checkout flow receipt", async ({ page }, testInfo) => {
  const receiptPath = testInfo.outputPath("checkout-receipt.webm");

  await page.screencast.start({
    path: receiptPath,
  });

  const actions = await page.screencast.showActions({
    position: "top-right",
    duration: 1200,
    fontSize: 14,
  });

  await page.screencast.showChapter("Cart confirmed", {
    description: "Agent verified the basket before applying the coupon.",
  });

  await page.getByLabel("Coupon code").fill("SAVE20");
  await page.getByRole("button", { name: "Apply coupon" }).click();
  await expect(page.getByText("20% off")).toBeVisible();

  await page.screencast.showOverlay(
    '<div style="padding:8px 12px;border-radius:999px;background:#111827;color:#34d399">Coupon applied</div>',
  );

  await page.screencast.showChapter("Done", {
    description: "Discount applied and total updated.",
  });

  actions.dispose();
  await page.screencast.stop();
});

The important part is the rhythm. Start recording before the meaningful steps, add chapters around the milestones you care about, and use overlays when you want the video itself to explain what is happening.

Inline annotations turn a video from passive proof into something closer to a narrated test run.

Why It Helps

The benefit is mostly in review time. A reviewer can scan a few chapter titles, see the interactions highlighted on screen, and understand the outcome without replaying the whole test or trawling through CI logs. It also gives you a more durable audit trail when you need to show exactly how a flow was exercised.

If you are already using Playwright for serious CI work, this is a practical improvement rather than a novelty. The recording becomes a stronger form of evidence because it is tied directly to the test flow and can carry context with it.

Using It With Agents

const { endpoint } = await browser.bind("checkout-receipt", {
  workspaceDir: process.cwd(),
});

console.log(endpoint);

That is where the agentic receipts idea becomes useful. If you bind the browser session using browser.bind(), an agent can connect through tools such as Playwright CLI or @playwright/mcp, do the work, and then leave behind a screencast with chapters and action annotations that explains what it did.

• Ask the agent to start recording before it begins the task.
• Tell it to add chapter markers around each important milestone.
• Use action annotations so every meaningful interaction is visible inline.
• Capture a final overlay or chapter that summarises the result.
• Stop the recording and store the .webm file as the receipt artifact.

I like this pattern because it makes agent output reviewable. Instead of a wall of text, you get a short video trail with enough context to answer the only question that really matters: did the agent do the right thing for the right reason?

An agentic receipt is only useful if a human can trust it quickly.

Final Thoughts

Playwright 1.59 feels like a practical step forward rather than a flashy one. Screencasts, action annotations, overlays, and chapter markers all work together to make evidence clearer. Combined with agents, they give you something even better: a way to record not just the result, but the story of how the result was produced.

If you want to read the release notes directly, they are here. The screencast API is easy to try on a real test flow, and it is one of those features that feels immediately useful once you see it in action.