Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/checkly/headless-recorder
Owner: checkly
License: mit
Archived: true
Created: 2018-08-13T19:31:11.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2022-12-16T13:35:36.000Z (about 2 years ago)
Last Synced: 2024-05-28T21:41:22.876Z (8 months ago)
Topics: chrome, chrome-extension, playwright, puppeteer, vue
Language: JavaScript
Homepage: https://checklyhq.com/headless-recorder
Size: 11.6 MB
Stars: 14,969
Watchers: 180
Forks: 715
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-puppeteer - checkly/puppeteer-recorder
my-awesome-list - headless-recorder
pure-awesomeness - Headless Recorder
awesome-github-star - headless-recorder
awesome-starts - checkly/headless-recorder - 🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. (JavaScript)
awesome-list - headless-recorder
jimsghstars - checkly/headless-recorder - Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script. (JavaScript)

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

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
to 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)

_{Delightful Active Monitoring for Developers}

_{From Checkly with ♥️}