Save video & screenshot for page with playwright

main.js

const { chromium } = require("playwright"); // Or 'chromium' or 'firefox'.


(async () => {
  const browser = await chromium.launch({
    channel: "chrome-canary",
    args: ["--enable-unsafe-webgpu"],
    headless: false,
  });
  const context = await browser.newContext({
    recordVideo: {
      dir: "videos/",
      size: {
        width: 1024,
        height: 1024,
      },
    },
    viewport: {
      width: 1024,
      height: 1024,
    },
  });
  const page = await context.newPage();
  await page.goto("http://localhost:3000/basic");
  await page.waitForLoadState("domcontentloaded");
  await page.screenshot({ path: "webgpu.png", fullPage: true });
  await page.waitForTimeout(3000);
  await browser.close();

})();

// Then run `ffmpeg -i videos/[file].webm video.mp4` to turn to mp4

make a 3 second video of a page