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.

About the developer

checkly
13.0K Stars 555 Forks Apache License 2.0 220 Commits 14 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

Headless Recorder

Headless Recorder


Github Build Chrome Webstore Users Chrome Webstore Version License

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

Headless Recorder Screenshot

📝 Overview

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. Install it from the Chrome Webstore to get started!

Don't forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

This project builds on existing open source projects (see Credits) but adds extensibility, configurability and a smoother UI. For more information, please see our documentation.


🏗️ What you can do?

  • Records clicks and type events.
  • Add waitForNavigation, setViewPort and other useful clauses.
  • Generates a Puppeteer / Playwright 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.


🔧 How to use?

  • Click the icon and hit Record.
  • Hit tab after you finish typing in an
    input
    element.
  • Click on links, inputs and other elements.
  • Wait for full page load on each navigation. The icon will switch from to to indicate it is ready for more input from you.
  • Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.


🖥️ Development

  1. Open the terminal and clone the project:
    $ git clone https://github.com/checkly/headless-recorder.git
  2. Access project directory and use npm to install dependencies:
    $ cd headless-recorder && npm i
  3. Use the build npm script to build it:
    $ npm run dev
  4. Open chrome and navigate to extensions page using this URL:
    chrome://extensions
  5. Make sure 'Developer mode' is enabled
  6. Click "Load unpacked extension" button, browse the
    headless-recorder/build
    directory and select it


🚀 Release

  1. Bump versions in
    package.json
    and
    manifest.json
  2. Tag the code with the version, i.e.
    git tag v0.4.0
  3. Push with tags
    git push --tags
  4. Generate a release using gren:
    gren release --override --data-source=milestones --milestone-match="{{tag_name}}"

⚠️ Make sure all issues associated with the new version are linked to a milestone with the name of the tag.


🙏 Credits

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


📄 License

Apache 2

Supported by

Checkly
Delightful Active Monitoring for Developers

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.