mirror of
https://github.com/checkly/headless-recorder.git
synced 2021-07-28 02:03:42 +03:00
chore: change readme format 🎨
* Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md
This commit is contained in:
Nico Domino
100
README.md
100
README.md
@@ -1,45 +1,85 @@
|
||||
# Headless Recorder (previously Puppeteer Recorder)
|
||||
<p align="center">
|
||||
<!-- headless-recorder Logo
|
||||
<img src="https://lh3.googleusercontent.com/zuxp6zCZpdSLqMHyr79oL39-phEVSVOYq2mtyBTkyJBc7A8PsWMTkWfofACaPIP-Vm59hutWx2YSFvfDPir9pCozg8g=w128-h128-e365-rj-sc0x00ffffff" /> -->
|
||||
<h1 align="center">Headless Recorder</h1>
|
||||
<p align="center">
|
||||
⭐️ Puppeteer Recorder is now <b>Headless Recorder</b> and supports Playwright! ⭐️
|
||||
</p>
|
||||
<br/>
|
||||
<p align="center" style="align: center;">
|
||||
<img src="https://github.com/checkly/headless-recorder/workflows/Lint%20&%20Build%20&%20Test/badge.svg?branch=master" 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/github/issues-pr/checkly/headless-recorder?label=PRs" alt="Github Pull Requests" />
|
||||
<img src="https://img.shields.io/chrome-web-store/v/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore" alt="Chrome Webstore Users" />
|
||||
<img src="https://img.shields.io/github/stars/checkly/headless-recorder?label=Stars" alt="Github Stars" />
|
||||
<img src="https://img.shields.io/github/license/checkly/headless-recorder?label=License" alt="License" />
|
||||
</p>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
#### Gold sponsor
|
||||
[<img src="chrome-store/checkly-logo.png?raw=true" alt="Checkly" width="300">](https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder)
|
||||
<!-- <h2 align="center">Support</h2> -->
|
||||
|
||||
|
||||
## 🙌 Support
|
||||
|
||||
⭐️ Puppeteer Recorder is now **Headless Recorder** and supports Playwright! ⭐️
|
||||
<!--sponsors start-->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<h3>Gold Sponsor</h3>
|
||||
<a href="https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder" target="_blank">
|
||||
<img width="200px" src="chrome-store/checkly-logo.png?raw=true" alt="Checkly" />
|
||||
</a><br />
|
||||
<i><sub>Delightful Active Monitoring for Developers</sub></i>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="mailto:tim@checklyhq.com" target="_blank">
|
||||
<img width="100px" src="https://imgur.com/X1gKuY0.png" alt="Support" />
|
||||
<br />
|
||||
<div>You?</div></a>
|
||||
</td>
|
||||
<!-- <td align="center" valign="middle">
|
||||
<a href="#" target="_blank"></a>
|
||||
</td> -->
|
||||
</tr><tr></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--sponsors end-->
|
||||
|
||||
## 📷 Screenshots
|
||||
|
||||
|
||||
|
||||
## 🖨️ Overview
|
||||
|
||||
Headless recorder is a Chrome extension that records your browser interactions and generates a
|
||||
[Puppeteer](http://pptr.dev/) or [Playwright](https://playwright.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda).
|
||||
[Puppeteer](http://pptr.dev/) or [Playwright](https://playwright.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda) to get started!
|
||||
|
||||
Don't forget to check out our sister project [theheadless.dev](https://theheadless.dev/), the open source knowledge base for Puppeteer and Playwright.
|
||||
|
||||
This project does the following already:
|
||||
This project builds on existing open source projects (see [Credits](#-credits)) but adds extensibility, configurability and a smoother UI. For more information, please see our [documentation](https://www.checklyhq.com/docs/headless-recorder/).
|
||||
|
||||
## 🏗️ Features
|
||||
|
||||
- Records clicks and type events.
|
||||
- Add waitForNavigation, setViewPort and other useful clauses.
|
||||
- Generates a Puppeteer script.
|
||||
- Generates a Puppeteer / Playwright script.
|
||||
- Shows which events are being recorded.
|
||||
- Copy to clipboard.
|
||||
- Offers configuration options.
|
||||
- Allows data-id configuration for element selection.
|
||||
- Allows `data-id` configuration for element selection.
|
||||
|
||||
> Note: we only record certain events. See `dom-events-to-record.js` in the code-generator folder for which events. This collection will be expanded in future releases.
|
||||
|
||||
## Usage
|
||||
## 🔧 Usage
|
||||
|
||||
- Click the icon and hit Record.
|
||||
- Hit <kbd>tab</kbd> after you finish typing in an `input` element.
|
||||
- Click links, inputs and other elements.
|
||||
- Wait for full page load on each navigation. The icon will switch from  to .
|
||||
- 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.
|
||||
|
||||
## Background
|
||||
|
||||
Writing Puppeteer or Playwright scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful,
|
||||
even if the code isn't perfect. This project builds on other projects (see [disclaimer](#user-content-credits--disclaimer)
|
||||
below) but adds extensibility, configurability and a smoother UI.
|
||||
|
||||
## Development
|
||||
## 🖥️ Development
|
||||
|
||||
1. Run: `git clone https://github.com/checkly/headless-recorder.git`
|
||||
2. Build the project: `cd headless-recorder && npm i && npm run dev`
|
||||
@@ -48,24 +88,24 @@ below) but adds extensibility, configurability and a smoother UI.
|
||||
4. Click Load unpacked extension...
|
||||
5. Browse to headless-recorder/build and click Select
|
||||
|
||||
## Cutting a Release
|
||||
## 🚀 Release
|
||||
|
||||
- bump versions in `package.json` and `manifest.json`
|
||||
- tag the code with the version, i.e. `git tag v0.4.0`
|
||||
- push with tags `git push --tags`
|
||||
|
||||
Now generate a release with **gren**. Make sure all issues associated with the new version are linked to a milestone
|
||||
1. Bump versions in `package.json` and `manifest.json`
|
||||
2. Tag the code with the version, i.e. `git tag v0.4.0`
|
||||
3. Push with tags `git push --tags`
|
||||
4. Generate a release with **gren**. Make sure all issues associated with the new version are linked to a milestone
|
||||
with the name of the tag.
|
||||
|
||||
```
|
||||
gren release --override --data-source=milestones --milestone-match="{{tag_name}}"
|
||||
```
|
||||
|
||||
## Credits & disclaimer
|
||||
## 🙏 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).
|
||||
|
||||
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).
|
||||
Headless Recorder was previously named "Puppeteer Recorder".
|
||||
|
||||
## License
|
||||
## 📄 License
|
||||
|
||||
Apache 2
|
||||
|
||||
Reference in New Issue
Block a user