🚨 Deprecated!
As of Dec 16th 2022, Headless Recorder is fully deprecated. No new changes, support, maintenance or new features are expected to land.
For more information and possible alternatives refer to this issue.
🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.
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-idconfiguration for element selection.
Recorded Events
clickdblclickchangekeydownselectsubmitloadunload
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
inputelement. 👈 -
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.
⌨️ Shortcuts
alt + k: Toggle overlayalt + shift + F: Take full page screenshotalt + 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
- 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/distdirectory 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.