Puppeteer Recorder

Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script. This project is very much in alpha stage, but does the following already:

Records clicks and type events
Generates a Puppeteer script
Shows events being recorded
Copy to clipboard
Offers configuration options

Tips

hit tab after you finish typing in an input element.
wait for full page loads on each navigation.

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 add 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

Known issues

When navigating between pages, the script is only injected when the full navigation is done, 'committed' in Chrome extension speak. This means you might be able to see the page and click on stuff, but no events are recorded.

Credits & disclaimer

Puppeteer recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder.

License

MIT

1.6 KiB Raw Blame History