Midscene.js：用AI驱动浏览器自动化测试的开源插件

综合介绍

Midscene.js是一个由AI驱动的浏览器自动化工具，能够通过自然语言指令来控制网页、执行断言和提取数据。它支持Chrome扩展、JavaScript SDK和YAML脚本，简化了UI测试的编写和维护过程。通过利用多模态大语言模型如GPT-4o，Midscene.js提供了一种全新的自动化开发体验，让用户可以直观地与网页互动并获取结构化的JSON数据。

字节开源的 Midscene.js，自然语言+界面截图直接生成 E2E 测试，节省团队无数的重复劳动时间，而且目前 Coding + 多模态能力解决很多基础的 E2E 问题已经很完善了。

功能列表

• 自然语言交互：使用自然语言描述步骤，AI自动规划和控制用户界面。
• JSON数据提取：根据用户需求自动生成JSON格式的响应数据。
• 直观的断言：以自然语言形式进行断言，AI理解并执行。
• Chrome扩展体验：无需编写代码，即可通过扩展开始体验。
• 可视化报告：提供详细的执行报告，帮助用户理解和调试流程。
• 支持多种脚本：包括JavaScript和YAML，提供灵活的自动化脚本编写。

使用帮助

安装与配置

安装Chrome扩展：

1. 访问Chrome网上应用店，搜索“Midscene”。
2. 点击“添加至Chrome”按钮。
3. 确认安装并允许权限。

配置环境变量（适用于SDK使用）：

• 对于OpenAI API的使用，你需要在项目根目录下创建一个.env文件，添加以下内容：

export OPENAI_API_KEY="你的API密钥"
export MIDSCENE_MODEL_NAME="gpt-4o"

• 如果你使用的是其他模型服务，需要相应地调整上述环境变量。

使用流程

通过Chrome扩展使用

• 启动扩展：安装后，扩展图标会在浏览器工具栏显示。点击图标开启Midscene控制面板。
• 交互操作：在控制面板中输入自然语言指令，比如“点击登录按钮”或“从网页中提取所有标题”。
• 查看结果：操作完成后，扩展会返回执行的结果，通常以JSON格式展示提取的数据。

通过JavaScript SDK使用

• 引入SDK：

  import { ai, aiQuery, aiAssert } from'@midscene/web';
  

• 执行操作：
  • 基本操作：使用ai函数执行简单的网页操作。例如：

    await ai('在搜索框中输入 "React"');
    

  • 数据提取：使用aiQuery来提取数据：

    const data = await aiQuery('{title: string, price: number}[]', '找到产品列表并提取标题和价格');
    

  • 断言检查：利用aiAssert进行断言：

    await aiAssert('页面上应该有登录按钮');
    

使用YAML脚本

• 编写YAML脚本：在**.yaml**文件中定义你的自动化任务，例如：

  -action:type
  selector:'input[name="search"]'
  value:'JavaScript'
  -action:click
  selector:'button[type="submit"]'
  

• 执行脚本：通过命令行工具或Midscene的CLI运行这些脚本。

操作细节

• 自然语言指令：指令可以是简单操作如“点击”、“输入”或复杂的如“找到所有带有‘促销’标签的产品并记录价格”。
• 错误处理：如果操作失败，Midscene会提供详细的报告，指出失败的原因，帮助你调整指令。
• 调试与回放：每个测试或操作的执行过程都可以通过可视化报告回放，帮助你理解或调试脚本。

这种详细的使用指南可以确保用户快速上手，并充分利用Midscene.js的功能进行高效的浏览器自动化测试。