Generating filmstrip using puppeteer for better debugging

Rohit Kumar

By Rohit Kumar

on May 24, 2018

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.

1import puppeteer from "puppeteer";
2
3(async () => {
4  const browser = await puppeteer.launch({ headless: false });
5  const page = await browser.newPage();
6  await page.setViewport({ width: 1280, height: 1024 });
7
8  await page.tracing.start({ path: "trace.json", screenshots: true });
9
10  await page.goto("https://www.bigbinary.com");
11  await Promise.all([
12    page.waitForNavigation(),
13    page.click("#navbar > ul > li:nth-child(1) > a"),
14  ]);
15
16  await page.tracing.stop();
17
18  await browser.close();
19})();

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.

Stay up to date with our blogs. Sign up for our newsletter.

We write about Ruby on Rails, ReactJS, React Native, remote work,open source, engineering & design.