Playwright: [Question] Video recording: capturing popups

[celeryclub]

Hey team! The 1.4.0 release is great. Amazing work.

I'm testing the new video capture feature, and I have a question. In the release notes, it says "every page and popup is captured". But when I run the code below, which opens and closes a popup, only the original page appears in the video. Is this a bug, or is this the way the feature is designed to work?

const fs = require('fs');
const { chromium } = require('playwright-chromium');

(async () => {
  const browser = await chromium.launch({
    headless: false,
  });
  const context = await browser.newContext({
    _recordVideos: { width: 1280, height: 720 },
  });
  const page = await context.newPage();
  const video = await page.waitForEvent('_videostarted');

  await page.goto('https://hhncn.csb.app');
  await page.waitForTimeout(2000);
  const [popup] = await Promise.all([page.waitForEvent('popup'), page.click('.link')]);
  await popup.waitForSelector('.logo')
  await popup.waitForTimeout(2000);
  await popup.close();

  await page.close();
  fs.renameSync(await video.path(), 'popup-test.webm');
  await browser.close();
})();

[arjunattam]

Thanks Steve. Currently, Playwright records one video per page. I've modified your script to specify a _videosPath and wait for the video event on the new popup. This would save 2 videos, each for a page. We are iterating on the API and would love your feedback!

const fs = require('fs');
const { chromium } = require('playwright-chromium');

(async () => {
  const browser = await chromium.launch({
    headless: false, _videosPath: __dirname
  });
  const context = await browser.newContext({
    _recordVideos: { width: 1280, height: 720 },
  });
  const page = await context.newPage();
  const video1 = await page.waitForEvent('_videostarted');

  await page.goto('https://hhncn.csb.app');
  await page.waitForTimeout(2000);
  const [popup] = await Promise.all([page.waitForEvent('popup'), page.click('.link')]);
  const video2 = await popup.waitForEvent('_videostarted');

  await popup.waitForSelector('.logo')
  await popup.waitForTimeout(2000);
  await popup.close();
  await page.close();

   fs.renameSync(await video1.path(), 'popup-test-1.webm');
   fs.renameSync(await video2.path(), 'popup-test-2.webm');
  await browser.close();
})();

[celeryclub]

Thanks @arjun27. That makes sense. I'm curious if you've considered a way to combine pages and their popups into the same video. I implemented this in playwright-video here: https://github.com/qawolf/playwright-video/pull/47.

I find this to be a pretty common pattern when writing tests - a single test activates a popup, then switches back to the original page. It's a bit easier to review all of this in a single video than having to switch between video files.

[arjunattam]

Thanks for the feedback! cc @yury-s

[dgozman]

I think this is a question of tooling. With enough information, e.g. timestamp of each page activation, and separate video files it should be straightforward to produce a combined video from slices. I'd prefer Playwright to focus on the lower level capability of recording all pages as they were, and leaving video editing to higher-level tools. That said, we might do something like this in playwright-cli or somewhere else.

[celeryclub]

Fair enough @dgozman. Thank you for your consideration. 👍