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.6K Stars 595 Forks MIT License 315 Commits 21 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

Headless Recorder 1.0 - Easily generate Playwright/Puppeteer scripts while browsing | Product Hunt

Headless Recorder

Headless Recorder

Github Build Chrome Webstore Users Chrome Webstore Version

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


Headless recorder demo


👀 Overview

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

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

🤔 Do you want to learn more about Puppeteer and Playwright? Check our open Headless Guides


🏗️ What you can do?

  • Records clicks and type events.
  • Add waitForNavigation, setViewPort and other useful clauses.
  • Generates a Playwright & Puppeteer script.
  • Preview CSS selectors of HTML elements.
  • Take full page and element screenshots.
  • Pause, resume and restart recording.
  • Persist latest script in your browser
  • Copy to clipboard.
  • Run generated scripts directly on Checkly
  • Flexible configuration options and dark mode support.
  • Allows
    data-id
    configuration for element selection.

Recorded Events

  • click
  • dblclick
  • change
  • keydown
  • select
  • submit
  • load
  • unload

This collection will be expanded in future releases. 💪


🔧 How to use?

  1. Click the icon and hit the red button.
  2. 👉 Hit tab after you finish typing in an
    input
    element. 👈
  3. Click on links, inputs and other elements.
  4. Wait for full page load on each navigation.

    The icon will switch from recording icon to waiting icon to indicate it is ready for more input from you.

  5. Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.

⌨️ Shortcuts

  • ctrl + k
    : Toggle overlay
  • ctrl + shift + F
    : Take full page screenshot
  • ctrl + shift + E
    : Take element screenshot


🖥️ Run Locally

After cloning the project, open the terminal and navigate to project root directory.

$ npm i # install dependencies

$ npm run serve # run development mode

$ npm run test # run test cases

$ npm run lint # run and fix linter issues

$ npm run build # build and zip for production


🧩 Install Locally

  1. Open chrome and navigate to extensions page using this URL:
    chrome://extensions
    .
  2. Make sure "Developer mode" is enabled.
  3. Click "Load unpacked extension" button, browse the
    headless-recorder/dist
    directory and select it.


🚀 Release

  1. Bump version using
    npm version
    (patch, minor, major).
  2. Push changes with tags
    git push --tags
  3. 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

MIT

Checkly
Delightful Active Monitoring for Developers
From Checkly with ♥️

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.