Midscene.js：让 AI 成为你的浏览器操作员_midscene可以用来做什么-CSDN博客

本文链接：https://blog.csdn.net/m0_74287204/article/details/148171412

在数字化浪潮的推动下，Web 测试与自动化领域正面临着一场前所未有的变革。而 Midscene.js，这款由字节跳动 web-infra 团队推出的开源 AI 自动化测试工具，正以其强大的功能和创新的理念，引领着这一变革的潮流，为开发者和测试人员带来全新的体验和无限的可能性。

一、Midscene.js 简介

Midscene.js 是基于多模态大模型开发的，能够通过智能视觉解析页面，理解用户的自然语言指令，并自动执行相应的浏览器操作，如数据提取、页面验证、表单填写、按钮点击等。它不仅降低了自动化测试的门槛，还极大地提高了测试效率和准确性，即使是非技术人员也能轻松上手。

Midscene.js 的核心优势主要体现在以下几个方面：

降本增效 ：传统测试可能需要耗费数天时间来编写脚本，而 Midscene.js 仅需短短几十分钟即可完成，大大缩短了测试周期，降低了人力成本和时间成本。
灵活应对变化 ：在 Web 开发过程中，页面改版是常有的事。与传统的自动化测试工具不同，使用 Midscene.js 时，只需简单修改自然语言描述，无需对脚本进行大规模重构，即可适应页面的变化，有效降低了维护成本。
跨工具兼容 ：Midscene.js 支持 Puppeteer、Playwright 等主流自动化工具以及 YAML 脚本，能够无缝集成到现有的测试体系中，充分利用已有的测试资源和经验，为企业提供了更大的灵活性。
强大的模型支持 ：Midscene.js 支持通用 LLM（如 GPT-4o）和开源模型（如 UI-TARS）。用户可以根据实际需求和预算选择合适的模型。其中，UI-TARS 基于 VLM 架构的端到端 GUI 代理模型，可在自己的服务器上部署，不仅提升了性能，还增强了数据隐私保护。
丰富的功能特性 ：除了基本的自动化测试功能外，Midscene.js 还提供了可视化报告、数据提取与断言、内置游乐场等一系列实用的功能，帮助用户更轻松地调试测试脚本、分析测试结果，进一步提升了测试的效率和质量。

二、Midscene.js 安装

根据不同的使用需求和场景，Midscene.js 提供了多种安装方式，包括 Chrome 扩展安装、npm 安装和源码安装，以下是具体介绍：

Chrome 扩展安装

如果您只是想快速体验 Midscene.js 的核心功能，而不打算进行深入的开发和定制，安装 Chrome 扩展是最便捷的方式。只需打开 Chrome 浏览器，进入 Chrome 网上应用店，搜索 “Midscene.js”，找到对应的扩展程序后，点击 “添加到 Chrome” 按钮，按照提示完成安装即可.

npm 安装

对于需要将 Midscene.js 深入集成到现有项目中，进行复杂自动化测试的用户，可以通过 npm 安装其 SDK。以 Node.js 项目为例，首先确保已安装 Node.js 环境，然后打开命令行工具，进入项目目录，执行以下命令进行安装：

npm install midscene.js

或者，根据具体需求，也可以选择安装 Midscene.js 提供的两个包：

@midscene/web ：支持浏览器自动化，集成 Puppeteer/Playwright。
@midscene/core ：包含核心功能，适用于轻量级场景。

源码安装

如果您希望深入研究 Midscene.js 的源码，学习其内部实现原理，或者对其进行二次开发和定制改造，那么源码安装将是最佳选择。通过以下命令克隆项目仓库，然后进入项目目录，安装项目依赖，即可完成安装：

git clone https://github.com/web-infra-dev/midscene.git
cd midscene
npm install

如果需要启动本地服务进行开发和调试，可以执行命令 npm run dev.

三、Midscene.js 使用

Chrome 插件使用方式

安装并配置好 Chrome 扩展后，您可以在任意网页上体验 Midscene.js 的主要功能。启动扩展后，您会看到三个关键操作 Tab：

Action ：用于与网页进行交互，例如 “在搜索框中输入 Midscene” 或 “点击登录按钮”。
Query ：可以从界面中提取 JSON 数据，比如 “提取页面中的用户 ID，返回 { id: string }”。
Assert ：用于执行断言操作，如 “页面标题是 Midscene”。

只需在相应的 Tab 中输入清晰、明确的自然语言指令，Midscene.js 就会自动执行相应的操作，无需编写任何代码，让您轻松体验 AI 驱动的浏览器自动化操作.

YAML 使用方式

Midscene.js 还提供了一种基于 YAML 文件的自动化测试方法，这种方式有助于团队成员更专注于脚本本身，无需深入了解复杂的编程语言和自动化测试框架。以下是一个示例 YAML 文件内容：

target:
  url: https://www.ebay.com
tasks:
  - name: 搜索
    flow:
      - ai: 在搜索框输入 "耳机" 并敲回车
      - sleep: 2000
      - aiQuery: '{itemTitle: string, price: Number}[], 提取前5个商品标题和价格'
      - aiAssert: "搜索结果页面包含‘耳机’关键词"

在使用 YAML 文件之前，需要先全局安装 @midscene/cli 工具，然后通过命令行执行上述 YAML 脚本，即可完成自动化测试任务.

与 Puppeteer 集成使用

Midscene.js 也可以与 Puppeteer 进行集成，允许您结合 Puppeteer 的 API 来编写自动化测试脚本，并利用 Midscene 的 AI 能力来执行自动化测试。以下是一个简单的示例代码：

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');

  // 输入用户名和密码
  await midscene.execute(page, '输入用户名 "testuser"');
  await midscene.execute(page, '输入密码 "123456"');
  await midscene.execute(page, '点击登录按钮');

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

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

在使用与 Puppeteer 集成的方式时，需要先安装相关的依赖包，包括 @midscene/web、puppeteer 和 tsx 等.

环境配置

无论采用哪种使用方式，在开始使用 Midscene.js 之前，都需要进行环境配置，主要是配置 AI 模型相关的参数。例如，配置 OpenAI API Key 以使用 GPT-4o 模型，或者配置本地运行的 UI-TARS 模型的 endpoint 等。具体的配置方法可以参考 Midscene.js 的官方文档.

四、Midscene.js 的优势与应用场景

优势

易于上手 ：无需编写复杂的代码，通过自然语言描述即可完成自动化测试任务，即使是没有编程背景的人员也能快速掌握和使用，降低了自动化测试的入门难度，扩大了使用者的范围。
高效灵活 ：借助 AI 的强大能力，能够快速理解和执行用户指令，提高测试效率。同时，灵活的自然语言描述方式和对页面变化的高适应性，使得测试脚本更易于维护和更新，能够更好地应对不断变化的 Web 应用环境。
功能丰富 ：除了基本的自动化测试功能外，还提供了可视化报告、数据提取与断言、内置游乐场等实用功能，帮助用户更全面地了解测试过程和结果，便于发现和定位问题，进一步提升了测试的质量和效率。
开源免费 ：作为开源项目，Midscene.js 提供了免费使用的优势，用户可以根据自己的需求自由地使用、修改和扩展代码，同时也能够借助开源社区的力量获取支持和帮助，共同推动工具的发展和改进。

应用场景

自动化测试 ：这是 Midscene.js 最典型的应用场景之一，可用于 Web 应用的功能测试、回归测试、性能测试等多种测试类型。通过编写自然语言描述的测试脚本，快速验证 Web 应用的各项功能是否正常，确保代码的质量和稳定性。
数据抓取 ：利用 Midscene.js 的数据提取功能，可以从网页中抓取所需的信息，如商品价格、新闻内容、用户评论等，为数据分析、市场调研等提供数据支持.
自动化操作 ：能够模拟用户的各种操作行为，如模拟用户登录、表单填写、页面导航等，可用于自动化完成一些重复性、规律性的任务，提高工作效率，节省人力成本.
无代码自动化 ：对于没有技术背景的业务人员、测试人员等，Midscene.js 的 Chrome 扩展提供了一种无代码的自动化解决方案，使他们也能够轻松地进行自动化测试和操作，加强了团队之间的协作和沟通.

五、Midscene.js 的未来展望

随着 AI 技术的不断发展和创新，Midscene.js 作为一款 AI 驱动的自动化测试工具，其发展前景十分广阔。未来，Midscene.js 有望在以下几个方面取得进一步的突破和进展：

模型优化 ：持续优化和改进所使用的 AI 模型，提高模型对自然语言的理解能力和准确性，进一步提升自动化测试的效果和质量。同时，降低模型的使用成本和资源消耗，使更多用户能够受益于 AI 技术。
功能扩展 ：不断丰富和完善工具的功能特性，增加对更多浏览器类型、操作系统、移动设备的支持，拓展自动化测试的覆盖范围。此外，还可以探索与其他开发工具、测试管理平台等的深度集成，打造更加完善的自动化测试生态系统。
社区发展 ：通过加强开源社区的建设，吸引更多的开发者和用户参与其中，共同贡献代码、分享经验和最佳实践，促进工具的快速迭代和优化。同时，建立和完善文档、教程、示例等资源，为用户提供便捷的学习和参考材料，降低学习成本，提高用户体验。

总之，Midscene.js 凭借其强大的 AI 能力、易用性和丰富的功能特性，正在改变传统的 Web 测试与自动化模式，为开发和测试工作带来了全新的思路和方法。无论是个人开发者、小型团队还是大型企业，都可以借助 Midscene.js 提升工作效率、提高软件质量、加速产品交付。随着技术的不断进步和社区的持续发展，Midscene.js 必将在未来发挥更加重要的作用，引领 Web 测试与自动化领域迈向新的高度。