Generating filmstrip using puppeteer for better debugging

We are writing a lot of automation tests using Puppeteer.

Since puppeteer scripts execute so fast certain tests fail when they should be passing. Debugging those tests can be a challenge.

Chrome devtools comes with filmstrip feature. In "Performance" tab we can see screenshots of the site as they change over time.

We wanted puppeteer to generate similar filmstrip so that we can visually identify the source of the problem.

It turns out that puppeteer makes it very easy. Here is the full code.

import puppeteer from "puppeteer";

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 1024 });

  await page.tracing.start({ path: "trace.json", screenshots: true });

  await page.goto("https://www.bigbinary.com");
  await Promise.all([
    page.waitForNavigation(),
    page.click("#navbar > ul > li:nth-child(1) > a"),
  ]);

  await page.tracing.stop();

  await browser.close();
})();

If we execute this script then it will generate a file called trace.json. This file has images embedded in it which are base64 encoded.

To see the filmstrip drag the trace.json file to "Performance" tab in the Chrome devtool. Here is a quick video explaining this.