On this page

To install Headless Recorder, go to the Chrome Webstore and install it as follows:

Headless Recorder Chrome Webstore

  1. Navigate to the Chrome Webstore with your Chrome browser.
  2. Click the “Add to Chrome” button. You will see a camera icon appear in your toolbar.
  3. Clicking the camera icon will pop open Headless Recorder.

Setup for Checkly

By default, Headless Recorder generates code that is wrapped in an async helper function. This is handy when you want to save the generated code directly to a file on your local machine and run the code with a simple node myscript.js.

However, Checkly already wraps your code when running browser checks. You therefore need to uncheck the option wrap code in async function. After this, all code generated by Headless Recorder can be directly copy & pasted into Checkly.

Headless Recorder async setting


Open the options tab by clicking the cogwheel icon. In this tab you will find a set of configuration options that impact how Headless Recorder generates Puppeteer and Playwright code. Most options are self explanatory, but two very important ones are:

  • add waitForNavigation lines on navigation: this determines if extra statements are added to wait for browser reloads when navigating from page to page. Turning this options off can result in failing or hanging scripts.
  • add waitForSelector lines before every Setting this option generates a waitForSelector statement before each statement, effectively always guarding for clicking on elements that are not (yet) available on a page.

It is recommended to leave both options checked in all cases.