使用说明

人工智能周-测试自动化原型

探索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 build

2.启动启用CDP的通话时间

# macOS
open /Applications/airtime.app --args --remote-debugging-port=9222 --user-data-dir=remote-profile

3.使用克劳德代码

这 .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 server

mmhmm混合型

CEF桌面应用程序，具有本机（C++/Objective-C/Swift）和web层。看 mmhmm-hybrid/README.md 获取构建说明。

主要学习内容

MCP+CDP功能强大 -自定义MCP服务器可以将AI助手连接到任何基于Chrome的应用程序
CEF应用程序是可测试的 -相同的CDP协议适用于Electron、CEF和Chrome
互动发展 -Claude可以实时探索、测试和修改应用程序
人工智能辅助测试写作 -描述要测试的内容，Claude生成并运行测试