# testflow-recorder-extension

**Repository Path**: ai_agent/testflow-recorder-extension

## Basic Information

- **Project Name**: testflow-recorder-extension
- **Description**: TestFlow Recorder 是一款基于 Chrome 浏览器的测试流程录制插件，它能够：

自动记录你的每一个操作步骤
实时截图保存操作瞬间
一键生成专业的测试报告
支持多人协作和会话管理
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-02-13
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TestFlow Recorder - 浏览器测试报告插件

一个浏览器插件，可以记录用户操作步骤、自动截图并生成专业测试报告。

## 功能特性

- ✅ **自动记录操作**：自动捕获点击、输入、选择等用户操作
- ✅ **自动截图**：每个步骤自动截图保存
- ✅ **手动添加步骤**：录制过程中可手动添加步骤说明
- ✅ **专业报告**：生成包含详细信息和截图的 HTML 测试报告
- ✅ **会话管理**：保存和管理多个录制会话
- ✅ **可配置选项**：支持自定义录制参数

## 安装方法

1. **下载插件**
   - 将整个 `testflow-recorder-extension` 文件夹保存到本地

2. **加载到 Chrome**
   - 打开 Chrome 浏览器
   - 访问 `chrome://extensions/`
   - 开启右上角的"开发者模式"
   - 点击"加载已解压的扩展程序"
   - 选择 `testflow-recorder-extension` 文件夹

3. **图标说明**
   - 如果图标显示异常，请确保 `assets/icons/` 目录下有图标文件
   - 可以使用在线工具将 `icon.svg` 转换为 PNG 格式（16x16, 48x48, 128x128）

## 使用方法

### 基本操作

1. **开始录制**
   - 打开要测试的网页
   - 点击浏览器工具栏中的插件图标
   - 点击"开始录制"按钮
   - 页面右上角会显示录制控制面板

2. **录制过程**
   - 正常操作网页（点击、输入、选择等）
   - 插件会自动记录每个操作步骤并截图
   - 可以点击"添加步骤"手动添加步骤说明
   - 录制控制面板会显示当前步骤数

3. **停止录制**
   - 点击录制控制面板的"停止"按钮
   - 或点击插件图标，然后点击"停止"按钮

4. **生成报告**
   - 停止录制后，点击插件图标
   - 点击"生成报告"按钮
   - 输入报告标题（可选）
   - 报告会自动下载为 HTML 文件

### 高级功能

- **查看历史会话**：在插件弹窗中查看最近的录制会话
- **配置选项**：右键点击插件图标 → "选项"，可以配置录制参数
- **清除数据**：在选项页面可以清除所有保存的会话

## 项目结构

```
testflow-recorder-extension/
├── manifest.json              # 插件配置文件
├── background/
│   └── service-worker.js      # 后台服务（截图、存储、报告生成）
├── content/
│   ├── content.js            # 内容脚本入口
│   ├── recorder.js           # 操作录制器核心逻辑
│   └── overlay.css           # 录制界面样式
├── popup/
│   ├── popup.html            # 弹出窗口 HTML
│   ├── popup.css             # 弹出窗口样式
│   └── popup.js              # 弹出窗口逻辑
├── options/
│   ├── options.html          # 选项页面 HTML
│   ├── options.css           # 选项页面样式
│   └── options.js            # 选项页面逻辑
├── report/
│   └── report-generator.js   # 报告生成器
└── assets/
    └── icons/                # 图标文件
```

## 技术说明

- **Manifest V3**：使用最新的 Chrome 扩展 API
- **自动截图**：使用 `chrome.tabs.captureVisibleTab` API
- **数据存储**：使用 `chrome.storage.local` 存储会话数据
- **事件监听**：监听 DOM 事件（click、input、change 等）
- **报告格式**：生成独立的 HTML 报告，包含所有截图和数据

## 注意事项

1. **权限要求**：插件需要以下权限：
   - `activeTab`：访问当前标签页
   - `storage`：保存会话数据
   - `tabs`：获取标签页信息
   - `downloads`：下载生成的报告
   - `notifications`：显示通知

2. **数据限制**：
   - 默认最多保存 50 个会话
   - 每个会话最多 100 个步骤
   - 截图以 base64 格式存储，可能占用较多存储空间

3. **兼容性**：
   - 支持 Chrome、Edge 等基于 Chromium 的浏览器
   - 需要 Manifest V3 支持

## 常见问题

**Q: 为什么点击"开始录制"没有反应？**
A: 请确保已打开一个网页标签页，并刷新页面后重试。

**Q: 截图不清晰怎么办？**
A: 可以在选项页面调整图片质量参数（0.85 为默认值，可提高到 1.0）。

**Q: 如何删除旧的会话？**
A: 在选项页面点击"清除所有会话"按钮。

**Q: 报告中的截图无法显示？**
A: 报告是独立的 HTML 文件，截图以 base64 格式嵌入，确保报告文件完整。

## 开发计划

未来可能添加的功能：
- 视频录制功能
- 网络请求监控
- 控制台日志记录
- 性能数据收集
- 导出为 Markdown/PDF 格式
- 云存储同步
- 团队协作功能

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！