UI自动化测试从脚本开发到后期维护，往往让整个团队倍感压力。选择器繁多、代码冗长，随着业务内容增加和时间推移，维护成本急剧上升，想要调整任何细节都需要反复翻查。有没有一种方法，能让测试脚本的编写像与人对话一样自然简单？ 答案是肯定的。字节跳动Web Infra团队开源了一款创新的UI自动化测试工具——Midscene.js^[1]。其核心理念非常直接：借助大语言模型（LLM）的能力，你只需描述交互步骤和期望的数据格式，Midscene.js就能自动完成剩余工作。 Midscene.js提供了Ja vaScript版本的SDK，让你可以用自然语言控制页面、执行断言，还能以JSON格式提取数据。目前该项目在GitHub上已获得669个Star，发展势头良好。

Midscene.js 核心API

Midscene.js已发布到NPM，Ja vaScript开发者可直接通过代码快速接入使用。

核心API数量极少，简洁得令人舒适：

• .aiAction(steps: string)：描述你要执行的一系列操作步骤。例如：.aiAction("搜索栏输入 '今天天气怎么样'，点击搜索按钮")。一步到位，无需编写复杂选择器。
• .ai()：是.aiAction的简写，进一步减少输入量。
• .aiQuery(dataShape: any)：从页面提取指定数据。例如：.aiQuery('左上角展示的日期和时间，string')。无需编写繁琐的DOM遍历，用自然语言即可搞定。
• .aiAssert(assertion: string, errorMsg?: string)：断言功能，用于判断当前页面状态是否符合预期。

Chrome插件快速体验

Midscene.js还提供了一款Chrome插件，目的是让用户在不写代码的情况下，直接在任意网站上体验其核心能力。 在Chrome应用商店搜索“Midscene.js”^[2]即可找到并安装。

安装完成后，打开任意目标网站并启动插件。第一步需要配置OpenAI API Key，然后在输入框中描述你希望执行的步骤，剩下的全部交给AI处理。

与Puppeteer集成

Puppeteer^[3]是前端开发者非常熟悉的浏览器自动化库，通过DevTools协议或WebDriver BiDi控制Chrome或Firefox。Midscene.js提供了PuppeteerAgent，可与Puppeteer无缝结合。 配置API Key

OPENAI_API_KEY="替换为自己的Open API Key"

安装依赖

npm install @midscene/web puppeteer ts-node --sa ve-dev

示例 下面是一个来自Midscene.js官方^[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, // 这里用有头模式方便调试
    });

    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();
  })()
);

看到这里，你是否觉得编写测试用例从未如此轻松？只需用自然语言描述操作和预期结果，剩下的交给大模型去理解页面、定位元素、执行动作。维护成本也直线下降——页面结构变了？AI会主动适应，你只需要更新自然语言描述即可。

这款工具值得一试，尤其适合那些仍在为大量选择器和断言代码烦恼的团队。