Headless Recorder

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

📝 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 Playwright & Puppeteer script.
Preview CSS selectors of HTML elements.
Take full page and clipped 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?

Click the icon and hit the red button.
👉 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.

🖥️ 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

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

🚀 Release

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

Supported by

_{Delightful Active Monitoring for Developers}

4.5 KiB Raw Blame History