Vue.js puppeteer JavaScript Chrome extension Chrome HTML CSS playwright
Need help with puppeteer-recorder?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
checkly

Description

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

12.3K Stars 516 Forks Apache License 2.0 200 Commits 17 Opened issues

Services available

Need anything else?

Headless Recorder (previously Puppeteer Recorder)

Build Status

Gold sponsor

Checkly

⭐️ Puppeteer Recorder is now Headless Recorder and supports Playwright! ⭐️

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. Install it from the Chrome Webstore. Don't forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

This project 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.js
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 or Playwright 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

  1. Run:
    git clone https://github.com/checkly/headless-recorder.git
  2. Build the project:
    cd headless-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 headless-recorder/build and click Select

Cutting a Release

  • bump versions in
    package.json
    and
    manifest.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

Headless recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder. Headless Recorder was previously named "Puppeteer Recorder".

License

Apache 2

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.