The goal of Puppeteer Recorder is to be easy to use but with enough depth to also handle complexer 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 npm package installed.
npm install puppeteer node my_generated_script.js
On cookies and authentication
Puppeteer 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 Puppeteer 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 Puppeteer Recorder extension to run in Incognito mode on the details section on the Extension page of your Chrome browser:
Filling out forms
Puppeteer 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 record.
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.
You can take two kinds of screenshots.
- A screenshot of the current visible page.
- A clipped screenshot of a part of the page.
Activate either mode by either using the right click context menu
Or using keyboard short cuts