The goal of Headless Recorder is to be easy to use but with enough depth to also handle more complex scenarios.
- Click the icon and hit Record.
- Hit tab after you finish typing in an
- Click links, inputs and other elements.
- Wait for full page load on each navigation. The icon will switch from
- Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.
- Click Stop to stop recording and generate the resulting code.
- Hit copy to clipboard.
With the code on your clipboard, you can save the code to a local file and run it, providing you have the Puppeteer or Playwright npm package installed.
npm install puppeteer npm install playwright node my_generated_script.js
On cookies and authentication
Headless Recorder does not (yet) record or store any of your session cookies or other local settings. This means you can be logged in to some webapp and record a script, but on playback the script fails because you are not logged in.
To work around this limitation you can record the login sequence as part of your script. Always starting Headless Recorder when Chrome is in Incognito Mode helps you dodge this pitfall, as it will become immediately clear when you are not logged in using session cookies. You need to explicitly allow the Headless Recorder extension to run in Incognito mode on the details section on the Extension page of your Chrome browser:
Filling out forms
Headless Recorder has been tested to record the following standard html form inputs and related elements.
textinput elements like text and email.
selector “drop down” elements.
As mentioned above, when typing in text inputs, hitting the tab key “confirms” the input text. Not hitting tab will result in no input being recorded.
Reminder: when providing login credentials or other confidential data in forms, make sure to filter them out after recording. In Checkly, you can replace these credentials with environment variables in your browser check script.
The demo video below gives an impression on how filling out a form works.
Using the overlay at the bottom of the page, you can take two kinds of screenshots:
- A screenshot of the current visible page.
- A clipped screenshot of a part of the page.
You can contribute to this documentation by editing this page on Github