checkly/puppeteer-recorder
Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.
| repo name | checkly/puppeteer-recorder |
| repo link | https://github.com/checkly/puppeteer-recorder |
| homepage | https://checklyhq.com/puppeteer-recorder |
| language | JavaScript |
| size (curr.) | 1541 kB |
| stars (curr.) | 6654 |
| created | 2018-08-13 |
| license | Apache License 2.0 |
Puppeteer Recorder
Gold sponsor
⭐️ We just published an update on the glorious future of Puppeteer Recorder, check out this pinned issue ⭐️
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.
Usage
- 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.
Background
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.
Development
- 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
Cutting a Release
- 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}}"
Credits & disclaimer
Puppeteer recorder is the spiritual successor & love child of segment.io’s Daydream and ui recorder.
License
Apache 2
