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
这是什么？Headless Recorder 是一款 Chrome 扩展程序，可以录制你在浏览器中的点击和输入操作，并据此生成可直接运行的 Playwright 或 Puppeteer 脚本。
这是浏览器扩展程序还是独立工具？它是一款基于 Vue 构建的 Chrome 扩展程序，需要从 Chrome Webstore 安装；它不是命令行工具，也不是桌面应用。
我该如何开始录制脚本？点击扩展图标，然后按下红色的录制按钮，再与页面进行交互：点击链接、在输入框中输入内容并按 Tab 键确认，并在各步骤之间等待页面跳转完成。
这个项目还在维护吗？不再维护。该项目已于 2022 年 12 月 16 日完全停止维护，不会再有任何更新、支持或新功能计划。
我能不从应用商店安装，而是在本地运行它吗？可以。你可以克隆代码仓库并进行构建，然后在开发者模式下通过 chrome://extensions 从 dist 目录加载未打包的扩展程序。
它会捕获哪些类型的操作？它会捕获 click、dblclick、change、keydown、select、submit、load 和 unload 等事件，还可以自动插入 waitForNavigation 和 setViewPort 调用。
除了录制，它还有其他调试功能吗？有。它还能预览 HTML 元素的 CSS 选择器，截取整页或单个元素的截图，并提供暂停、继续、重新开始等控制功能以及深色模式。
我能否直接运行生成的脚本，而无需复制到其他地方？可以。生成的脚本可以直接在 Checkly 上运行，Checkly 是维护本项目的公司。
这个项目的灵感来自哪里？README 中称它是 Segment.io 的 Daydream 和 ui-recorder 项目的精神续作。
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