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="替换为自己的 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();
  })()
);

这样写测试用例看起来是不是超级方便？感兴趣的小伙伴可以试试哦！