Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/checkly/headless-recorder

Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
https://github.com/checkly/headless-recorder

chrome chrome-extension playwright puppeteer vue

Last synced: about 1 month ago
JSON representation

Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.

Lists

README 

        
# 🚨 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](https://github.com/checkly/headless-recorder/issues/232).





  Headless Recorder






  

  
Headless Recorder





  Github Build

  Chrome Webstore Users

  Chrome Webstore Version




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








  Headless recorder demo







## Overview



Headless recorder is a Chrome extension that records your browser interactions and generates a [Playwright](https://playwright.dev/) or [Puppeteer](http://pptr.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda) to get started!



This project builds on existing open source projects (see [Credits](#-credits)) but adds extensibility, configurability and a smoother UI. For more information, please check our [documentation](https://www.checklyhq.com/docs/headless-recorder/).



> 🤔 Do you want to learn more about Puppeteer and Playwright? Check our open [Headless Guides](https://www.checklyhq.com/learn/headless/)







## 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](https://checklyhq.com)

- 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?



1. Click the icon and hit the red button.

2. 👉 Hit tab 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 recording icon

    to 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



- `alt + k`: Toggle overlay

- `alt + shift + F`: Take full page screenshot

- `alt + shift + E`: Take element screenshot







## Run Locally



After cloning the project, open the terminal and navigate to project root directory.



```bash

$ 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



1. Open chrome and navigate to extensions page using this URL: [`chrome://extensions`](chrome://extensions).

1. Make sure "**Developer mode**" is enabled.

1. Click "**Load unpacked extension**" button, browse the `headless-recorder/dist` directory and select it.



![](./assets/dev-guide.png)







## 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.







## Credits



Headless recorder is the spiritual successor & love child of segment.io's [Daydream](https://github.com/segmentio/daydream) and [ui recorder](https://github.com/yguan/ui-recorder).







## License



[MIT](https://github.com/checkly/headless-recorder/blob/main/LICENSE)





  

  Checkly

  

  


  Delightful Active Monitoring for Developers

  


  From Checkly with ♥️