Installation
To install Headless Recorder, go to the Chrome Webstore and install it as follows:
- Navigate to the Chrome Webstore with your Chrome browser.
- Click the “Add to Chrome” button. You will see a camera icon appear in your toolbar.
- 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 eachpage.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.