这个网站用于公开记录真实项目、操作过程、问题排查和阶段性成果，希望帮助更多传统测试工程师理解并使用 AI。

关注方向

• 🧪 AI 测试与智能断言
• 🔧 Claude Code、Codex、MCP、Skills 实战
• 🔗 AI 自动化工作流
• 📊 数据质量与校验
• 📝 技术写作与知识沉淀

内容原则

1. 真实项目：所有内容尽量来自真实测试场景
2. 真实结果：展示实际运行结果，包括失败和踩坑过程
3. 真实限制：明确标注当前能力边界，不夸大 AI 效果
4. 可重复执行：代码和配置可以在读者自己的环境中运行

AI 工作流不是单次对话，也不是只生成一段代码，而是能够被重复执行、验证结果并保留记录的完整流程。

当前内容以案例研究、方案设计和原型验证为主，后续将通过真实项目逐步沉淀可复用的工作流模板和实施方法。

AI 测研社是一个专注于 AI 测试工程化的技术实践平台。

"测"代表软件测试与真实测评，"研"代表技术研究与方法沉淀。我们不只介绍工具，更通过真实项目验证 Claude Code、Codex、MCP、Skills 和智能体在软件测试中的实际价值。

品牌价值观

1. 以测求真：通过真实测试验证工具效果
2. 以研求深：研究原理并沉淀可复用方法
3. 实战优先：所有内容尽量来自真实项目
4. 持续进化：记录传统测试向 AI 测试转型的过程

关注领域

• 🧪 测试框架：Playwright、Cypress、Selenium
• 🤖 AI 工具：Claude Code、OpenAI Codex CLI、Cursor
• 🔌 MCP 开发：自定义 MCP Server 与 Skills
• 🏗️ Agent 构建：AI Testing Agent 设计与实现
• 📊 CI/CD：GitHub Actions、Jenkins

上一篇文章我们聊了 为什么要学 AI 测试，这篇就动手实践——安装 Claude Code CLI 并配置 Playwright MCP Server。

完成本文后，你将能用自然语言驱动 Playwright 完成 Web 自动化测试。

环境准备

系统要求

• Node.js 18+ （推荐 20 LTS）
• npm 或 pnpm
• Git
• VS Code（可选，但强烈推荐用于编辑配置文件）

检查环境

node --version
# 应输出 v18.x 或 v20.x

npm --version
# 应输出 9.x 或 10.x

第一步：安装 Playwright MCP Server

Playwright MCP Server 是微软官方提供的 MCP 服务器，让 AI 模型能直接控制浏览器。

# 全局安装 Playwright MCP Server
npm install -g @anthropic/mcp-server-playwright

# 安装 Playwright 浏览器
npx playwright install chromium

验证安装

npx @anthropic/mcp-server-playwright --version

如果输出版本号，说明安装成功。

第二步：配置 Claude Code

创建配置文件

在用户目录下创建 .claude.json 配置文件：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"],
      "env": {}
    }
  }
}

验证 MCP 连接

启动 Claude Code 后，检查 MCP 工具是否已加载：

claude

在交互界面中输入 /mcp，应该能看到 playwright 服务器及它提供的工具列表：

• browser_navigate - 导航到 URL
• browser_click - 点击元素
• browser_type - 输入文本
• browser_screenshot - 截图
• browser_evaluate - 执行 JavaScript

第三步：第一个 AI 驱动的测试

测试目标

用自然语言让 Claude Code + Playwright 完成以下操作：

1. 打开百度首页
2. 搜索 "AI 测试"
3. 验证搜索结果不为空
4. 截图保存

执行

在 Claude Code 中输入：

请使用 Playwright 完成以下测试：
1. 导航到 https://www.baidu.com
2. 在搜索框输入 "AI 测试"
3. 点击搜索按钮
4. 等待结果加载
5. 截图保存为 baidu-search-result.png
6. 告诉我搜索结果的标题列表

预期结果

Claude Code 会自动：

1. 启动浏览器
2. 执行每个步骤
3. 截图并保存
4. 返回搜索结果文本

进阶：编写 MCP 测试配置

将浏览器测试封装到项目的 MCP 配置中：

// .mcp.json（项目根目录）
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

常见问题

Q: npx playwright install 报错？

确保网络环境正常，或使用国内镜像：

set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/
npx playwright install chromium

Q: Claude Code 连不上 MCP Server？

检查 .claude.json 路径是否正确，以及 MCP Server 是否成功安装：

npx @anthropic/mcp-server-playwright --help

Q: 浏览器启动失败？

可能是缺少系统依赖。Linux 用户请运行：

npx playwright install-deps chromium

小结

完成本文的操作后，你已经：

• ✅ 安装了 Playwright MCP Server
• ✅ 配置了 Claude Code 的 MCP 连接
• ✅ 用自然语言完成了第一个 AI 驱动的浏览器测试
• ✅ 了解了常见问题的解决方法

下一步： 尝试用 Claude Code + Playwright 测试你自己的项目，体验 AI 测试的实际效率提升。

每一个场景都围绕可运行、可校验、可重复的目标展开，不限于某一种工具。

[!summary] 最终成果
使用 VuePress 2 + VuePress Theme Hope 创建中文 AI 测试博客，将源码保存到 GitHub，并通过 Cloudflare Pages 免费部署。

当前网站：https://ai-test-blog.pages.dev

一、整体流程

本地创建 VuePress 博客
→ 使用 Claude Code 修改内容和配置
→ 本地预览并执行生产构建
→ Git 提交并推送到 GitHub
→ Cloudflare Pages 自动部署
→ 获得 pages.dev 公开访问地址

各平台的作用：

| 工具 | 作用 |
|

Tencent COS for Imgur 是一款由 bobostudio 开发的 Obsidian 插件。它可以把粘贴或拖入笔记的图片自动上传到腾讯云 COS，并将本地图片引用替换为云端链接。

本文从零完成一次配置，并在最后验证图片能否正常上传。

一、它能解决什么问题

配置完成后，在 Obsidian 中复制粘贴或拖入图片，插件会自动完成：

1. 将图片上传到腾讯云 COS；
2. 生成图片的云端访问地址；
3. 把地址插入当前 Markdown 笔记；
4. 在图片管理面板中统一查看和删除图片。

插件还支持：

• PNG、JPG、JPEG、GIF、SVG、WebP 等图片格式；
• PDF、音视频、Office 文档、ZIP 等多格式文件；
• 自定义 COS 存储路径；
• 本地笔记和在线笔记备份；
• 图片链接有效期设置；
• 拖拽调整本地或在线图片的显示大小；
• 将笔记中的外链图片同步到 COS。

[!tip]
如果笔记需要发布为博客，使用自己的 COS 比依赖第三方公共图床更可控；如果笔记含有私人截图，则要谨慎选择存储桶权限。

二、开始前需要准备什么

你需要准备：

• 一个腾讯云账号；
• 已开通的对象存储 COS；
• 一个 COS 存储桶；
• 腾讯云 API 的 SecretId 和 SecretKey；
• 桌面端或移动端 Obsidian。

整个配置过程可以概括为：

创建 COS 存储桶
      ↓
获取 SecretId / SecretKey
      ↓
配置存储桶 CORS
      ↓
安装并配置 Obsidian 插件
      ↓
测试连接并粘贴图片

三、创建 COS 存储桶

进入腾讯云 COS 控制台，创建一个存储桶。创建时重点记住下面两个参数：

| 参数 | 示例 | 说明 |
|

完成配置以后，日常更新博客只需要：

本地写文章 → Git 提交并推送 → GitHub Actions 构建 → 自动部署 → 网站更新

一、最终实现效果

flowchart LR
    A["本地 PyCharm<br/>编写 Markdown"] --> B["Git 提交"]
    B --> C["推送到 GitHub<br/>main 分支"]
    C --> D["GitHub Actions<br/>安装依赖并构建"]
    D --> E["SSH + rsync<br/>上传静态文件"]
    E --> F["1Panel / OpenResty<br/>提供网站访问"]
    F --> G["ceyanshe.com<br/>展示最新内容"]

自动化链路跑通后，不再需要手动执行以下工作：

• 手动上传文章到服务器。
• 手动执行 VuePress 构建。
• 手动复制 dist 文件。
• 每次更新都登录 1Panel。

二、整体环境

| 项目 | 当前使用方案 |
|

本文记录我从 WordPress 转向 VuePress，并使用 GitHub Actions 将网站自动部署到阿里云服务器的完整过程。最终实现的效果是：本地修改 Markdown，推送到 GitHub，网站自动构建并发布，全程不需要手动上传文件。

一、为什么要搭建 AI 测研社

我希望建立一个长期更新的个人技术网站，用来记录和分享以下内容：

• AI 测试工程化
• Claude Code、Codex、MCP 和 Skills 实战
• n8n AI 自动化工作流
• PPT 与视频自动化
• 测试工程师的成长与转型

网站不只是一个博客，也是我后续沉淀项目案例、建立个人品牌和验证商业化方向的基础。

我最初尝试过 WordPress。WordPress 的后台编辑和插件生态很方便，但对于以 Markdown、代码和技术文档为主的网站，我更希望获得以下能力：

• 文章直接以 Markdown 文件保存
• 可以使用 Git 管理所有修改记录
• 页面是静态文件，服务器压力更小
• 本地可以使用 Obsidian、Typora、VS Code 或 Claude Code 写作
• 推送代码后能够自动构建和部署

因此，我最终选择了：

VuePress + GitHub + GitHub Actions + 阿里云 + 1Panel/OpenResty

二、最终技术架构

整个发布流程如下：

flowchart LR
    A["本地 Markdown"] --> B["GitHub 仓库"]
    B --> C["GitHub Actions 构建"]
    C --> D["阿里云静态网站"]

各部分的作用如下：

| 组件 | 作用 |
|

这一次，我尝试把测试任务直接交给 Claude Code，让它通过 Playwright MCP 操作真实浏览器，完成页面识别、登录和商品信息获取。

本文记录完整实践过程，包括：

• 如何配置并验证 Playwright MCP
• 如何把测试需求描述给 Claude Code
• Claude Code 如何识别页面元素
• 如何完成 SauceDemo 登录测试
• 如何将一次 AI 操作沉淀成可重复执行的自动化脚本
• 实践过程中遇到的问题

一、这次要完成什么任务

测试网站使用公开的自动化练习网站：

https://www.saucedemo.com/

本次目标是验证下面这条业务链路：

打开登录页
→ 输入用户名和密码
→ 点击登录
→ 进入商品列表
→ 验证页面加载成功
→ 获取商品名称和价格
→ 输出测试结果

测试账号：

用户名：standard_user
密码：不要在文章或截图中公开展示

注意：SauceDemo 是公开演示网站，但真实项目中的账号、密码、Token 等敏感数据都应该使用环境变量保存，不能直接写进代码或提交到 GitHub。

二、我的实践环境

本次使用的主要工具：

| 工具 | 作用 |
|

如果你是一名传统软件测试工程师，每天的工作是写测试用例、执行回归测试、维护自动化脚本——你可能会问：AI 测试跟我有什么关系？

答案是：关系很大，而且比你想象的更紧迫。

这篇文章将从一个传统测试工程师的视角，聊聊为什么现在就应该开始学习 AI 测试。

测试行业的现状

传统测试的痛点

1. 重复劳动占比高：大量的回归测试、冒烟测试仍然依赖手工执行
2. 用例维护成本高：需求变更后，测试用例和自动化脚本的更新往往滞后
3. 覆盖度难以保证：靠人工分析很难做到全面覆盖，边界 case 容易被遗漏
4. 效率瓶颈明显：测试执行速度受限于人力和环境资源

AI 带来的变革

AI 正在从以下几个方面改变测试：

| 领域 | 传统方式 | AI 增强方式 |
|

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划

前面两篇文章我们分别讨论了：

• 为什么要学 AI 测试
• Claude Code + Playwright MCP 安装与验证

现在，是时候更进一步了——创建一个能独立完成测试任务的 AI Testing Agent。

什么是 AI Testing Agent？

AI Testing Agent 是一个能够：

1. 🧠 理解测试需求——解析自然语言描述的测试场景
2. 🔧 自主选择工具——决定使用哪个测试框架、哪个浏览器
3. 📝 生成测试代码——编写并执行测试脚本
4. 📊 分析测试结果——判断通过/失败，给出修复建议
5. 🔄 迭代优化——根据反馈不断改进测试策略

简单来说，它是一个能独立思考和行动的测试工程师数字分身。

Agent 架构设计

整体架构

graph TB
    User[用户输入测试需求] --> Orchestrator[Agent 编排器]
    Orchestrator --> Planner[测试计划器]
    Orchestrator --> Executor[测试执行器]
    Orchestrator --> Analyzer[结果分析器]
    
    Planner --> ToolRegistry[工具注册中心]
    Executor --> ToolRegistry
    Analyzer --> ToolRegistry
    
    ToolRegistry --> PlaywrightMCP[Playwright MCP]
    ToolRegistry --> APITool[API 测试工具]
    ToolRegistry --> AssertTool[断言工具]
    ToolRegistry --> ReportTool[报告工具]
    
    Analyzer --> Report[测试报告]

核心组件

1. Agent 编排器（Orchestrator）

负责接收用户指令，协调各组件工作：

用户输入 → 解析意图 → 制定计划 → 分配任务 → 汇总结果

2. 测试计划器（Planner）

根据需求生成测试策略和用例清单：

• 分析测试范围
• 确定测试类型（功能/性能/安全）
• 生成测试用例概要

3. 测试执行器（Executor）

调用具体的 MCP 工具执行测试：

• 浏览器操作（通过 Playwright MCP）
• API 调用
• 断言验证
• 截图/录屏

4. 结果分析器（Analyzer）

对测试结果进行分析：

• 判断通过/失败
• 分析失败原因
• 生成修复建议
• 输出测试报告

实战：构建第一个 Agent

项目结构

ai-testing-agent/
├── src/
│   ├── agent/
│   │   ├── orchestrator.ts    # 编排器
│   │   ├── planner.ts         # 计划器
│   │   ├── executor.ts        # 执行器
│   │   └── analyzer.ts        # 分析器
│   ├── tools/
│   │   ├── registry.ts        # 工具注册
│   │   ├── playwright.ts      # Playwright 工具
│   │   ├── api.ts             # API 工具
│   │   └── assert.ts         # 断言工具
│   ├── prompts/
│   │   ├── planner.md         # 计划器 Prompt
│   │   ├── executor.md        # 执行器 Prompt
│   │   └── analyzer.md        # 分析器 Prompt
│   └── index.ts               # 入口
├── tests/
│   └── agent.test.ts
├── package.json
└── tsconfig.json

Step 1: 工具注册中心

// src/tools/registry.ts
interface Tool {
  name: string;
  description: string;
  execute: (params: Record<string, any>) => Promise<ToolResult>;
}

class ToolRegistry {
  private tools: Map<string, Tool> = new Map();

  register(tool: Tool): void {
    this.tools.set(tool.name, tool);
  }

  getToolNames(): string[] {
    return Array.from(this.tools.keys());
  }

  getToolDescription(): string {
    return Array.from(this.tools.values())
      .map(t => `- ${t.name}: ${t.description}`)
      .join('\n');
  }

  async execute(name: string, params: Record<string, any>): Promise<ToolResult> {
    const tool = this.tools.get(name);
    if (!tool) throw new Error(`Tool "${name}" not found`);
    return tool.execute(params);
  }
}

Step 2: 编排器实现

// src/agent/orchestrator.ts
interface TaskRequest {
  description: string;       // 测试需求描述
  target: string;            // 测试目标 URL
  browser?: string;          // 浏览器类型
  timeout?: number;          // 超时时间
}

interface TaskResult {
  success: boolean;
  testCases: TestCase[];
  executionResults: ExecutionResult[];
  report: TestReport;
}

class Orchestrator {
  private planner: Planner;
  private executor: Executor;
  private analyzer: Analyzer;

  constructor() {
    this.planner = new Planner();
    this.executor = new Executor();
    this.analyzer = new Analyzer();
  }

  async executeTask(request: TaskRequest): Promise<TaskResult> {
    console.log(`🚀 开始执行测试任务: ${request.description}`);

    // 1. 制定测试计划
    console.log('📋 阶段 1/3: 制定测试计划...');
    const plan = await this.planner.createPlan(request);

    // 2. 执行测试用例
    console.log(`🔄 阶段 2/3: 执行 ${plan.testCases.length} 个测试用例...`);
    const executionResults = await this.executor.execute(plan.testCases);

    // 3. 分析结果并生成报告
    console.log('📊 阶段 3/3: 分析结果并生成报告...');
    const report = await this.analyzer.analyze(executionResults);

    return {
      success: report.passed === report.total,
      testCases: plan.testCases,
      executionResults,
      report,
    };
  }
}

Step 3: 测试计划器 Prompt

<!-- src/prompts/planner.md -->
你是一个测试计划专家 Agent。

## 任务
根据用户提供的测试需求，制定详细的测试计划。

## 输入
- 需求描述：{{description}}
- 测试目标：{{target}}

## 输出要求
1. 列出所有需要测试的场景（至少 5 个）
2. 为每个场景编写测试步骤
3. 指定每个场景的预期结果
4. 标注优先级（P0/P1/P2）

## 输出格式
```json
{
  "testCases": [
    {
      "id": "TC-001",
      "title": "...",
      "priority": "P0",
      "steps": ["...", "..."],
      "expectedResult": "..."
    }
  ]
}

### Step 4: 执行器

```typescript
// src/agent/executor.ts
class Executor {
  async execute(testCases: TestCase[]): Promise<ExecutionResult[]> {
    const results: ExecutionResult[] = [];

    for (const tc of testCases) {
      console.log(`  ⚡ 执行: ${tc.title}`);
      
      try {
        const startTime = Date.now();
        
        // 逐步骤执行
        for (const step of tc.steps) {
          await this.executeStep(step);
        }
        
        const duration = Date.now() - startTime;
        
        results.push({
          testCaseId: tc.id,
          status: 'passed',
          duration,
          screenshots: [],
        });
        
        console.log(`  ✅ 通过: ${tc.title} (${duration}ms)`);
      } catch (error) {
        results.push({
          testCaseId: tc.id,
          status: 'failed',
          error: (error as Error).message,
          screenshots: [],
        });
        
        console.log(`  ❌ 失败: ${tc.title}`);
      }
    }
    
    return results;
  }
}

运行你的第一个 Agent

# 安装依赖
npm install

# 编译
npm run build

# 运行 Agent
npm start -- \
  --description "测试百度搜索功能" \
  --target "https://www.baidu.com"

预期输出

🚀 开始执行测试任务: 测试百度搜索功能
📋 阶段 1/3: 制定测试计划...
  生成了 8 个测试用例

🔄 阶段 2/3: 执行 8 个测试用例...
  ⚡ 执行: TC-001 打开百度首页
  ✅ 通过: TC-001 (1234ms)
  ⚡ 执行: TC-002 搜索关键词
  ✅ 通过: TC-002 (2345ms)
  ...

📊 阶段 3/3: 分析结果并生成报告...
  总计: 8 | 通过: 7 | 失败: 1 | 通过率: 87.5%

进阶方向

掌握了基础 Agent 后，可以往以下方向演进：

1. 多 Agent 协作

graph LR
    Manager[管理 Agent] --> WebAgent[Web 测试 Agent]
    Manager --> APIAgent[API 测试 Agent]
    Manager --> PerfAgent[性能测试 Agent]
    Manager --> SecAgent[安全测试 Agent]

2. 持续学习

• 记录每次测试结果到知识库
• 从失败中学习常见错误模式
• 自动优化测试策略

3. CI/CD 集成

# .github/workflows/ai-test.yml
name: AI Testing Agent
on: [pull_request]
jobs:
  ai-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm start -- --mode ci --target ${{ github.event.pull_request.html_url }}

小结

本文我们从架构设计到代码实现，完整走了一遍 AI Testing Agent 的创建过程。核心要点：

1. Agent = 编排器 + 计划器 + 执行器 + 分析器
2. MCP 工具是 Agent 的手和脚——工具越丰富，Agent 能力越强
3. 从简单开始，逐步迭代——先让 Agent 跑通一个场景，再扩展
4. Prompt 质量决定 Agent 上限——花时间打磨每个组件的 Prompt

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划

本文正在根据项目实际开发过程整理，后续持续补充。

一、为什么要做

二、最终实现效果

三、环境和技术栈

四、实现思路

五、项目目录

六、操作步骤

七、关键代码

八、测试与验证

九、遇到的问题及解决方法

十、最终总结

十一、下一阶段计划