Awesome
🚨 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.
</p> <p align="center"> <img width="200px" src="./assets/logo.png" alt="Headless Recorder" /> </p> <p> <img height="128" src="https://www.checklyhq.com/images/footer-logo.svg" align="right" /> <h1>Headless Recorder</h1> </p> <p> <img src="https://github.com/checkly/headless-recorder/workflows/Lint%20&%20Build%20&%20Test/badge.svg?branch=main" alt="Github Build"/> <img src="https://img.shields.io/chrome-web-store/users/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore%20-%20Users" alt="Chrome Webstore Users" /> <img src="https://img.shields.io/chrome-web-store/v/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore" alt="Chrome Webstore Version" /> </p><br> <p align="center"> <img src="./assets/hr.gif" alt="Headless recorder demo" /> </p> <br>🎥 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.
<br>🤔 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
<br>This collection will be expanded in future releases. 💪
How to use?
-
Click the icon and hit the red button.
-
👉 Hit <kbd>tab</kbd> 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 <img width="24px" height="24px" src="./assets/rec.png" alt="recording icon"/> to <img width="24px" height="24px" src="./assets/wait.png" alt="waiting icon"/> 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
<br>
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}}"
<br>🚨 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.
<br>