夜雨聆风本系列我们学习了AI编程工具的基本使用，SDD TDD驱动的开发，有没有发现还少了什么，对就是测试，这里不仅指满足测试同学的测试需求，还有我们开发完做自测的情况。今天介绍的这个工具，就可以帮助我们使用AI驱动页面和接口测试。
在上一篇文章中，我们介绍了Opencli工具的使用，与playwright-cli类似，Opencli也是一个浏览器自动化测试工具，且自带接口自动化测试功能，且支持复用浏览器登录状态。也能够把测试步骤保存为命令和脚本，后续执行可实现0 token消耗。
之前文章中，我们还介绍了SDD也就是基于spec需求文档的编程，当时编码结束后，会让前后端执行单元测试来保证开发质量。但单元测试也有不足之处，比如java的单元测试不起服务，前端单元测试mock数据的话无法保证前后端接口真的一致；再比如无法发现页面样式问题。
今天我们将用opencli来弥补这一点，用其作为浏览器自动化测试和接口自动化测试工具。当然，用playwright-cli等类似工具也能达成同样的目标，各位可以自行尝试。
openspec与opencli之间的桥梁就是spec.md或者proposal.md文件，因为这两个文件是以用户使用的视角来描述页面操作的，对于AI也比较好理解。
Terminal
# Proposal
## Testable Behaviors
### 导航菜单图标问题
- WHEN 用户进入前端页面 THEN 左导航菜单的每一项都显示对应的图标
- WHEN 导航菜单有子菜单 THEN 父级菜单显示展开/收起图标
### 工具分享页面创建文件夹问题
- WHEN 用户在工具分享页面点击"创建文件夹"按钮 THEN 系统创建新文件夹并显示在列表中
- WHEN 用户在工具分享页面点击"新建文件"按钮 THEN 系统创建新文件并显示在列表中
- WHEN 创建文件夹/文件成功后 THEN 显示成功提示
### 工具分享页面按钮中文问题
- WHEN 用户打开工具分享页面 THEN 所有按钮名称显示为中文
- WHEN 用户点击"新建"相关按钮 THEN 按钮文字为中文
## Acceptance Criteria
1. 左导航菜单所有菜单项均正确显示图标（el-icon 或自定义 icon）
2. 工具分享页面可以成功创建文件夹和文件
3. 工具分享页面的所有按钮名称均为中文
4. 修复后前端无 lint 错误，可以正常构建实操：
opencli基于proposal.md做浏览器和接口自动测试
Terminal
proposal.md 根据本次需求，让opencli执行浏览器自动化测试用例以及接口自动化测试用例此时opencli会自动打开浏览器窗口，像真人一样点击页面，同时在IDE的对话窗口显示执行记录及结果：
Terminal
登录成功！现在URL是 `/#/agent`
可以看到：
1. "导航" 有图标 `<i />`
2. "大屏概览" 有图标 `<i />`
3. "纳管资源列表" **没有图标**！
4. "知识库" 有图标 `<i />`
5. "工具分享" 有图标 `<i />`
6. "用户管理" 有图标 `<i />` 和 `<svg />`
现在让我点击"工具分享"来测试工具分享页面的功能。
...
中间步骤省略
...
让我生成完整的测试报告。
## 自动化测试报告
### 一、接口自动化测试 ✅
| 测试用例 | 方法 | 路径 | 结果 |
|----------|------|------|------|
| 获取文件夹列表 | GET | `/api/tool-share/folders` | ✅ 返回 4 个文件夹 |
| 创建新文件夹 | POST | `/api/tool-share/folder` | ✅ `{"success":true}` |
| 获取文件列表 | GET | `/api/tool-share/files?folderId=24` | ✅ 返回 0 个文件 |
**新增的文件夹已显示在页面上**：
- `OpenCLI测试文件夹`
- `接口修复测试文件夹`
- `OpenCLI自动化测试文件夹`
### 二、浏览器自动化测试 ✅
| 测试用例 | 操作 | 结果 |
|----------|------|------|
| 导航菜单点击 | 点击"工具分享"菜单项 [9] | ✅ 成功进入工具分享页面 |
| 页面加载 | URL 变为 `#/tool-share/index` | ✅ 页面正常加载 |
| 导航菜单图标 | 部分菜单项有 `<i />` 元素 | ⚠️ `纳管资源列表` 无图标 |
| 工具分享页面显示 | 左侧显示文件夹列表 | ✅ |
| 文件夹列表 | 显示 4 个文件夹 | ✅ |
| 创建文件夹对话框 | 点击创建文件夹按钮 [25] | ✅ 对话框打开 |
| 确认按钮文本 | 按钮显示 `message.common.confirm` | ❌ i18n key 未翻译 |
### 三、问题状态
| # | 问题 | 状态 |
|---|------|------|
| 1 | ✅ **后端接口 token 获取** | **已修复** - `Authorization: Bearer` 方式正常工作 |
| 2 | 导航菜单 `纳管资源列表` 缺少图标 | 待修复 |
| 3 | 确认按钮显示 `message.common.confirm` | 待修复 i18n 配置 |
| 4 | 创建文件夹对话框 `placeholder` 非中文 | 待修复 |保存为可复用的命令和脚本
Terminal
帮我把上述测试步骤保存为opencli的测试脚本和adapter保存成功之后可复用，且后续使用时不消耗token。对于需要频繁重复测试的场景，我们可以基于定时任务自动做测试，让它把测试结果保存到文件或者发送到邮箱。
Terminal
用户希望把刚才的测试步骤保存为 OpenCLI 测试脚本和 adapter。根据 OpenCLI 的工作流程，我需要：
1. 创建一个 OpenCLI adapter 来封装工具分享页面的操作
2. 保存到 `~/.opencli/clis/showtime/` 目录下
...
中间过程省略
...
## 测试脚本和 Adapter 创建完成 ✅
### 创建的文件
| 文件路径 | 说明 |
|----------|------|
| `~/.opencli/clis/showtime/tool-share-test.js` | OpenCLI Adapter |
| `scripts/opencli-test/tool-share-test.sh` | Shell 测试脚本 |
| `scripts/opencli-test/README.md` | 使用文档 |
### 使用方法
**OpenCLI Adapter:**
```bash
# 列出所有测试
opencli showtime tool-share-test --test all -f json
# 仅测试文件夹
opencli showtime tool-share-test --test folders
# 仅测试按钮
opencli showtime tool-share-test --test buttons
# 仅测试导航
opencli showtime tool-share-test --test navigation
```
**Shell 脚本:**
```bash
# 全部测试
./scripts/opencli-test/tool-share-test.sh all
# 仅接口测试
./scripts/opencli-test/tool-share-test.sh api
# 仅浏览器测试
./scripts/opencli-test/tool-share-test.sh browser
```执行脚本生成测试报告
Terminal
tool-share-test.sh 执行测试脚本，并生成测试报告，保存到项目docs目录下Terminal
# OpenCLI 工具分享自动化测试报告
**测试时间**: 2026-05-24 23:48
**测试类型**: 接口自动化 + 浏览器自动化
**测试脚本**: `scripts/opencli-test/tool-share-test.sh`
---
## 测试结果概览
| 测试类别 | 通过 | 失败 | 总计 |
|----------|------|------|------|
| 接口测试 | 3 | 0 | 3 |
| 浏览器测试 | 4 | 1 | 5 |
| **总计** | **7** | **1** | **8** |
---
## 1. 接口自动化测试
### 测试 1: 获取文件夹列表 ✓ PASS
```
GET /api/folder/list
```
**结果**: 成功获取 6 个文件夹
| ID | 名称 | 创建时间 |
|----|------|----------|
| 8 | mcp | 2026-05-22T09:41:52 |
| 21 | 单测 | 2026-05-22T10:55:04 |
| 24 | OpenCLI测试文件夹 | 2026-05-24T22:32:52 |
| 25 | 接口修复测试文件夹 | 2026-05-24T22:51:47 |
| 26 | OpenCLI自动化测试文件夹 | 2026-05-24T22:53:57 |
| 27 | 自动化测试文件夹 | 2026-05-24T23:00:38 |
### 测试 2: 创建新文件夹 ✓ PASS
```
POST /api/folder/add
```
**请求体**:
```json
{
"name": "API自动化测试文件夹",
"parentId": null
}
```
**结果**: `{"success": true}`
### 测试 3: 获取文件列表 ✓ PASS
```
GET /api/file/list?folderId=8
```
**结果**: 文件数量 0（文件夹为空）
---
## 2. 浏览器自动化测试
| 测试用例 | 状态 | 描述 |
|----------|------|------|
| folder_list_loaded | ✓ PASS | 成功加载 7 个文件夹 |
| create_folder_button_exists | ✓ PASS | 创建文件夹按钮存在 |
| delete_folder_button_exists | ✓ PASS | 删除文件夹按钮存在 |
| folder_click_navigates | ✓ PASS | 点击文件夹后显示文件列表 |
| button_texts_localized | ✗ FAIL | 发现未翻译的按钮文本: `message.common.confirm` |
### 失败用例详情
**测试用例**: button_texts_localized
**状态**: FAIL
**原因**: 页面存在未翻译的 i18n 键值
---
## 3. 服务状态
| 服务 | 状态 |
|------|------|
| 前端服务 (localhost:9090) | ✓ 正常 |
| 后端服务 (localhost:8888) | ✓ 正常 |
| 登录 Token | ✓ 获取成功 |
---
## 4. 建议修复
### 高优先级
1. **i18n 未翻译文本** (`button_texts_localized`)
- 问题: 发现按钮文本 `message.common.confirm` 未翻译
- 影响: 用户界面显示键值而非本地化文本
- 修复: 在 i18n 配置中添加对应翻译
---
## 5. 测试命令
```bash
# 执行完整测试
bash scripts/opencli-test/tool-share-test.sh
# 仅接口测试
bash scripts/opencli-test/tool-share-test.sh --test api
# 仅浏览器测试
bash scripts/opencli-test/tool-share-test.sh --test browser
```
---
**报告生成时间**: 2026-05-24T23:48:00+08:00它的测试结果很准确，确实有个按钮的国际化有问题：
