- Click the icon and hit Record.
- Hit tab after you finish typing in an
input
element. - 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.json
andmanifest.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