❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦
原文链接：https://mp.weixin.qq.com/s/yopfWNlAq66VnH3DNlT_Mw
🚀 快速阅读
- 功能：支持自然语言交互、数据查询、页面断言和可视化报告。
- 技术：基于自然语言处理和界面理解技术，执行浏览器自动化操作。
- 应用：适用于自动化测试、数据抓取、性能监控和界面一致性检查等场景。
正文（附运行示例）
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();
})();
代码解释
- Puppeteer 启动浏览器：使用 Puppeteer 启动浏览器并打开目标网页。
- Midscene.js 执行指令：通过
midscene.execute方法执行自然语言指令，如输入用户名和点击登录按钮。 - 数据提取：使用
midscene.query方法从页面中提取用户信息，并以 JSON 格式返回。 - 关闭浏览器：测试完成后关闭浏览器。
资源
- 项目官网：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 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦
