AI快速生成基于Midscene.js的UI自动化测试用例
作者：微信文章之前我写了一些Midscene.js的教程，都是需要测试人员手动编写自动化测试脚本的，很多同学觉得还是不够高效，问有没有更智能的方法，让AI直接生成自动化测试用例？当然有！这篇文章就来分享一下：在AI IDE中借助多模态推理大模型的能力快速生成用Midscene.js+Playwright的自动化测试用例。
让大模型生成UI自动化测试用例的原理不难，主要有2个关键点：
1. 让AI知道要“测什么”，这一步需要向AI提供界面截图以及现有的手工测试用例（或者详细的需求文档）。对于简单直接的需求，也可以根据界面截图让AI生成手工测试用例。这一步需要使用具备多模态能力的推理大模型，笔者推荐使用Cursor中的Claude系列模型，因为它们同时具备多模态理解和强大的推理以及编码能力。
2. 让AI知道“怎么测”，也就是让AI了解Midscene.js的API用法，才能把手工测试用例转换成UI自动化测试用例。这一步不能依赖于大模型预训练阶段学到的知识（因为Midscene.js是一个比较新的框架，很多大模型可能没有见过这个框架的用法），所以应该把Midscene.js官方文档作为外部知识喂给大模型。为了解决这个问题，Midscene.js官方专门提供了LLMs.txt文档，其作用就是让 Cursor、Windstatic、GitHub Copilot、ChatGPT 和 Claude 等工具理解 Midscene.js。
顺便给大家科普一下，什么是LLMs.txt？
LLMs.txt 是一种专为大模型设计的标准化文件，类似于传统的 robots.txt，但功能更侧重于优化AI对网站内容的理解和抓取权限管理。它的主要功能在于：
● 为AI提供官方技术文档：如Vue、Vite等项目的API参考，提升AI回答准确性。
● 电商SEO：作为一种内容曝光的形式，增加AI推荐机会。
比起把官方网站的整个HTML页面喂给AI，使用LLMs.txt 的优势在于：
• 内容控制：明确控制哪些数据可被AI学习（如产品介绍），哪些需保护（如后台路径或隐私信息）。
• 结构化优化：部分版本（如 /llms-full.txt）提供Markdown格式的完整文档，帮助AI快速理解技术API、指南等复杂内容。
• 效率提升：简化AI处理流程，避免解析冗余HTML元素，节省上下文窗口资源。
下面使用Cursor 中的 Claude-4-sonnet展示具体的实操流程：
1. 打开一个Midscene.js的demo项目，项目里需要包含Midscene自动化测试运行所需的基础文件，项目结构如下图所示）
2. 获取llms-full.txt 文档，下载后保存到项目根目录下，命名为llms.md。
官网下载链接：https://midscenejs.com/zh/llm-txt
这个文档长这样（包括了Midscene.js官方文档中所有的关键信息）：
3. 在项目中创建一个manual_cases目录用于添加手工测试用例。本文的待测功能选择ebay网站的搜索功能，这个功能比较简单，可以直接让AI根据界面生成测试用例。需要给待测页面截图：
然后把界面截图+以下提示词一起输入给Claude：
请参考ebay搜索页面截图，为这个界面编写全面的手工测试用例，在manual_cases这个文件夹下生成一份测试用例名为test_case_description.md
Claude生成的测试用例覆盖面是比较全的，格式也很规范：
4. 让大模型根据llms.txt中的API规范，把手工测试用例转换成自动化测试脚本。这里我挑选了test_case_description.md中的2.1搜索框功能，让Claude同时参考llms.md、界面截图以及test_case_description.md这三份文件，把手工用例转换成Midscene.js的自动化脚本：
### 角色
你是一名擅长使用Midscene.js和Playwright的自动化测试工程师
### 任务
测试ebay网站（www.ebay.com）的首页搜索功能
### 要求
1.你必须严格按照llms.md中的规范使用规范使用Midscene.js和Playwright。请特别关注文档中# Integrate with Playwright这一部分
2.你必须严格参考给定的界面截图和test_case_description.md的手工用例来编写自动化测试用例
3.自动化测试所需的项目环境已经搭好（包括配置文件、项目依赖等），你只需在e2e文件夹下生成test1.spec.ts即可
### 当前目标
请编写 2. 搜索功能测试中2.1 搜索框功能测试对应的自动化测试用例
Claude-4-sonnet经过思考后正确地完成了任务，期间编写的代码出现了linter error语法错误,它机智地自己发现了并自动修复了问题：
最终生成了一份完整的测试用例：
import { expect } from"@playwright/test";import { test } from"./fixture";test.describe("eBay搜索功能测试", () => {test.beforeEach(async ({ page }) => {// 设置视口大小await page.setViewportSize({ width: 1280, height: 800 });// 导航到eBay首页await page.goto("https://www.ebay.com");await page.waitForLoadState("networkidle");});test("TC_SEARCH_001: 验证搜索框基本功能", async ({ai,aiQuery,aiAssert,aiInput,aiTap,aiWaitFor}) => {// 测试步骤1: 在搜索框中输入"鞋子"awaitaiInput('鞋子', 'search box');// 验证搜索框正常接受输入const searchValue = await aiQuery<string>('string, the value in the search box');expect(searchValue).toBe('鞋子');// 测试步骤2: 选择搜索分类（当前为"All Categories"）// 验证分类选择器正常工作awaitaiAssert('There is a category dropdown showing "All Categories"');// 测试步骤3: 点击"Search"按钮awaitaiTap('Search button');// 等待搜索结果页面加载awaitaiWaitFor('search results are displayed', { timeoutMs: 10000 });// 预期结果验证: 搜索结果正确显示awaitaiAssert('search results for 鞋子 are displayed on the page');// 验证搜索结果统计信息显示awaitaiAssert('there is search result count information showing results for 鞋子');// 验证页面显示了商品列表const searchResults = await aiQuery<Array<{title: string, price: string}>>('{title: string, price: string}[], extract product titles and prices from search results');expect(searchResults).toBeDefined();expect(searchResults.length).toBeGreaterThan(0);console.log(`找到 ${searchResults.length} 个搜索结果`);console.log('搜索结果示例:', searchResults.slice(0, 3));});});
5. 生成用例之后用以下命令执行（如果没有安装node modules的话还需要先执行npm install）:
npx playwright test ./test1.spec.ts --headed
用例执行一次成功了（🎉撒花鼓掌👏！）
看到上面的步骤，也许你会想，为什么不能干脆跳过第3步生成手工测试用例的步骤，直接让大模型根据界面截图生成自动化测试用例呢？这样我试过，第一是生成的测试用例不够全面，第二是生成的用例不完全正确，一次执行不成功，还需要调试。根本问题在于，这种一步到位的要求，会让大模型在一个任务中同时处理界面理解、测试设计和自动化实现这三个高度不同的关注点，导致各关注点的处理都不够专业和深入。因此，根据软件工程的“separation of concerns”（关注点隔离）原则，推荐分成两个步骤来做：先生成手工测试用例后编写自动化代码。而且，编写自动化代码的时候也建议每次只转换一个手工用例而不是一次处理所有用例，这样生成自动化代码的成功率更高。
以上的方案不仅可以生成playwright版用例，也可以生成puppeteer版，或者YAML格式的用例，只要改一下提示词就行。
这个方案还有一些优化的空间：
1. llms-full.txt这个文档确实很全面，但是太大了，包含了很多我们不需要的信息。比如如果你只想生成playwright版的用例，那文档中puppeteer的参考信息就多余了，不仅占用了大模型的上下文窗口，还可能造成混淆和干扰。所以可以考虑精简一下这个文档。
2. 对于需要大量的交互的复杂场景，每一次交互后界面的变化都需要手动截图给AI看，是不是比较麻烦？可以考虑做一个智能体，比如大模型调用Midscene MCP的方式来完成这些交互和截图任务。
最新案例围观朋友圈：
https://mmbiz.qpic.cn/mmbiz_jpg/AsMHq6TmhAiciaNQ3uM97tSiciaHnV0DJtlgu9JgcF9HtRMy3Wia2roRiabpsAricytjHXcyYYKjKncldiadv6u9SaiaKpg/640?wx_fmt=other&wxfrom=5&wx_lazy=1&wx_co=1&tp=webp
页:
[1]