Home

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>

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

<br> <p align="center"> <img src="./assets/hr.gif" alt="Headless recorder demo" /> </p> <br>

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

<br>

What you can do?

Recorded Events

This collection will be expanded in future releases. 💪

<br>

How to use?

  1. Click the icon and hit the red button.

  2. 👉 Hit <kbd>tab</kbd> 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 <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.

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

⌨️ Shortcuts

<br>

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

  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.

<br>

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.

<br>

Credits

Headless recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder.

<br>

License

MIT

<p align="center"> <a href="https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder" target="_blank"> <img width="100px" src="./assets/checkly-logo.png?raw=true" alt="Checkly" /> </a> <br /> <i><sub>Delightful Active Monitoring for Developers</sub></i> <br> <b><sub>From Checkly with ♥️</sub></b> <p>