Midscene.js 是什么？

Midscene.js 是一款基于 AI 技术的自动化 SDK，旨在简化 UI 自动化测试流程。它通过大型语言模型（LLM）解析用户的自然语言指令，执行相应的操作（如输入文本、点击按钮等）。

Midscene.js 支持动作执行、数据查询和页面断言，并提供可视化报告，帮助用户轻松调试和优化测试流程。作为开源项目，用户可在自有环境中运行，确保数据安全。它支持与 YAML 脚本、Puppeteer 和 Playwright 等工具集成，适用于多种自动化测试场景。

Midscene.js 的核心优势

1. 三种核心方法

Midscene.js 提供了三种关键方法，覆盖测试全流程：

​​实战示例​​：

// 输入关键字，执行搜索（支持中文指令控制英文页面）
await ai('在搜索框输入 "Headphones" ，敲回车');

// 提取列表中耳机商品信息
const items = await aiQuery(
  '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
);
console.log("headphones in stock", items);

2. 多种集成形式

• ​​快速体验​​：推荐通过 浏览器插件 直接与任意网页联动，无需搭建代码项目，即可调用交互、提取、断言接口。
• ​​代码集成​​：支持以下形式嵌入项目：
  • YAML 格式自动化脚本（适合偏好非代码编写）；
  • Chrome 插件桥接模式（控制桌面 Chrome）；
  • Puppeteer 集成；
  • Playwright 集成。

3. 可视化报告与调试 Playground

运行结束后，Midscene.js 生成​​可视化报告​​和​​调试 Playground​​，支持：

• 查看中间数据（查询 Query、执行计划 Planning、动作 Actions）；
• 在报告中重新运行 Prompt 调试，提升测试效率与准确性。

4. 直连模型端，保障数据安全

• 开源协议：MIT 许可证，代码运行在用户自有环境；
• 数据流向：页面收集的数据按用户配置直接传送至 OpenAI 或自定义模型；
• 安全特性：仅用户和指定模型服务商可访问数据，无第三方平台介入，降低外部依赖。

技术原理

Midscene.js 的核心流程基于以下技术模块：

1. ​​自然语言处理（NLP）​​：解析用户自然语言指令；
2. ​​界面理解​​：分析网页内容，识别用户描述的界面元素与动作；
3. ​​动作执行​​：模拟用户输入、点击等浏览器自动化操作；
4. ​​数据提取​​：按用户需求从网页中提取特定格式数据；
5. ​​断言验证​​：检查页面状态是否符合断言条件。

实战案例：登录页面测试

测试目标

验证登录页面功能：

• 输入正确用户名/密码：成功登录；
• 输入错误用户名/密码：提示错误信息。

测试步骤

1. 打开登录页面（通过插件或代码集成）；
2. 输入正确/错误用户名和密码（.aiAction 方法）；
3. 提取登录结果数据（.aiQuery 方法）；
4. 验证登录状态（.aiAssert 方法）。

示例代码（集成 Playwright）

import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page }) => {
  page.setViewportSize({ width: 400, height: 905 });
  await page.goto("https://www.ebay.com");
  await page.waitForLoadState("networkidle");
});

test("search headphone on ebay", async ({ ai, aiQuery, aiAssert }) => {
  // 输入关键字并搜索（中文指令控制英文页面）
  await ai('在搜索框输入 "Headphones" ，敲回车');

  // 提取商品信息并验证
  const items = await aiQuery(
    '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
  );
  // （此处可添加断言逻辑，如验证商品数量或价格范围）
});

调试与报告

运行后生成可视化报告，包含：

• 详细步骤（查询、计划、动作）；
• Playground 支持重新运行 Prompt 调试，快速定位问题。

资源汇总

• ​​项目官网​​：https://midscenejs.com
• ​​GitHub 仓库​​：https://github.com/web-infra-dev/midscene
• ​​快速体验 Chrome 扩展​​：安装链接
• ​​API 参考文档​​：https://midscenejs.com/api.html
• ​​YAML 脚本自动化​​：https://midscenejs.com/automate-with-scripts-in-yaml.html
• ​​Puppeteer 集成​​：https://midscenejs.com/integrate-with-puppeteer.html
• ​​Playwright 集成​​：https://midscenejs.com/integrate-with-playwright.html
• ​​自定义模型和提供者​​：https://midscenejs.com/model-provider.html