微信小程序自动化的 AI 新时代：wechat-devtools-mcp 智能方案

FliPPeDround
2 阅读9分钟

FliPPeDround

前端工程师 · 开源爱好者 · 正在找工作

对我的项目感兴趣？查看我的简历 · resume

如果你曾尝试配合 AI 代理（如 Claude、Cursor 编写微信小程序，你大概率会遇到这样的困境：测试工具与 AI 代理集成困难、缺乏统一的自动化框架支持、无法充分利用 AI 的智能分析能力。更糟糕的是，当你想要使用 Claude、Cursor 等 AI 辅助工具来提升测试效率时，却发现没有合适的微信小程序自动化集成方案。

为了解决这些痛点，wechat-devtools-mcp 应运而生。作为一款基于 MCP（Model Context Protocol）协议的微信开发者工具自动化服务，它让小程序的自动化测试与 AI 智能分析变得前所未有的简单和高效。

📖 介绍

📚 官方文档：更多详细的安装和配置说明，请参考 GitHub 仓库

wechat-devtools-mcp 是一个专门为微信小程序设计的 MCP 服务，通过 MCP 协议与 AI 代理（如 Claude、Cursor）深度集成。它基于微信官方的 miniprogram-automator 库，提供了完整的小程序自动化能力，让你能够在 AI 的辅助下，高效地完成小程序的自动化测试和调试。

这个工具的出现，填补了小程序自动化测试与 AI 智能分析之间的空白。它不仅保持了与微信开发者工具的完全兼容性，还充分发挥了 MCP 协议的标准化优势，为开发者提供了一个更智能、更高效的自动化测试解决方案。

🚀 核心功能与技术优势

1. 无缝集成 MCP 协议生态

wechat-devtools-mcp 完全兼容 MCP 协议，可以轻松集成到支持 MCP 的 AI 代理中：

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

2. 全面的页面导航支持

工具提供了丰富的 API 来操作小程序页面导航：

  • 保留当前页面跳转：通过 navigateTo 跳转到非 tabBar 页面
  • 关闭当前页面跳转：通过 redirectTo 关闭当前页面并跳转
  • 返回上一页：通过 navigateBack 返回上一页面或多级页面
  • 重新加载页面：通过 reLaunch 关闭所有页面并重新打开
  • 切换 TabBar：通过 switchTab 跳转到 tabBar 页面
  • 获取页面栈：通过 pageStack 获取当前页面栈列表

3. 强大的元素操作能力

工具提供了完整的元素操作 API，支持各种用户交互模拟：

  • 元素获取：通过 getElement 和 getElements 获取页面元素
  • 用户交互：支持点击、长按、触摸、输入等操作
  • 元素信息：获取元素尺寸、位置、文本、属性、样式等信息
  • 组件方法：调用自定义组件的方法和数据操作

4. 智能日志和异常监听

工具内部实现了智能的日志和异常监听机制：

  • 自动监听控制台日志（console.log、console.info、console.warn、console.error）
  • 自动捕获运行时异常，包括错误名称、堆栈跟踪和发生时间
  • 支持日志和异常的查询和过滤
  • 内置日志数量限制，避免内存溢出

5. 灵活的配置选项

支持丰富的配置选项，满足不同测试场景的需求：

  • 自定义小程序项目路径
  • 微信开发者工具 CLI 路径配置
  • 连接超时时间设置
  • WebSocket 端口配置
  • 用户账号和登录票据支持
  • 项目配置文件覆盖

6. 微信 API 模拟与调用

工具提供了强大的微信 API 操作能力：

  • 调用微信 API：通过 callWxMethod 调用 wx 对象上的任意方法
  • Mock 微信 API：通过 mockWxMethod 模拟 API 返回值，便于测试
  • 恢复微信 API：通过 restoreWxMethod 恢复被 Mock 的方法

🧪 为什么 E2E 测试如此重要

在软件开发中，单元测试固然重要，但 E2E（End-to-End）测试在构建高质量代码过程中扮演着不可替代的角色。

提升代码可靠性

E2E 测试模拟真实用户的使用场景，从用户界面到后端服务的完整流程进行验证。与单元测试不同，E2E 测试能够发现：

  • 页面间的导航和状态传递问题
  • 用户交互与业务逻辑的集成异常
  • 微信 API 调用的错误处理
  • 不同设备和系统版本的兼容性问题

对于微信小程序这种运行在特殊环境中的应用，E2E 测试尤为重要。它能够确保你的小程序在不同设备、不同微信版本、不同网络环境下都能正常运行，避免出现"在开发环境正常，上线后出问题"的尴尬情况。

降低维护成本

虽然编写 E2E 测试 需要投入一定的时间成本，但从长远来看，它能显著降低维护成本：

  • 减少回归测试时间：自动化测试可以在几分钟内完成原本需要数小时的手动测试
  • 快速定位问题：当出现 bug 时，E2E 测试能够快速定位问题所在
  • 增强重构信心：有了完善的测试覆盖，你可以放心地进行代码重构，而不必担心破坏现有功能
  • 文档化业务逻辑：测试代码本身就是最好的业务逻辑文档

提升团队协作效率

E2E 测试作为项目质量的"守门员"，能够：

  • 统一团队对功能实现的理解
  • 减少 code review 时的争议
  • 让新成员快速理解项目功能
  • 建立持续集成的质量保障体系

📦 快速上手

安装依赖

wechat-devtools-mcp 是一个 npm 包，可以直接通过 npx 运行，无需额外安装：

npx -y wechat-devtools-mcp --projectPath=/path/to/your/miniprogram

配置 MCP 服务器

在你的 AI 代理（如 Claude、Cursor）的配置文件中添加 MCP 服务器配置：

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

命令行参数说明

参数类型说明
--projectPathstring小程序项目路径（必填）
--cliPathstring微信开发者工具 CLI 路径
--timeoutnumber连接超时时间（毫秒），默认 30000
--portnumberWebSocket 端口号，默认 9420
--accountstring用户 openid
--ticketstring开发者工具登录票据
--projectConfigstring覆盖 project.config.json 中的配置

使用示例

配置完成后，你就可以在 AI 代理中使用 wechat-devtools-mcp 提供的工具了。以下是一些典型的使用场景：

1. 启动小程序

// 使用 launch 工具启动微信开发者工具并连接小程序
await launch()

2. 页面导航测试

// 跳转到指定页面
await navigateTo({ url: '/pages/detail/detail?id=123' })

// 获取当前页面信息
const currentPage = await currentPage()

// 返回上一页
await navigateBack({ delta: 1 })

3. 元素操作测试

// 获取页面元素
const element = await getElement({ selector: '.submit-button' })

// 点击元素
await tapElement({ selector: '.submit-button' })

// 输入文本
await inputElement({ selector: '#username', value: 'testuser' })

// 获取元素文本
const text = await getElementText({ selector: '.welcome-text' })

4. 页面数据操作

// 获取页面数据
const pageData = await getPageData({ path: 'userInfo.name' })

// 设置页面数据
await setPageData({ data: { count: 10, status: 'active' } })

5. 日志和异常监听

// 获取控制台日志
const logs = await getlogs({ type: 'error', limit: 10 })

// 获取异常信息
const exceptions = await getexceptions({ limit: 5 })

6. 微信 API 调用和 Mock

// 调用微信登录 API
const loginResult = await callWxMethod({ method: 'login', args: [] })

// Mock 用户信息 API
await mockWxMethod({ method: 'getUserInfo', result: { nickName: '测试用户' } })

// 恢复 API
await restoreWxMethod({ method: 'getUserInfo' })

🎯 高级功能详解

截图功能

工具支持对小程序当前页面进行截图，返回 Base64 编码的图片数据：

const screenshot = await screenshot()

系统信息获取

获取小程序运行所在的系统信息，包括手机品牌、型号、屏幕尺寸、操作系统版本、微信版本等：

const systemInfo = await systemInfo()

体验评分

支持微信小程序体验评分（Audits）功能，可以获取性能最佳实践、Accessibility 可访问性等方面的评分和建议：

// 停止体验评分并获取报告
const auditResult = await stopAudits({ path: './audits.json' })

测试账号管理

支持获取微信开发者工具多账号调试中添加的测试用户列表，可用于模拟不同用户登录场景的测试：

const accounts = await testAccounts()

🔧 技术实现细节

wechat-devtools-mcp 的实现基于 MCP 协议和微信官方的 miniprogram-automator 库，核心架构包括以下几个部分：

  1. Automator 类：负责微信开发者工具的启动、连接和生命周期管理
  2. MiniProgram 工具类：提供小程序级别的操作，如页面导航、API 调用、系统信息获取等
  3. Page 工具类：提供页面级别的操作，如元素获取、数据操作、方法调用等
  4. Element 工具类：提供元素级别的操作，如点击、输入、属性获取等

工具内部还实现了智能的状态管理和错误处理机制，确保自动化测试的稳定性和可靠性。

🌟 总结

wechat-devtools-mcp 为微信小程序开发者提供了一个现代化、智能化的自动化测试解决方案。它不仅解决了传统测试工具与 AI 代理集成困难的问题，还充分发挥了 MCP 协议和 miniprogram-automator 的技术优势。

通过完善的 E2E 测试和 AI 智能分析，你可以：

  • 提升代码质量和可靠性
  • 降低长期维护成本
  • 增强团队协作效率
  • 建立持续集成的质量保障体系
  • 充分利用 AI 的智能分析能力

如果你正在开发微信小程序项目，并且想要建立完善的自动化测试体系，wechat-devtools-mcp 绝对值得一试。它会让你的测试工作变得前所未有的简单和高效。

📚 相关资源

最后

wechat-devtools-mcp 是一个免费的开源软件，遵循MIT协议，社区的赞助使其能够有更好的发展。

你的赞助会帮助我更好的维护项目，如果对你有帮助，请考虑赞助一下😊

你的star🌟也是对我的很大鼓励，Github

欢迎反馈问题和提pr共建

avatar
文章
阅读
粉丝