Table of contents

Installation

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

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.

Options

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 page.click(): Setting this option generates a waitForSelector statement before each page.click() 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.