How to Screen Record your Automation in Puppeteer

When we're running automation in a cloud environment and if something goes wrong, it's really hard to debug it.

The issue might exist only in that particular environment and not the others.

And debugging with a console log (or similar) approach might not be optimal.

For such a case, ever wondered how to record your entire workflow so that you know exactly where and why something goes wrong?

That's where puppeteer-screen-recorder comes in.

With puppeteer-screen-recorder, we can record our workflow almost instantly with our preferred configuration.

Let's see how to do that before talking about other things 😅

Dependecies

npm install puppeteer-screen-recorder

Usage

import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
// If you're using commonjs 👇
// const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');

const recorder = new PuppeteerScreenRecorder(page);

const savePath = './test/demo.mp4';

// Start the recording
await recorder.start(savePath);

// Stop and save the recording
await recorder.stop();

An example workflow

// Make sure that you've installed "puppeteer" and "puppeteer-screen-recorder"
import puppeteer from 'puppeteer';
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const recorder = new PuppeteerScreenRecorder(page);
  await recorder.start('./report/video/simple.mp4'); // supports extension - mp4, avi, webm and mov
  await page.goto('https://nesin.io');

  await page.goto('https://example.com');
  await recorder.stop();
  await browser.close();
})();

You can optionally configure the recording as well which you can read more about in their README

And that's pretty much it.

Happy recording workflows!