人工智能周-测试自动化原型
探索Airtime桌面应用程序的人工智能辅助测试自动化。此存储库演示了使用Claude Code和自定义MCP工具与CEF（Chromium Embedded Framework）应用程序交互、测试和开发功能。
新增内容（AI周新增内容）
测试自动化和人工智能工具
| 目录 | 描述 |
|---|---|
cef-mcp/ | 自定义MCP服务器，使Claude能够通过Chrome DevTools协议与正在运行的Airtime应用程序进行交互 |
tests/ | 基于CDP的烟雾测试套件，涵盖核心摄像头功能 |
CLAUDE.md | Claude Code的项目上下文文件 |
.mcp.json | MCP服务器配置 |
功能开发
| 文件 | 描述 |
|---|---|
LUT_IMPLEMENTATION_PLAN.md | 专业的色彩分级效果（LUT）系统设计-支持.cube、.3dl、.csp、.seek格式，并支持WebGL着色器渲染 |
TEST_RESTRUCTURE_PLAN.md | 具有特定功能页面对象的全面测试架构计划 |
______________________________________________________________________
运作原理
Claude Code通过CDP（Chrome DevTools协议）连接到正在运行的Airtime桌面应用程序，实现交互式测试和开发：
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Claude Code │ MCP │ cef-mcp │ CDP │ Airtime App │
│ (AI Assistant) │ ──────▶ │ (Node.js) │ ──────▶ │ (CEF/Chromium) │
└─────────────────┘ └─────────────────┘ └─────────────────┘- 启动启用CDP的通话时间（端口9222）
- Claude Code通过cef-mcp服务器自动连接
- Claude可以评估JavaScript、检查UI、单击元素、检查状态和运行测试
______________________________________________________________________
存储库结构
├── cef-mcp/ # MCP server for CDP interaction (NEW)
│ ├── src/
│ │ ├── index.ts # Server entry point
│ │ ├── cdp-client.ts # CDP connection management
│ │ └── tools/ # MCP tool implementations
│ └── package.json
│
├── tests/ # CDP smoke tests (NEW)
│ ├── smoke-tests.js # 10 test suites, 30+ test steps
│ ├── helpers.js # Reusable test utilities
│ ├── TEST_PLAN.md # Test coverage checklist
│ └── run-smoke-tests.md # Ready-to-run test snippets
│
├── CLAUDE.md # Project context for Claude (NEW)
├── .mcp.json # MCP server config (NEW)
├── LUT_IMPLEMENTATION_PLAN.md # Color grading feature design (NEW)
├── TEST_RESTRUCTURE_PLAN.md # Test architecture plan (NEW)
│
├── mmhmm-camera-development/ # Web UI layer (TypeScript/JS)
│ ├── teleport/ # Camera page source
│ └── tests/ # Playwright browser tests
│
└── mmhmm-hybrid/ # Desktop app (CEF + native)
├── mac/ # macOS native code
└── win/ # Windows native code______________________________________________________________________
入门指南
先决条件
- Node.js 18+
- 已安装Airtime桌面应用程序
1.构建MCP服务器
cd cef-mcp
npm install
npm run build2.启动启用CDP的通话时间
# macOS
open /Applications/airtime.app --args --remote-debugging-port=9222 --user-data-dir=remote-profile3.使用克劳德代码
这 .mcp.json config自动注册cef-mcp服务器。Claude Code在此目录中工作时可以访问CDP工具。
______________________________________________________________________
MCP工具可用
连接后，Claude可以访问这些工具与Airtime应用程序进行交互：
| 工具 | 说明 |
|---|---|
cdp_connect | 连接到CDP端点（默认端口9222） |
cdp_disconnect | 断开与当前会话的连接 |
cdp_status | 获取连接状态和可用页面 |
cdp_list_pages | 列出所有可用页面/目标 |
cdp_select_page | 按索引或标题模式选择页面 |
cdp_evaluate | 执行JavaScript并返回结果 |
cdp_snapshot | 获取可访问性树快照 |
cdp_get_logs | 检索收集到的控制台消息 |
cdp_clear_logs | 清除收集的日志 |
示例用法
# Connect to the app
> cdp_connect
# Select the Camera page
> cdp_select_page "Camera"
# Check if Looks feature is enabled
> cdp_evaluate "document.querySelector('[data-action=\"toggle-looks-on\"]')?.classList.contains('active')"
# Get all available action buttons
> cdp_evaluate "Array.from(document.querySelectorAll('[data-action]')).map(e => e.dataset.action)"______________________________________________________________________
运行烟雾测试
这 tests/ 目录包含“摄像头”页面的全面烟雾测试。测试被定义为具有可通过以下方式执行的步骤的JavaScript对象 cdp_evaluate.
测试覆盖率
- 页面加载验证 -存在核心UI元素
- 侧边栏小部件切换 -小部件打开/关闭行为
- 外观特征 -外观启用/禁用，选择
- 名称标签功能 -名称标签配置
- 远离模式 -离开屏幕功能
- 增强功能 -视频增强控制
- LUT/颜色分级 -色彩效果应用
- 边光 -边缘照明效果
- 虚拟摄像机 -输出状态验证
- 错误处理 -控制台错误监控
与Claude一起运行测试
让克劳德进行烟雾测试：
"Run the smoke tests for the Camera page"
"Check if the Looks feature is working"
"Verify all toolbar buttons are present"Claude将通过CDP连接，执行测试步骤并报告结果。
______________________________________________________________________
现有项目
mmhmm相机开发
Camera页面的Web UI源代码和Playwright测试：
cd mmhmm-camera-development
npm install
npm test # Run Playwright tests
npm run dev # Start dev servermmhmm混合型
CEF桌面应用程序，具有本机（C++/Objective-C/Swift）和web层。看 mmhmm-hybrid/README.md 获取构建说明。
______________________________________________________________________
主要学习内容
- MCP+CDP功能强大 -自定义MCP服务器可以将AI助手连接到任何基于Chrome的应用程序
- CEF应用程序是可测试的 -相同的CDP协议适用于Electron、CEF和Chrome
- 互动发展 -Claude可以实时探索、测试和修改应用程序
- 人工智能辅助测试写作 -描述要测试的内容，Claude生成并运行测试