Midscene.js 让 AI 帮你操作网页、验证内容，提取数据

Midscene.js 让 AI 成为你的浏览器操作员，你可以通过自然语言描述来操作网页、验证内容和提取数据，Midscene.js能简化自动化过程。

自然语言交互

你只需描述你的目标和步骤，Midscene.js 就会为你规划和操作用户界面，你不需要编写代码就能实现工作自动化。

Chrome扩展

你可以通过Chrome扩展立即体验Midscene.js，不需要编写代码。

Puppeteer/Playwright集成

Midscene.js 支持与Puppeteer和Playwright集成，你可以结合AI和强大的自动化工具，完成一些自动化任务。

开源模型

Midscene.js默认使用GPT-4o模型，还支持两个新的开源模型UI-TARS和Qwen2.5-VL，这些模型提供图像识别和UI自动化服务。

支持通用模型

Midscene.js 支持像GPT-4o和Claude这样的通用大型模型，能用来完成更多场景下的自动化任务。

可视化报告

通过测试报告和Playground，你可以轻松理解、重放和调试整个过程，能提高你的调试效率。

缓存

第一次通过AI执行任务时，会进行缓存处理，后续执行相同任务时，会更高效的执行任务。

理解UI，JSON格式响应

你可以指定数据格式要求，以JSON格式接收响应。

断言

你可以用自然语言表达断言，AI会理解和处理这些断言。

模型选择

你可以选择使用通用的gpt-4o，gpt-4o能处理大部分任务，也可以选择使用gemini-1.5-pro和qwen-vl-max-latest，还可以使用UI-TARS模型。

Midscene.js优势

你能找到很多UI自动化工具，每个工具都有自己的特点，Midscene.js 的优势是调试，在使用AI完成自动化任务时候调试和维护自动化脚本才是一个真正耗费精力的地方。Midscene.js 提供可视化的报告文件、内置的Playground和一个Chrome扩展来调试整个过程，与云服务和AI模型解耦，用户可以选择公共或私有部署。

Midscene.js功能

1、交互控制：.ai或.aiAction方法执行点击、输入等操作

await mid.ai('在搜索框输入"Headphones"并回车');

2、数据提取：.aiQuery返回结构化JSON数据

const items = await mid.aiQuery('{itemTitle: string, price: Number}[]');

3、结果验证：.aiAssert用自然语言进行断言

await mid.aiAssert('"路由器"的价格是139');

Midscene.js使用方式

浏览器插件：安装Chrome扩展后配置API密钥就能快速体验：

OPENAI_API_KEY="sk-your-key-here"

YAML脚本：

target:
  url: https://www.bing.com
tasks:
  - name: 搜索测试
    flow:
      - ai: 搜索"今日天气"
      - sleep: 3000
      - aiAssert: 结果展示天气信息

Playwright集成：

test("ebay搜索测试", async ({ ai, aiQuery }) => {
  await ai('在搜索框输入"Headphones"并回车');
  const items = await aiQuery('商品标题和价格');
  expect(items?.length).toBeGreaterThan(0);
});