UI 自动化测试，前期的开发是一方面，后期的维护也很重要，一堆的选择器和代码，内容多了时间长了让人眼花缭乱，难以维护。
今天，AI智见录给大家推荐一个字节跳动 Web Infra 团队开源的 UI 自动化测试工具 Midscene.js[1]，借助大语言模型（LLM）的超能力，你只需要输入交互步骤和期望的数据格式，Midscene.js 就能给你想要的结果。
Midscene.js 提供了 JavaScript 版本的 SDK，可以让你使用自然语言控制页面、执行断言并以 JSON 格式提取数据，当前已在 Github 开源，Star 669。
以下是 Midscene.js 的一个介绍视频
Midscene.js 核心 API
Midscene.js 当前已发布到 NPM，JavaScirpt 开发者可以通过代码快速接入。
核心 API 主要以下几个：
.aiAction(steps: string)：描述你要执行的一系列步骤，例如：“.aiAction("搜索栏输入 ‘今天天气怎么样’，点击搜索按钮")”.ai()：.ai 是 .aiAction 的简写.aiQuery(dataShape: any)：从页面提取数据，例如：.aiQuery('左上角展示的日期和时间，string').aiAssert(assertion: string, errorMsg?: string)：断言
Chrome 插件快速体验
Midscene.js 提供了 Chrome 插件，让用户方便的在任意网站上进行体验，而无需编写代码。
Chrome 应用商店输入名字 Midscene.js[2] 搜索到如下插件。
插件安装成功后，找一个你喜欢的网站，打开 Midscene.js 插件，第一步需要先配置 OpenAI API Key，之后在输入框内输入你要描述的步骤。
与 Puppeteer 集成
Puppeteer[3] 是一个 JavaScript 库，它通过 DevTools 协议或 WebDriver BiDi 提供了一个高级 API 来控制 Chrome 或 Firefox。
Midscene.js 提供了 PuppeteerAgent，实现了与 Puppeteer 的集成。
配置 API Key
OPENAI_API_KEY="替换为自己的 Open API Key"
安装依赖
npm install @midscene/web puppeteer ts-node --save-dev
示例
以下是 Midscene.js 提供的 与 Puppeteer 集成示例[4]
import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
(async () => {
const browser = await puppeteer.launch({
headless: false, // here we use headed mode to help debug
});
const page = await browser.newPage();
await page.setViewport({
width: 1280,
height: 800,
deviceScaleFactor: 1,
});
await page.goto("https://www.ebay.com");
await sleep(5000);
// 👀 初始化 Midscene agent
const mid = new PuppeteerAgent(page);
// 👀 执行搜索
// 注：尽管这是一个英文页面，你也可以用中文指令控制它
await mid.aiAction('在搜索框输入 "Headphones" ，敲回车');
await sleep(5000);
// 👀 理解页面，提取数据
const items = await mid.aiQuery(
'{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格',
);
console.log("耳机商品信息", items);
// 👀 用 AI 断言
await mid.aiAssert("界面左侧有类目筛选功能");
await browser.close();
})()
);
这样写测试用例看起来是不是超级方便？感兴趣的小伙伴可以试试哦！
Midscene.js: https://github.com/web-infra-dev/midscene
[2]Midscene.js: https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief
[3]Puppeteer: https://pptr.dev/
[4]与 Puppeteer 集成示例: https://midscenejs.com/zh/integrate-with-puppeteer.html
