 UI 自动化测试，前期的开发是一方面，后期的维护也很重要，一堆的选择器和代码，内容多了时间长了让人眼花缭乱，难以维护。 今天，AI智见录给大家推荐一个字节跳动 Web Infra 团队开源的 UI 自动化测试工具 Midscene.js[1]，借助大语言模型（LLM）的超能力，你只需要输入交互步骤和期望的数据格式，Midscene.js 就能给你想要的结果。 Midscene.js 提供了 JavaScript 版本的 SDK，可以让你使用自然语言控制页面、执行断言并以 JSON 格式提取数据，当前已在 Github 开源，Star 669。  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="替换为自己的OpenAPIKey"
安装依赖 npminstall@midscene/webpuppeteerts-node--save-dev
示例 以下是 Midscene.js 提供的 与 Puppeteer 集成示例[4] importpuppeteerfrom"puppeteer";
import{PuppeteerAgent}from"@midscene/web/puppeteer";
constsleep=(ms:number)=>newPromise((r)=>setTimeout(r,ms));
Promise.resolve(
(async()=>{
constbrowser=awaitpuppeteer.launch({
headless:false,//hereweuseheadedmodetohelpdebug
});
constpage=awaitbrowser.newPage();
awaitpage.setViewport({
width:1280,
height:800,
deviceScaleFactor:1,
});
awaitpage.goto("https://www.ebay.com");
awaitsleep(5000);
//?初始化Midsceneagent
constmid=newPuppeteerAgent(page);
//?执行搜索
//注：尽管这是一个英文页面，你也可以用中文指令控制它
awaitmid.aiAction('在搜索框输入"Headphones"，敲回车');
awaitsleep(5000);
//?理解页面，提取数据
constitems=awaitmid.aiQuery(
'{itemTitle:string,price:Number}[],找到列表里的商品标题和价格',
);
console.log("耳机商品信息",items);
//?用AI断言
awaitmid.aiAssert("界面左侧有类目筛选功能");
awaitbrowser.close();
})()
);
这样写测试用例看起来是不是超级方便？感兴趣的小伙伴可以试试哦！
| 
