/record-video

name: record-video
description: Record a short WebM video of a web page or web-based app with Playwright's page.screencast, demonstrating a feature or bug fix. Use when asked to record evidence, demo a change, show that it works, record a video, or capture a screencast.

Record video

Record a short `.webm` video of the real outcome with Playwright's `page.screencast`, and return it with the script that produced it.

Use whichever Playwright `page` is available: the Integrated Browser's `runPlaywrightCode` tool, or a Playwright session another skill attaches to an app (for example `@playwright/cli run-code`). If a skill exists for launching the app under test, follow it to get the page.

Rules

• Show real behavior. Never fake a result or hide a failed assertion.
• Don't bypass sign-in, CAPTCHAs, or paywalls; don't record secrets or

private data; ask before side effects on real services.

• Keep it under a minute, in a few clear chapters.

Prepare

1. Get a Playwright page for the app and make sure it is visible (`document.visibilityState === 'visible'`); ask the user to reveal it if not. For the Integrated Browser, open a fresh page with `openBrowserPage` (`forceNew: true`); if the browser tools are missing, explain that `workbench.browser.enableChatTools` must be enabled and stop. 2. Dry-run the scenario without recording. Find stable role/name locators and check the assertions. Reset test data to a known start state. 3. Write the complete script before recording, so no locators need to be discovered mid-recording.

Record in one call

Run the whole script in a single Playwright call so pauses between calls don't end up in the video. Allow enough timeout for the scenario.

Save the video and script in the current session's storage folder, not in the workspace, and name them after the scenario, for example `<session folder>/add-and-complete-task.webm`.

const viewport = await page.evaluate(() => ({ width: innerWidth, height: innerHeight }));
const even = v => Math.max(2, Math.floor(v / 2) * 2);
const scale = Math.min(1, 1280 / viewport.width);
await page.screencast.start({
  path: '<session folder>/add-and-complete-task.webm',
  size: { width: even(viewport.width * scale), height: even(viewport.height * scale) },
});
try {
  await page.screencast.showActions();
  await page.screencast.showChapter('Add a task');
  const input = page.getByRole('textbox', { name: 'New task' });
  await input.pressSequentially('Buy milk', { delay: 60 });
  await input.press('Enter');
  const task = page.getByRole('checkbox', { name: 'Buy milk', exact: true });
  if (await task.isChecked()) {
    throw new Error('New task was unexpectedly completed.');
  }
  await page.waitForTimeout(1000);
  await page.screencast.showChapter('Complete the task');
  await task.check();
  if (!await task.isChecked()) {
    throw new Error('Task did not become completed.');
  }
  await page.waitForTimeout(1500);
} finally {
  await page.screencast.stop();
}

The video is only finalized by `stop()`, so always use `try/finally`. If the scenario fails, keep the partial video and report the error.

Hand off

Return links to the video and the script, plus a short list of expected vs. actual outcomes. A demo supplements tests and code review; it doesn't replace them.