Midscene.js：AI重塑UI自动化测试

最新推荐文章于 2025-04-10 15:13:42 发布

东汉末年出bug

最新推荐文章于 2025-04-10 15:13:42 发布

阅读量2.2k

点赞数 13

文章标签：人工智能测试工具自动化

本文链接：https://blog.csdn.net/zhangkexin_z/article/details/144610319

版权

UI自动化测试如同一位勤勉的守护者，默默确保着产品的稳定与可靠。然而，随着项目规模的膨胀和需求的频繁变更，传统UI自动化测试中的繁琐与脆弱性逐渐显现，让开发者们陷入“爱恨交织”的复杂情感中。Midscene.js的出现，犹如一束破晓的光芒，以其独特的AI加持，为UI自动化测试带来了前所未有的愉悦体验。本文将深入探讨Midscene.js的核心优势、使用方法、实战案例，以及它如何彻底改变我们对UI自动化测试的认知。

一、传统UI自动化测试的困境

在传统UI自动化测试中，开发者通常需要编写大量的选择器来定位页面元素，如#ids、data-test、.selectors等。这些选择器如同代码的“锚点”，一旦页面结构发生变化，就需要对这些“锚点”进行繁琐的更新和维护。此外，传统UI自动化测试往往缺乏灵活性，难以应对复杂的交互场景和动态变化的数据。因此，在需要重构或迭代项目时，UI自动化测试往往成为开发者们的“烫手山芋”。

二、Midscene.js：AI驱动的UI自动化

Midscene.js是一个基于多模态大语言模型（LLM）的UI自动化测试框架，它采用OpenAI GPT-4（或其他自定义多模态模型）作为核心引擎，能够直观地“理解”用户界面并执行必要的操作。开发者只需用自然语言描述交互步骤或期望的数据格式，Midscene.js就能自动完成测试任务。这一创新性的设计，不仅大大降低了UI自动化测试的门槛，还极大地提升了测试的灵活性和准确性。

1. 核心方法

Midscene.js提供了三种关键方法，分别是交互（.ai, .aiAction）、提取（.aiQuery）和断言（.aiAssert）。

交互：使用.ai或.aiAction方法描述测试步骤并执行交互。例如，你可以告诉Midscene.js“点击按钮”、“输入文本”等。
提取：使用.aiQuery方法从UI中“理解”并提取数据。Midscene.js会返回一个JSON格式的数据结构，你可以根据需要描述想要的数据格式。
断言：使用.aiAssert方法执行断言，验证UI的状态是否符合预期。

2. 多种集成形式

Midscene.js提供了多种集成形式，以满足不同开发者的需求。

浏览器插件：如果你想要快速体验Midscene.js的核心功能，可以从浏览器插件开始。插件里可以用自然语言与任意网页联动，调用交互、提取、断言三种接口，无需搭建代码项目。
代码集成：对于需要深入集成到现有测试框架中的项目，Midscene.js也提供了多种代码集成方式。你可以根据项目的实际情况，选择适合的集成形式。

3. 可视化报告与调试Playground

运行结束后，Midscene.js会提供一个可视化报告和调试Playground。你可以非常方便地调试提示和AI的响应，查看所有的中间数据，如查询（Query）、计划（Planning）和动作（Actions）。此外，报告中还集成了一个Playground，你可以在报告中重新运行Prompt并调试，进一步提升测试的效率和准确性。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 直连模型端，保障数据安全

Midscene.js是一个采用MIT许可证的开源项目，项目代码运行在用户的自有环境中。所有从页面收集的数据会依照用户的配置，直接传送到OpenAI或指定的自定义模型。因此，数据仅用户和指定的模型服务商可访问，任何第三方平台均无法获取这些数据。这一设计不仅保障了数据的安全性，还降低了对第三方服务的依赖。

三、实战案例：Midscene.js在UI自动化测试中的应用

下面，我们将通过一个简单的实战案例，展示Midscene.js在UI自动化测试中的应用。

1. 测试目标

假设我们有一个简单的登录页面，需要测试以下功能：

输入正确的用户名和密码后，能够成功登录。
输入错误的用户名或密码后，会提示错误信息。

2. 测试步骤

打开登录页面：使用Midscene.js的浏览器插件或代码集成方式打开登录页面。
输入用户名和密码：使用.aiAction方法输入正确的用户名和密码。
检查登录结果：使用.aiQuery方法提取登录后的页面数据，并使用.aiAssert方法验证是否成功登录。
输入错误的用户名或密码：重复上述步骤，但输入错误的用户名或密码，并验证是否提示错误信息。

3. 示例代码

以下是一个集成到Playwright的示例代码：

import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page }) => {
  page.setViewportSize({ width: 400, height: 905 });
  await page.goto("https://www.ebay.com");
  await page.waitForLoadState("networkidle");
});

test("search headphone on ebay", async ({ ai, aiQuery, aiAssert }) => {
  // 👀 输入关键字，执行搜索
  // 注：尽管这是一个英文页面，你也可以用中文指令控制它
  await ai('在搜索框输入 "Headphones" ，敲回车');

  // 👀 找到列表里耳机相关的信息
  const items = await aiQuery(
    '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
  );

  console.log("headphones in stock", items);
  expect(items?.length).toBeGreaterThan(0);

  // 👀 用 AI 断言
  await aiAssert("界面左侧有类目筛选功能");
});

4. 可视化报告与调试

运行测试后，Midscene.js会生成一个可视化报告和调试Playground。你可以通过报告查看测试的详细步骤和结果，包括每个步骤的查询（Query）、计划（Planning）和动作（Actions）。如果测试失败，你可以在Playground中重新运行Prompt并调试，以便快速定位问题并修复。

四、总结

Midscene.js以其独特的AI加持和直观的自然语言交互方式，为UI自动化测试带来了前所未有的愉悦体验。它不仅降低了测试门槛，提升了测试效率，进一步增强了测试的可靠性和可维护性。

Midscene.js也面临着一些挑战和限制。例如，对于某些复杂的交互场景和数据结构，AI模型可能无法完全准确地理解和执行。此外，随着项目规模的扩大和需求的不断变化，如何保持测试的稳定性和可维护性仍然是一个值得深入探讨的问题。因此，我们在使用Midscene.js时，需要结合实际项目情况进行合理的规划和设计，以确保测试的准确性和效率。