❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

1. 功能：支持自然语言交互、数据查询、页面断言和可视化报告。
2. 技术：基于自然语言处理和界面理解技术，执行浏览器自动化操作。
3. 应用：适用于自动化测试、数据抓取、性能监控和界面一致性检查等场景。

正文（附运行示例）

Midscene.js 是什么

Midscene.js 是一款基于 AI 技术的自动化 SDK，旨在简化 UI 自动化测试流程。它通过大型语言模型（LLM）解析用户的自然语言指令，执行相应的操作，如输入文本、点击按钮等。Midscene.js 支持动作执行、数据查询和页面断言，并提供可视化报告，帮助用户轻松调试和优化测试流程。

Midscene.js 是一个开源项目，用户可以在自己的环境中运行，确保数据安全。它支持与 YAML 脚本、Puppeteer 和 Playwright 等工具集成，适用于多种自动化测试场景。

Midscene.js 的主要功能

• 自然语言交互：用户可以通过自然语言描述交互步骤，Midscene.js 将自动执行相应的操作，如输入文本、点击按钮等。
• 自定义数据查询：用户描述所需的 JSON 格式，Midscene.js 将从页面内容中提取相应的数据。
• 直观推断：用户可以对页面状态进行断言，确保 UI 符合预期。
• Chrome 扩展：支持用户在任何网页上使用自然语言执行动作、查询和断言，无需编写代码。
• 代码项目集成：与 YAML 脚本、Puppeteer 和 Playwright 等工具集成，实现自动化测试。
• 可视化报告：每次运行后提供可视化报告，包括动画回放和步骤详情，用户可以在测试环境中调整提示而无需重新运行脚本。

Midscene.js 的技术原理

• 自然语言处理（NLP）：接收用户的自然语言输入，基于 NLP 技术解析指令。
• 界面理解：模型分析网页内容，理解用户描述的界面元素和动作。
• 执行动作：根据理解的结果，模型将执行相应的浏览器自动化操作，如模拟用户输入、点击等。
• 数据提取：模型根据用户的查询请求，从网页中提取特定格式的数据。
• 断言验证：模型检查页面状态是否符合用户的断言条件。

如何运行 Midscene.js

Midscene.js 提供了多种集成方式，以下是使用 Puppeteer 进行自动化测试的示例代码：

const puppeteer = require('puppeteer');
const midscene = require('@midscene/web');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 使用 Midscene.js 执行自然语言指令
  await midscene.execute(page, '输入用户名 "testuser"');
  await midscene.execute(page, '点击登录按钮');

  // 提取页面数据
  const data = await midscene.query(page, '提取用户信息为 JSON 格式');
  console.log(data);

  await browser.close();
})();

代码解释

1. Puppeteer 启动浏览器：使用 Puppeteer 启动浏览器并打开目标网页。
2. Midscene.js 执行指令：通过 midscene.execute 方法执行自然语言指令，如输入用户名和点击登录按钮。
3. 数据提取：使用 midscene.query 方法从页面中提取用户信息，并以 JSON 格式返回。
4. 关闭浏览器：测试完成后关闭浏览器。

资源

• 项目官网：https://midscenejs.com/
• GitHub 仓库：https://github.com/web-infra-dev/midscene
• 快速体验 Chrome 扩展：https://midscenejs.com/quick-experience.html
• 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

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦