headless-recorder README

The project's README from github.com/checkly/headless-recorder. As one markdown file: README.md.

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

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


What you can do?

Recorded Events

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


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

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.


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 and ui recorder.


License

MIT

Checkly
Delightful Active Monitoring for Developers
From Checkly with ♥️

headless-recorder (checkly/headless-recorder)

Searching Database…

15.3K ·GitHub
Headless-recorder
archived
What is this?Headless Recorder is a Chrome extension that records your clicks and typing in the browser and generates a ready-to-run Playwright or Puppeteer script from them.
Is this a browser extension or a standalone tool?It is a Chrome extension (built with Vue) that you install from the Chrome Webstore; it is not a CLI or desktop app.
How do I start recording a script?Click the extension icon and hit the red record button, then interact with the page; click links, type into inputs and hit tab to confirm, and wait for navigations to complete between steps.
Is this project still maintained?No, it was fully deprecated on Dec 16th 2022 with no further changes, support, or new features planned.
Is there a way to run it locally instead of from the store?Yes, you can clone the repo, build it, then load the unpacked extension from the dist directory via chrome://extensions in developer mode.
What kinds of actions does it capture?It captures click, dblclick, change, keydown, select, submit, load and unload events, and can also insert waitForNavigation and setViewPort calls automatically.
Does it have any extra debugging features besides recording?Yes, it can preview CSS selectors for HTML elements and take full-page or element screenshots, plus pause/resume/restart controls and dark mode.
Can I run the generated script directly without copying it elsewhere?Yes, generated scripts can be run directly on Checkly, the company that maintains this project.
What inspired this project?The README credits it as the spiritual successor to Segment.io's Daydream and the ui-recorder project.
What are similar projects?assay, midscene, dev-browser, browser, playwright, chromeless, BrowserKitten, camofox-browser
Which topics is it in?testing-tool, qa, puppeteer, extension, chrome, code-generation, playwright, chrome-extension, web-scraping, browser-automation, vue, testing
Creator
checkly
Size
11.8 MB
Stars
15.3K
Updated
CommitDec 16Releasev1.1.0Aug 20
Age
8y
Commits · 90 Days