headless-recorder

英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

🚨 已弃用！

自2022年12月16日起，Headless Recorder 已完全弃用。预计不会有新的更改、支持、维护或新增功能。

有关更多信息和可能的替代方案，请参阅此 问题。

无头记录器

🎥 Headless Recorder 是一个 Chrome 扩展，用于记录你的浏览器操作并生成 Playwright/Puppeteer 脚本。

概览

无头录制器是一个 Chrome 扩展程序，可记录您的浏览器交互并生成 Playwright 或 Puppeteer 脚本。从 Chrome 网上应用店 安装即可开始！

该项目基于现有的开源项目（参见 致谢），但增加了可扩展性、可配置性以及更流畅的用户界面。欲了解更多信息，请查看我们的 文档。

🤔 想了解更多关于 Puppeteer 和 Playwright 的内容吗？查看我们开放的 无头指南

你可以做什么？

• 记录点击和输入事件。
• 添加 waitForNavigation、setViewPort 和其他有用的子句。
• 生成 Playwright 和 Puppeteer 脚本。
• 预览 HTML 元素的 CSS 选择器。
• 截图整个页面和元素。
• 暂停、恢复和重新开始录制。
• 在浏览器中保存最新脚本。
• 复制到剪贴板。
• 在 Checkly 上直接运行生成的脚本。
• 灵活的配置选项和暗黑模式支持。
• 允许为元素选择配置 data-id。

记录的事件

• click
• dblclick
• change
• keydown
• select
• submit
• load
• unload

这个合集将在未来的版本中扩展。💪

如何使用？

1. 点击图标并按下红色按钮。

2. 👉 在完成输入 input 元素后的输入后按 tab。👈

3. 点击链接、输入框和其他元素。

4. 在每次导航时等待页面完全加载。

   图标将从 切换到 ，以表示它已准备好接收更多您的输入。

5. 当您想导航而不记录任何内容时，点击暂停。点击继续以继续录制。

⌨️ 快捷键

• alt + k：切换覆盖显示
• alt + shift + F：截取整页屏幕截图
• alt + shift + E ：截图元素

本地运行

克隆项目后，打开终端并导航到项目根目录。

$ 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

本地安装

1. 打开 Chrome 并使用此 URL 导航到扩展程序页面：chrome://extensions。
2. 确保已启用“开发者模式”。
3. 点击“加载已解压的扩展程序”按钮，浏览 headless-recorder/dist 目录并选择它。

版本发布

1. 使用 npm version 提升版本（补丁、次版本、主版本）。
2. 使用标签推送更改 git push --tags
3. 使用 gren 生成发布：gren release --override --data-source=milestones --milestone-match="{{tag_name}}"

🚨 确保与新版本相关的所有问题都关联到名称为标签名称的里程碑。

鸣谢

Headless recorder 是 segment.io 的 Daydream 和 ui recorder 的精神继承者和爱子。

许可

MIT