# auto_test_skil

**Repository Path**: d-hgs/auto_test_skil

## Basic Information

- **Project Name**: auto_test_skil
- **Description**: 本项目是一个基于 Playwright 的浏览器自动化截图工具，用于记录用户操作步骤并自动生成 Markdown 格式的操作手册。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-06
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 浏览器自动化截图工具

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Node](https://img.shields.io/badge/node-%3E%3D14.0.0-brightgreen.svg)](https://nodejs.org/)
[![Playwright](https://img.shields.io/badge/playwright-1.40.0-green.svg)](https://playwright.dev/)

## 📖 项目介绍

基于 **Playwright** 的浏览器自动化截图工具，可自动记录用户操作步骤并生成 Markdown 格式的操作手册。适用于编写系统操作指南、记录测试用例、创建用户培训材料等场景。

**核心功能：**
- 🎯 **自动截图** - 捕获每次页面导航和关键操作
- 📝 **生成手册** - 自动生成结构化的 Markdown 文档
- 🖱️ **智能识别** - 区分传统页面、单页应用(SPA)和iframe导航
- ⏯️ **灵活控制** - 提供暂停/继续按钮，按需截图
- 🔧 **零配置** - 开箱即用，无需复杂配置

## 🎨 设计理念

**简单至上**
- 一键启动，无需安装配置
- 自动化程度高，减少手动操作
- 输出格式清晰，易于二次编辑

**智能识别**
- 传统页面导航：监听 `framenavigated` 事件
- 单页应用(SPA)：监听 URL 变化和点击事件
- iframe系统：智能过滤干扰，聚焦主流程

**用户友好**
- 实时控制台输出，了解执行状态
- 暂停/继续按钮，灵活控制截图时机
- 详细的日志记录，便于调试

## 🏗️ 项目结构

```
auto_test_skil/
├── tests/
│   ├── capture-manual.js      # JavaScript 实现
│   └── capture-manual.ts      # TypeScript 实现
├── manual-screenshots/        # 截图存储目录
├── 操作手册.md                 # 生成的操作手册
├── package.json               # 项目配置
└── 启动截图工具.bat           # Windows 快速启动
```

## 🚀 快速开始

### 安装

```bash
# 克隆项目
git clone https://gitee.com/d-hgs/auto_test_skil.git
cd auto_test_skil

# 安装依赖
npm install
```

### 使用方法

**方式一：命令行启动（推荐）**
```bash
npm start
```

**方式二：Windows 双击启动**
```
双击运行 启动截图工具.bat
```

**方式三：直接运行脚本**
```bash
node tests/capture-manual.js
```

### 操作流程

1. 浏览器自动打开
2. 执行需要记录的操作（登录、导航、点击等）
3. 工具自动截图并生成文档
4. 关闭浏览器窗口结束录制
5. 查看生成的 `操作手册.md`

### 停止工具

**正常停止：**
- 关闭浏览器窗口即可自动停止工具

**强制停止：**

**Windows系统：**
```bash
# 停止所有Node.js进程
taskkill /F /IM node.exe

# 停止所有Chrome进程
taskkill /F /IM chrome.exe

# 同时停止Node和Chrome
taskkill /F /IM node.exe & taskkill /F /IM chrome.exe
```

**Linux/Mac系统：**
```bash
# 查找并停止进程
pkill -f capture-manual

# 或者使用
killall node
```

**注意事项：**
- 强制停止可能导致部分截图未保存
- 建议优先使用关闭浏览器窗口的方式正常停止

## ✨ 核心特性

### 智能截图策略

**页面导航截图**
- 传统页面跳转：立即截图
- SPA导航：点击后延迟 500ms 截图
- iframe导航：自动过滤，避免干扰

**点击操作截图**
- 监听所有 frame 的点击事件
- 包括 iframe 中的按钮点击
- 自动去重，避免重复截图

### 暂停/继续控制

- 页面右上角悬浮按钮
- 暂停时停止所有截图
- 继续时恢复自动截图
- 适用于跳过不需要记录的操作

### 输出格式

生成的 `操作手册.md` 包含：
- 步骤编号和标题
- 截图引用
- 页面 URL 和标题
- 操作说明（需手动填写）

## 🔧 配置参数

可在脚本中调整以下参数：

```javascript
headless: false           // 浏览器运行模式（true为无头模式）
slowMo: 300              // 操作延迟（毫秒）
viewport: { 
  width: 1920, 
  height: 1080 
}                        // 视口大小
```

## 📋 使用场景

- ✅ 编写系统操作手册
- ✅ 记录测试用例步骤
- ✅ 创建用户培训材料
- ✅ 文档化业务流程
- ✅ 制作演示文档

## 🤝 参与贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 新建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

- [Playwright](https://playwright.dev/) - 强大的浏览器自动化框架
- 所有贡献者的支持