Skip to content

Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

Notifications You must be signed in to change notification settings

anteriovieira/puppeteer-recorder

This branch is 242 commits behind checkly/headless-recorder:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8baa8fe · Sep 4, 2018

History

97 Commits
Aug 14, 2018
Aug 14, 2018
Sep 4, 2018
Aug 13, 2018
Aug 13, 2018
Aug 14, 2018
Sep 4, 2018
Sep 2, 2018
Sep 2, 2018
Sep 4, 2018
Aug 17, 2018

Repository files navigation

Puppeteer Recorder

Build Status

coffee

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.

Note: we only record clicks etc. on a handful of elements, see the elements-to-bind-to.js and dom-events-to-record.js files in 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 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.

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

  1. Run: git clone https://github.com/checkly/puppeteer-recorder.git
  2. Build the project: cd puppeteer-recorder && npm i && npm run dev
  3. Navigate to chrome://extensions
  4. Make sure 'Developer mode' is checked
  5. Click Load unpacked extension...
  6. Browse to puppeteer-recorder/build and click Select

Credits & disclaimer

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

License

MIT

About

Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 57.6%
  • Vue 28.1%
  • CSS 10.9%
  • HTML 3.4%