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.
If we execute this script then it will generate a file
trace.json. This file has images embedded in it
which are base64 encoded.
To see the the filmstrip drag the
trace.json file to
“Performance” tab in the Chrome devtool.
Here is a quick video explaining this.