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.
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
- 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.
click
dblclick
change
keydown
select
submit
load
unload
This collection will be expanded in future releases. πͺ
-
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.
alt + k
: Toggle overlayalt + shift + F
: Take full page screenshotalt + shift + E
: Take element screenshot
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
- 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.
- 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.
Headless recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder.
Delightful Active Monitoring for Developers
From Checkly with