Midscene.js

Midscene.js是一个基于AI的UI自动化工具，通过自然语言交互简化网页自动化任务。它提供了多种功能，帮助用户在网页上执行交互操作、提取数据和进行断言验证。你只需简单描述想要执行的操作，Midscene会自动处理网页，如发推文、验证内容、搜索信息等功能。

功能特色：

• AI交互：使用 .ai 方法描述步骤并执行交互操作，通过自然语言描述操作步骤。
• 数据提取：使用 .aiQuery 从 UI 中提取数据，返回 JSON 格式的结果，用户可以详细描述所需的数据结构。
• 断言验证：使用 .aiAssert 执行断言操作，验证页面上的特定元素或状态。
• 多种集成方式：支持使用 YAML 格式的自动化脚本，并可集成到 Puppeteer 和 Playwright 中。
• 可视化报告：提供可视化报告和内置的 Playground，用于调试和优化自动化脚本。
• 自定义模型：支持通用 LLM 模型和开源模型，如 gpt-4o 和 UI-TARS，用户可以选择适合自己需求的模型，并部署到自己的服务器上，以提高性能和数据隐私。

Midscene.js使用案例

1.电商网站自动化测试：

1. 场景：在电商网站上进行搜索、筛选和购买流程的自动化测试。
2. 操作：使用 .ai 方法输入搜索关键词，使用 .aiQuery 提取商品信息，并使用 .aiAssert 验证购物车图标的存在。

2.表单自动化填充：

1. 场景：在网页表单中自动填写用户信息并提交。
2. 操作：通过 .ai 方法描述填写步骤，如输入姓名、地址、联系方式等，并自动提交表单。

3.数据提取与分析：

1. 场景：从网页中提取特定数据并进行分析。
2. 操作：使用 .aiQuery 提取数据，如商品价格、用户评论等，并将结果返回为 JSON 格式，方便后续分析。

4.UI 元素验证：

1. 场景：验证网页上的特定 UI 元素是否存在或状态是否正确。
2. 操作：使用 .aiAssert 验证按钮、图标、文本框等元素的存在和状态。

5.跨浏览器测试：

1. 场景：在不同浏览器中进行自动化测试，确保网页在各浏览器中的一致性。
2. 操作：通过Midscene.js的 Chrome 插件和桥接模式，在不同浏览器中执行相同的自动化脚本。

Midscene.js使用方法：

示例代码 (使用 Puppeteer): const puppeteer = require(‘puppeteer’);

(async () => {     const browser = await puppeteer.launch({ headless: false });     const page = await browser.newPage();

// 导航至目标网站

await page.goto(“http://example.com”);

// 执行 Midscene.js 动作

await midscene.execute(page, ‘输入用户名 “testuser”‘);

await midscene.execute(page, ‘点击登录按钮’);

// 数据提取     let userData = await midscene.query(page, ‘提取用户信息为 JSON 格式’);     console.log(userData);

// 关闭浏览器     await browser.close(); })();

Midscene.js使用方法超简单，只要安装Chrome插件就可以用，不需要编程基础，只需描述想要执行的任务，它就可以理解你的意图然后自动执行相应的浏览器操作。

GitHub：https://github.com/web-infra-dev/midscene