测试工程师必学!用 AI Skill 实现自动化测试

     简单来说，"Skill 就是教 AI 完成特定任务的[说明书]"。就像你手机里的 App 一样，每个 Skill 都专注于解决一类问题：

-  文档处理 Skill——自动创建 Word、PDF、PPT

-  测试 Skill——自动生成测试用例、执行自动化测试

-  设计 Skill——从 Figma 生成代码、对比设计稿 

对测试工程师来说，最有价值的是"测试类 Skill"。

一、测试用例自动生成

传统方式

1. 阅读需求文档（30 分钟）

2. 分析测试点（60 分钟）

3. 编写测试用例（90 分钟）

4. 评审和修改（60 分钟）

总计：约 4 小时

使用 Skill 后：

1. 上传需求文档/Figma 链接（2 分钟）

2. AI 自动生成测试用例（5 分钟）

3. 人工review 和调整（15 分钟）

总计：约 22 分钟

效率提升：80%+

二、视觉回归测试 

     这是我最喜欢的功能——Figma 设计稿对比测试

 工作流程： 

 1.提供 Figma 设计稿链接

 2.AI 自动对比设计稿和实际页面

 3.生成视觉差异报告（颜色、字体、间距等）

     再也不用担心 UI 还原度问题了！此功能目前已在开发团队广泛应用，前端开发可以根据Figma的UI稿直接生成

经过调研，我整理了以下值得关注的测试 Skill：

功能:

基于 Playwright 的 Web 应用测试工具包 

亮点:

-  内置服务器管理脚本，一键启动测试环境

-  提供[侦察 - 行动]模式，自动发现页面元素

-  包含多个示例代码，开箱即用

 适合场景：Web 应用自动化测试

功能：

用自然语言控制 Chrome 浏览器 

亮点：

-  56+ 专用工具，覆盖各种浏览器操作

-  支持 Figma 设计稿对比

-  可录制操作场景，导出为测试脚本

安装命令： 

claude mcp add chrometools -- npx chrometools-mcp 

适合场景：不想写代码的测试工程师

功能：

测试专用 Skill 目录 

亮点：

-  汇集多个测试相关 Skill

-  涵盖 API 测试、性能测试、安全测试等 

适合场景：寻找特定测试能力的工程师

这是本文的重头戏——如何从 Figma 设计稿自动生成测试用例。

第一步：安装

在 Claude Code 中运行：

claude mcp add chrometools -- npx chrometools-mcp

第二步：获取 Figma Toke

 1.登录 Figma

 2.进入设置 → Security 

 3. 生成 Personal Access Token 

 PS：需要figma的收费账号 

第三步：开始测试

对 AI 说： 

请对比以下 Figma 设计稿和实际页面的差异：- Figma 文件：https://www.figma.com/file/文件- 实际页面：http://localhost:3000 检查布局、颜色、字体、间距是否一致

 AI 会自动生成测试代码和对比报告。

如果你开发的是 Flutter 应用，这个插件更适合你。 

功能：

- 从 Figma 生成 Flutter 组件测试

- 自动生成 Golden Test

- 设计稿与实现对比验证 

工作流程： 

 1.在 Cursor 中启用插件2

 2.配置 Figma MCP 和 Dart MCP 

 3.运行 generate-flutter-tests 

 4.获得自动生成的测试用例

如果你想创建自己的测试 Skill，可以参考以下流程： 

第一步：定义 Skill 目标 

明确你的 Skill 要解决什么问题：

- 技能名称：`test-case-from-figma`

- 触发条件：用户提到「从 Figma 生成测试」

- 输出：测试用例文档 + 自动化脚本 

第二步：编写 SKILL.md 

Skill 的核心是一个 SKILL.md 文件，包含：

name: test-case-from-figma description: 从 Figma 设计稿生成测试用例# Figma 测试用例生成器 ## 工作流程  1.获取 Figma 资源  2.分析设计稿属性  3.生成测试断言  4.输出测试代码 ## 示例  [这里写使用示例] 

第三步：测试和优化 

使用 `skill-creator` 工具： 

 1.创建 5-10 个测试用例  

 2.运行评估 

 3.根据结果迭代优化

经过这段时间的研究和实践，我有以下几点建议分享给大家：

1. 先使用，再创造

   不要一上来就自己写 Skill。先去(https://skills.sh/ ) 和 GitHub 上看看有没有现成的，站在巨人的肩膀上。

2. 从小处着手

   不要想着一口气做个[全能测试 Skill]。从一个具体场景开始，比如[从 Figma 生成登录页测试用例]，做好做精。

3. 重视评估环节 

Skill 写完后，一定要建立测试用例集。每次修改后跑一遍，确保没有引入回归问题。 

4. 关注 Figma MCP 

这是我看好方向。设计和测试的打通，会极大提升 UI 测试效率。建议尽早了解和使用相关工具。

资源汇总

官方文档：

- [Anthropic Skills 文档] https://support.claude.com/en/articles/12512180-using-skills-in-claude

- [Figma 开发者文档] https://www.figma.com/developers

GitHub 仓库：

- [anthropics/skills] https://github.com/anthropics/skills

- [chrometools-mcp] https://github.com/docentovich/chrometools-mcp

- [awesome-claude-skills] https://github.com/ComposioHQ/awesome-claude-skills

技能市场：

- [skills.sh] https://skills.sh/

- [clawhub.ai]  https://clawhub.ai/