In this article, we’ll be diving into arguably one of Puppeteer’s most useful features - creating session recordings using the Replay library. The Puppeteer Replay library provides a high-level API to control Chrome, allowing developers to automate and test modern web experiences efficiently.
Creating session recordings can be quite beneficial for developers and everyone involved in the process.
Recording your Puppeteer scripts in action gives you a clear, step-by-step visual of how they interact with web pages. This is extremely helpful for debugging and understanding script functionality. Instead of just reading code and comments, you can see the actual interactions, making it easier to identify and resolve issues.
After recording your test, you can easily share it with your team or project stakeholders. This is especially useful for those who may not be familiar with Puppeteer. They can watch the recording to understand how the automation works and spot any problems.
The main players responsible for the session recording capabilities are the Puppeteer Replay library and the Chrome Devtools Recorder. It's true that you could use the Puppeteer screen recorder for video recording, but using the Developer tools recorder from the devtools chrome extension gives you a more comprehensive view of the tasks carried out during the session.
Although the Chrome dev tools recorder records your session, you don't have to download it. It’s readily available in your Google Chrome Browser Devtools.
Assuming that you’ve already installed node.js and npm, you should start by installing the replay library. You can do so by following these instructions.
This should download and install the Puppeteer Replay library and its associated dependencies.
Once you’ve got the prerequisites down, it's time to start recording, so let’s open up the Chrome tools.
Start by opening Chrome Devtools by using the shortcut Ctrl + Shift + J
There are 2 main ways in which you can replay a Recording using Puppeteer Replay.
Open your terminal and navigate to your project directory. Then you should run the following command. Make sure to replace “recording.json” with the actual name of your recording
You could also launch it in headless mode, without a Graphical User Interface.
Or collectively replay all recordings in a folder. Just make sure to replace the “all-recordings” with an actual file path.
This method gives you programmatic control over the replay process because it allows you to integrate with other additional tools, add assertions within your code using the library, and modify them before replaying. Here’s a snippet showing you how to do it. Make sure to replace “path/to/your/recording.har” with the path of your file.
This code launches a headless browser with a new page and uses the puppeteer-replay library to replay the user interactions recorded during the session.
In order to make the most out of your replays, you can follow some best practices.
Customize your replay - As we mentioned, Puppeteer’s Replay library allows you to customize your replay by filtering specific actions, adjusting timeouts, or adding wait conditions to tailor the replay to your testing requirements. Here’s a code block example showing you how.
The above code shows you how to filter actions to include only the login steps. It also replays the filtered session with a longer timeout for a specific step using “await replay.replay”, with a timeout of 10 seconds.
Conditional logic - You could also incorporate conditional logic into your replay script to handle situations with different user inputs or application behaviors. This makes the replay more adaptable to varying scenarios.
Integrated testing - Since Replay allows integration with other tools, you can make use of it by integrating Puppeteer Replay with your testing framework like a front-end testing tool. Popular frameworks like Jest or Mocha work well with Puppeteer. Here’s a snippet showing you how to integrate Jest.
This code loads the login recording, replays the session, and adds assertions to verify dashboard navigation.
In addition to this article, you can also use resources like the official GitHub repository of Puppeteer Replay for more programmatic approaches.
Replay in Puppeteer allows you to replay session recordings made via Chrome Devtools. Replaying your session recordings can be quite beneficial for development teams in many ways like visualizing test executions, sharing your test recording with results, and as documentation to train new developers. While this can be done in a few methods, by using the Replay library and following our streamlining tips, you can further configure your replay to meet your needs.
End-to-End Testing with Puppeteer: Getting Started
waitForSelector in Puppeteer: Basic and Advanced Configuration