Puppeteer recorder is a Chrome extension that records your browser interactions and generates a
Puppeteer script. Install it from the Chrome Webstore.
This project is pretty fresh, but does the following already:
- Records clicks and type events.
- Add waitForNavigation, setViewPort and other useful clauses.
- Generates a Puppeteer script.
- Shows which events are being recorded.
- Copy to clipboard.
- Offers configuration options.
- Allows data-id configuration for element selection.
Note: we only record certain events. See
dom-events-to-record.jsin the code-generator folder for which events. This collection will be expanded in future releases.
- Click the icon and hit Record.
- Hit tab after you finish typing in an
inputelement. - Click links, inputs and other elements.
- Wait for full page load on each navigation. The icon will switch from
to 
. - Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.
Writing Puppeteer scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful, even if the code isn't perfect. This project builds on other projects (see disclaimer below) but adds extensibility, configurability and a smoother UI.
- Run:
git clone https://github.com/checkly/puppeteer-recorder.git - Build the project:
cd puppeteer-recorder && npm i && npm run dev - Navigate to chrome://extensions
- Make sure 'Developer mode' is checked
- Click Load unpacked extension...
- Browse to puppeteer-recorder/build and click Select
- bump versions in
package.jsonandmanifest.json - tag the code with the version, i.e.
git tag v0.4.0 - push with tags
git push --tags
Now generate a release with gren. Make sure all issues associated with the new version are linked to a milestone with the name of the tag.
gren release --override --data-source=milestones --milestone-match="{{tag_name}}"
Puppeteer recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder.
Apache 2