爆火！AI 助力 UI 自动化测试，Midscene.js 究竟有多强

UI 自动化测试的重要性与挑战

在当今软件开发的快速发展进程中，UI自动化测试已成为保障软件质量、提升开发效率的关键环节。随着软件系统的日益复杂和用户需求的不断增长，传统的手动测试方式已难以满足现代软件开发的节奏和质量要求。

UI 自动化测试的重要性

提升测试效率：手动测试往往需要测试人员逐个执行测试用例，耗费大量的时间和精力。而UI自动化测试可以通过编写脚本，让计算机自动执行测试，大大缩短了测试周期。

1.保证软件质量：自动化测试能够更全面地覆盖软件的各种功能和场景，减少人为疏忽导致的测试遗漏。通过自动化脚本，可以模拟各种用户操作，包括正常操作和异常操作，从而更有效地发现软件中的潜在缺陷和问题，确保应用在不同情况下都能稳定运行，提升软件的质量和稳定性。

2.节省人力成本：随着软件项目规模的不断扩大，测试工作量也随之增加。如果全部依赖手动测试，需要投入大量的人力资源。而采用UI自动化测试，可以将测试人员从繁琐的重复劳动中解放出来，让他们能够专注于更有价值的测试工作，这不仅节省了人力成本，还提高了测试团队的工作效率和专业水平。

传统 UI 自动化测试面临的挑战

1.选择器复杂：在传统的UI自动化测试中，选择页面元素通常依赖于CSS选择器、XPath等方式。然而，这些选择器在面对复杂的页面结构时，往往变得非常复杂和难以维护。例如，当页面中的元素层级较多，或者元素的属性不唯一时，编写准确的选择器就变得十分困难。而且，一旦页面结构发生变化，选择器也需要随之修改，这增加了测试脚本的维护成本。

2.与 HTML 结构耦合度高：传统的UI自动化测试脚本与HTML结构紧密耦合，这意味着当HTML结构发生变化时，测试脚本很容易失效。在一个频繁更新的Web应用中，页面的布局和结构可能会经常调整，如果测试脚本没有良好的设计，就需要花费大量的时间和精力去修改和维护，严重影响了测试的效率和稳定性。

3.界面断言困难：在UI自动化测试中，判断页面元素是否符合预期是一个重要的环节。然而，传统的测试方法在进行界面断言时存在一定的困难。例如，判断一个按钮是否可点击，或者一个文本框是否显示正确的提示信息，需要编写复杂的断言逻辑。而且，由于页面元素的状态可能受到多种因素的影响，如网络延迟、异步加载等，这使得界面断言更加复杂和不可靠。

Midscene.js：自动化测试的革新者

Midscene.js 是什么

在应对传统UI自动化测试的重重挑战时，Midscene.js应运而生，它是字节跳动团队开源的一款基于AI技术的自动化SDK，犹如一颗璀璨的新星，为UI自动化测试领域带来了新的曙光，其核心目标是极大地简化UI自动化测试的流程 ，让测试工作变得更加高效、便捷。

Midscene.js的工作原理基于大型语言模型（LLM），它能够像一位智能助手一样，精准解析用户输入的自然语言指令。比如当你向它下达 “输入文本”“点击按钮” 这样的指令时，它会迅速做出反应，执行相应的操作。这种智能交互方式，使得测试过程不再被复杂的代码和晦涩的技术细节所束缚，无论是经验丰富的技术专家，还是刚刚涉足测试领域的新手，都能轻松上手。

除了基本的动作执行，Midscene.js还具备强大的数据查询和页面断言功能。在数据查询方面，它可以根据你的需求，从复杂的页面内容中提取出关键信息，为数据分析和测试验证提供有力支持。而页面断言功能则像是一位严格的质量把关者，能够确保页面的状态和元素符合预期，及时发现潜在的问题和缺陷。

同时，Midscene.js还是一个开源项目，这意味着广大开发者可以自由地在自己的环境中运行它，根据实际需求进行定制和扩展。它支持与YAML脚本、Puppeteer和 Playwright等多种工具集成，能够灵活地适应多种自动化测试场景，为开发者提供了丰富的选择和无限的可能。

核心特点

1.自然语言交互：Midscene.js最显著的特点之一就是对自然语言的出色理解和应用能力。在传统的自动化测试模式中，测试人员往往需要花费大量的时间和精力编写复杂的代码，使用各种选择器和属性来定位和操作页面元素。这不仅要求测试人员具备扎实的编程基础，还容易在繁琐的代码编写过程中出现错误。而Midscene.js的出现，彻底打破了这一局面。它允许开发者使用自然语言来描述交互步骤，就像与一位贴心的助手交流一样简单。例如，你只需轻松地告诉Midscene.js“在搜索框中输入‘Headphones’，然后按 Enter”，它就能准确无误地理解你的意图，并自动执行相应的操作，无需编写任何繁琐的代码。这种自然语言交互的方式，极大地降低了自动化测试的门槛，使得非技术背景的人员，如产品经理、业务分析师等，也能够积极参与到测试工作中来。他们可以凭借对业务流程的熟悉，使用自然语言描述测试场景，为软件质量的保障贡献自己的力量，从而促进团队成员之间更加高效的协作。

2.多模态大型语言模型 (LLM)：Midscene.js的背后，是强大的多模态大型语言模型（LLM）在提供支持。这种模型犹如一个拥有超能力的智能大脑，不仅能够理解文本信息，还具备处理图像等多模态数据的能力。在UI自动化测试的过程中，Midscene.js会将页面的截图和元素坐标等信息，如同传递重要情报一样发送给LLM。LLM则会结合这些丰富的信息，像一位经验丰富的侦探一样，深入理解用户界面的结构和内容。

3.简化的命令和集成方式：Midscene.js提供了简洁明了的命令和多样化的集成方式，进一步提升了自动化测试的便捷性。它主要包含三个核心命令：

.ai（或.aiAction）、.aiQuery、.aiAssert

 .ai（或.aiAction）用于执行一系列动作，就像一个执行任务的小能手，能够按照你的指令，如 “点击登录按钮，然后输入用户名和密码”，有条不紊地完成各种交互操作。

 .aiQuery用于从UI中提取数据，你只需清晰地描述所需的数据格式，无论是使用JSON格式，还是用纯字符串描述，它都能像一个精准的数据挖掘者一样，从页面中提取出你需要的数据。

.aiAssert用于进行断言，例如页面上有一个“登录成功”的提示信息，它会严格检查页面状态是否符合你的断言条件，确保页面的正确性。

此外，Midscene.js的集成方式非常灵活。如果你想快速体验它的强大功能，可以通过Chrome扩展程序，在任何网页上使用自然语言执行动作、查询和断言，无需进行复杂的代码编写和环境搭建。如果你需要将其集成到自己的代码项目中，它可以与 Puppeteer、Playwright等自动化测试框架完美结合，借助这些框架的优势，进一步拓展Midscene.js的应用场景。它还支持使用YAML脚本进行自动化，对于那些熟悉YAML格式的开发者来说，这无疑提供了一种更加简洁、高效的自动化测试方式。

4.可视化报告和调试工具：Midscene.js在每次运行后，都会贴心地生成一个可视化报告。它提供了动画回放功能，你可以直观地查看自动化测试的全过程，仿佛亲眼目睹测试的每一个细节。同时，报告中还包含了每个步骤的详细信息，如执行时间、操作结果等，帮助你快速定位问题所在。例如，当测试出现失败时，你可以通过动画回放，清晰地看到是在哪一个步骤出现了异常，再结合步骤详情，就能迅速找到问题的根源。

此外，Midscene.js还提供了一个Playground工具，这是一个非常实用的调试利器。在Playground中，你可以自由地调整提示词，而无需重新运行整个脚本。这就好比在一个实验环境中，你可以随时尝试不同的参数和指令，观察它们对测试结果的影响。通过这种方式，你可以快速找到最适合的提示词，提高测试的准确性和稳定性，大大简化了调试过程，提高了开发效率。

5.开源和数据安全：Midscene.js是一个开源项目，采用MIT许可证，这意味着开发者可以在自己的环境中自由地运行和使用它，无需担心版权问题。同时，开源的特性也使得广大开发者能够共同参与到项目的改进和优化中来，促进项目的不断发展和完善。

在数据安全方面，Midscene.js采取了严格的保护措施。所有从页面收集的数据，都会直接发送到OpenAI或自定义模型提供商，就像一条安全的信息通道，只有开发者和模型提供商可以访问这些数据，不会有第三方平台介入。这种数据直连的方式，有效地保障了数据的安全性和隐私性，让开发者可以放心地将其应用于各种项目中，尤其是对于那些对数据安全要求较高的企业项目来说，Midscene.js的这一特性无疑具有极大的吸引力。

Midscene.js 在 UI 自动化测试中的使用步骤

安装和配置

1.快速体验：安装Chrome扩展程序：如果你只是想初步感受一下Midscene.js的神奇之处，那么从Chrome扩展程序入手是一个非常便捷的方式。配置好后就可以开始使用Midscene.js在网页上执行各种有趣的操作了。

2.深度集成到代码项目：如果你需要将Midscene.js深度集成到自己的代码项目中，以实现更复杂、更定制化的自动化测试功能，那么有多种集成方式可供选择。

3.与自动化测试框架集成：Puppeteer和Playwright是目前非常流行的自动化测试框架，Midscene.js可以与它们完美集成。以Puppeteer为例

npm install @midscene/web puppeteer ts - node --save - dev

如果你使用的是yarn，则运行

yarn add @midscene/web puppeteer ts - node --save - dev

安装完成后，在你的测试脚本中，就可以引入相关模块并进行配置了。比如：

  1. const puppeteer = require('puppeteer');
  2. const { PuppeteerAgent } from '@midscene/web/puppeteer';
  3.  
  4. const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
  5.  
  6. Promise.resolve((async () => {
  7.     const browser = await puppeteer.launch({ headless: false });//这里使用有头模式方便调试
  8.     const page = await browser.newPage();
  9.     await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 1 });
  10.     await page.goto('https://www.testerroad.com');
  11.     await sleep(5000);
  13.     // 初始化Midscene agent
  14.     const mid = new PuppeteerAgent(page);
  16.     // 执行搜索
  17.     await mid.aiAction('在搜索框输入"Headphones"，敲回车');
  18.     await sleep(5000);
  20.     // 理解页面，提取数据
  21.     const items = await mid.aiQuery('{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格');
  22.     console.log("耳机商品信息", items);
  24.     // 用AI断言
  25.     await mid.aiAssert("界面左侧有类目筛选功能");
  27.     await browser.close();
  28. })());

4.使用 YAML 脚本自动化：如果你对YAML格式比较熟悉，也可以使用YAML脚本进行自动化测试。首先，你需要创建一个YAML文件，在文件中描述你的测试流程。例如，以下是一个简单的YAML脚本，用于在Ebay网站上搜索耳机并提取相关信息：

  1. # 在Ebay网站搜索headphone，提取JSON格式的结果数据，并断言
  2. target:
  3.     url: https://www.ebay.com
  4.     output:./output/ebay - headphones.json
  5. tasks:
  6.     - name: search headphones
  7.         flow:
  8.             - aiAction: type 'Headphones' in search box, hit Enter
  9.             - aiWaitFor: there is at least one headphone item on page
  10.                 timeout: 10000
  11.     - name: extract headphones info
  12.         flow:
  13.             - aiQuery: >
  14.                     {name: string, price: number, actionBtnName: string}[], return item name, price and the action button name on the lower right corner of each item (like 'Remove')
  15.                 name: headphones
  16.     - name: assert shopping cart icon
  17.         flow:
  18.             - aiAssert: There is a shopping cart icon on the top right

配置好YAML脚本后，在终端中运行

midscene./your - script.yaml

写自然语言提示

1.交互操作：在使用Midscene.js进行UI自动化测试时，编写清晰、准确的自然语言提示是非常关键的。对于交互操作，我们可以使用.ai或.aiAction命令来描述。例如，当我们需要测试一个登录功能时，可以这样编写提示：

await mid.ai('点击登录按钮，然后输入用户名和密码') 

在这个提示中，我们详细地描述了每一个步骤，先点击登录按钮，然后输入用户名和密码。这样Midscene.js就能准确地理解我们的意图，并按照顺序执行相应的操作。如果提示过于简略，比如只写

await mid.ai('登录')

Midscene.js可能无法准确判断具体的操作步骤，从而导致测试失败。所以，在编写交互操作提示时，要尽可能详细地描述每个步骤，避免产生歧义。

2.数据查询：数据查询是UI自动化测试中常见的需求，Midscene.js提供了.aiQuery命令来满足这一需求。例如，在一个电商网站的测试中，我们想要获取商品列表中的名称和价格，就可以使用以下代码：

const items = await mid.aiQuery('{name: string, price: number}[], 获取商品列表中的名称和价格') 

这里我们使用了JSON格式来描述所需的数据结构，{name: string, price: number}[]表示我们需要一个包含商品名称（字符串类型）和价格（数字类型）的数组。当然，你也可以用纯字符串描述，比如

const items = await mid.aiQuery('获取商品列表中每一项的名称和价格') 

Midscene.js也会尽力理解并提取相应的数据。在描述数据查询时，要根据实际需求清晰地表达出想要的数据内容和格式。

3.断言验证：断言验证是确保页面状态和内容符合预期的重要手段，Midscene.js通过.aiAssert命令来实现。例如，在测试登录功能后，我们需要验证是否登录成功，可以编写

await mid.aiAssert('页面上有一个“登录成功”的提示信息')

如果页面上确实存在 “登录成功” 的提示信息，那么断言通过，测试继续进行；如果不存在，断言失败，测试会停止并给出相应的错误提示。通过合理使用断言，我们可以及时发现页面中不符合预期的情况，保证软件的质量。

4.运行和调试：当你完成了Midscene.js的安装配置和自然语言提示的编写后，就可以运行测试脚本了。在运行测试脚本时，Midscene.js会像一个勤劳的小助手一样，严格按照你编写的自然语言提示，一步一步地执行相应的操作。它会模拟用户在浏览器中的各种行为，如点击按钮、输入文本、滚动页面等，就好像真的有一个用户在手动操作浏览器一样。

在执行完所有操作后，Midscene.js还会贴心地生成一个可视化报告。这个报告就像是一份详细的测试记录，它以直观的方式展示了整个测试过程的每一个细节。报告中提供了动画回放功能，你可以通过这个功能，像观看视频一样，清晰地看到测试过程中浏览器页面的每一次变化，每一个操作的执行顺序和效果。同时，报告中还包含了每个步骤的详细信息，比如每个操作的执行时间、操作前后页面元素的状态变化等。通过这些信息，你可以快速了解测试的执行情况，判断测试是否成功。

然而，在实际的测试过程中，难免会遇到各种问题。有时候，可能因为自然语言提示的表述不够准确，导致Midscene.js执行的操作与预期不符；有时候，也可能是页面的结构发生了变化，使得Midscene.js无法正确定位到某些元素。当测试发现问题时，Midscene.js提供的Playground工具就派上用场了。你可以在Playground中轻松地调整提示词，就像在一个自由的实验环境中一样，尝试不同的表述方式，观察它们对测试结果的影响。在调整提示词后，你无需重新运行整个脚本，只需要重新运行相关部分的脚本即可。通过这种方式，你可以快速找到最适合的提示词，解决测试中出现的问题，直到测试通过为止。这种便捷的调试方式，大大提高了测试的效率和准确性，让你在进行UI自动化测试时更加得心应手。

Midscene.js 的应用场景

功能测试

在软件应用中，功能测试是确保各个功能模块正常运行的关键环节。Midscene.js在这方面发挥着重要作用，它能够通过自然语言交互，轻松验证各种常见功能。
以登录功能为例，我们可以使用Midscene.js编写如下测试脚本：

  1. await mid.ai('点击登录按钮，然后输入用户名和密码，点击确认登录');
  2. await mid.aiAssert('页面上显示用户个人信息，表明登录成功');

这样，Midscene.js会按照指令，模拟用户点击登录按钮，输入预先设定的用户名和密码，然后点击确认登录。最后，通过断言验证页面上是否显示了用户个人信息，以此来判断登录功能是否正常。

再比如注册功能的测试：

  1. await mid.ai('点击注册按钮，输入有效的邮箱、用户名和密码，确认注册信息无误后点击提交');
  2. await mid.aiAssert('页面跳转到注册成功提示页面，且收到注册成功的邮件通知');

Midscene.js会模拟用户完成注册的一系列操作，并验证是否成功跳转到注册成功提示页面，以及是否收到注册成功的邮件通知，从而确保注册功能的正确性。

对于搜索功能，测试脚本可以这样编写：

  1. await mid.ai('在搜索框中输入“手机”，点击搜索按钮');
  2. await mid.aiAssert('搜索结果页面显示与“手机”相关的商品列表');

Midscene.js会在搜索框中输入指定的关键词 “手机”，点击搜索按钮后，验证搜索结果页面是否显示了与 “手机” 相关的商品列表，以此来判断搜索功能是否正常工作。

在电商应用中，下单功能的测试至关重要：

  1. await mid.ai('选择一件商品，点击加入购物车，进入购物车页面，点击结算，选择收货地址和支付方式，点击提交订单');
  2. await mid.aiAssert('页面显示订单提交成功信息，且订单详情中包含所选商品和支付信息');

Midscene.js会模拟用户完成从选择商品到提交订单的整个流程，并通过断言验证页面是否显示订单提交成功信息，以及订单详情中是否包含所选商品和支付信息，确保下单功能的准确性和稳定性。

回归测试

在软件开发过程中，应用更新或重构是常见的操作。然而，每次更新都可能引入新的问题，影响原有功能的正常运行。这时，回归测试就显得尤为重要，它能够确保新版本的功能与旧版本保持一致，不会因为代码的修改而出现意外的问题。

Midscene.js在回归测试中具有显著的优势。它可以将之前编写的功能测试脚本保存下来，在应用更新或重构后，直接运行这些脚本。Midscene.js会根据自然语言指令，再次执行各项功能的测试，如登录、注册、搜索、下单等。通过与之前的测试结果进行对比，快速发现新版本中是否存在功能异常的情况。

性能测试

在如今这个快节奏的数字化时代，用户对于应用的性能要求越来越高。应用的性能，如页面加载速度、响应时间等，直接影响着用户体验。如果一个应用的页面加载缓慢，或者在用户操作后响应迟缓，很可能会导致用户流失。因此，性能测试成为了软件开发过程中不可或缺的一环。

Midscene.js在性能测试方面也有着出色的表现。通过自动化测试，它可以模拟大量用户的并发操作，从而有效地评估应用在高负载情况下的性能表现。在一个在线教育平台中，我们可以使用Midscene.js编写测试脚本，模拟多个用户同时登录、浏览课程、观看视频等操作。

  1. // 模拟多个用户同时登录
  2. for (let i = 0; i < 100; i++) {
  3.     await mid.ai('在新窗口中打开登录页面，输入用户名和密码，点击登录');
  4. }
  5. // 模拟用户浏览课程
  6. await mid.ai('在已登录的窗口中，点击课程列表，浏览不同课程页面');
  7. // 模拟用户观看视频
  8. await mid.ai('选择一门课程，点击进入课程详情，播放视频');

在执行这些测试脚本的过程中，Midscene.js会记录下每个操作的时间，包括页面加载时间、点击按钮后的响应时间等。通过对这些时间数据的分析，我们可以准确地评估应用的性能。如果发现页面加载时间过长，或者响应时间超出了可接受的范围，开发团队就可以针对性地进行优化，如优化代码结构、减少不必要的网络请求、优化服务器配置等，从而提升应用的性能，为用户提供更加流畅的使用体验。

跨平台测试

随着移动互联网的飞速发展，用户使用的设备和浏览器种类繁多。为了确保应用能够在各种环境下稳定运行，为用户提供一致的体验，跨平台测试成为了软件开发过程中必须重视的环节。

Midscene.js支持在不同的浏览器和设备上进行测试，这使得开发者能够轻松地验证应用在各种环境下的兼容性和稳定性。无论是在Chrome、Firefox、Safari等常见的桌面浏览器上，还是在手机、平板等移动设备上，Midscene.js都能发挥其强大的自动化测试能力。

例如，在开发一款移动电商应用时，我们可以使用Midscene.js编写测试脚本，在不同的浏览器和设备上进行测试。在Chrome浏览器的桌面端，模拟用户搜索商品、添加到购物车、下单等操作；在Safari浏览器的移动端，验证应用的界面布局是否正常，操作是否流畅；在Firefox浏览器的平板端，检查应用的各项功能是否能够正常使用。

  1. // 在Chrome桌面浏览器上测试
  2. const browser1 = await puppeteer.launch({ product: 'chrome' });
  3. const page1 = await browser1.newPage();
  4. const mid1 = new PuppeteerAgent(page1);
  5. await mid1.ai('在搜索框输入“运动服装”，点击搜索按钮');
  6. await mid1.aiAssert('搜索结果页面显示运动服装相关商品');
  7. await browser1.close();
  8.  
  9. // 在Safari移动浏览器上测试
  10. const browser2 = await puppeteer.launch({ product:'safari' });
  11. const page2 = await browser2.newPage();
  12. const mid2 = new PuppeteerAgent(page2);
  13. await mid2.ai('选择一件商品，点击加入购物车');
  14. await mid2.aiAssert('购物车中显示所选商品');
  15. await browser2.close();
  16.  
  17. // 在Firefox平板浏览器上测试
  18. const browser3 = await puppeteer.launch({ product: 'firefox' });
  19. const page3 = await browser3.newPage();
  20. const mid3 = new PuppeteerAgent(page3);
  21. await mid3.ai('点击我的订单，查看历史订单');
  22. await mid3.aiAssert('历史订单页面显示正确的订单信息');
  23. await browser3.close();

通过在不同浏览器和设备上的测试，我们可以及时发现应用在不同环境下可能出现的兼容性问题，如界面显示异常、功能无法正常使用等。然后，开发团队可以根据这些问题进行针对性的调整和优化，确保应用在各种环境下都能稳定运行，为用户提供可靠的服务。

Midscene.js 的实际案例展示

示例演示

1.打开电商网站：使用Midscene.js与Puppeteer集成，通过Puppeteer的launch方法启动浏览器，然后使用newPage方法创建一个新页面，最后使用goto方法导航到指定的电商网站。这一步就像是我们亲自打开浏览器，输入网址，进入电商平台的首页。

2.在搜索框输入商品关键词，点击搜索按钮：借助Midscene.js的自然语言交互能力，使用.ai或.aiAction命令，描述在搜索框输入商品关键词并点击搜索按钮的操作。Midscene.js会根据指令，精准地找到搜索框，输入我们指定的关键词，如 “耳机”，然后点击搜索按钮，就像我们手动在网页上进行这些操作一样。

3.从搜索结果中提取商品信息，如名称、价格等：利用Midscene.js的.aiQuery命令，以自然语言描述我们想要提取的数据格式，如 “{name: string, price: number}[], 获取商品列表中的名称和价格”。Midscene.js会像一个智能的数据提取器，从搜索结果页面中准确地提取出每个商品的名称和价格信息，并以我们指定的JSON格式返回。

4.选择某一商品，点击进入商品详情页，添加到购物车：继续使用.ai或.aiAction命令，描述选择某一商品，点击进入商品详情页，然后添加到购物车的操作。Midscene.js会模拟用户的操作流程，在搜索结果中选择我们指定的商品，点击进入商品详情页，找到添加到购物车的按钮并点击，完成商品添加到购物车的操作。

5.进入购物车，点击结算，输入收货地址、支付信息等，完成购买流程：同样通过.ai或.aiAction命令，依次描述进入购物车、点击结算、输入收货地址和支付信息，最后点击提交订单的操作。Midscene.js会按照指令，一步步完成整个购买流程，就像真实用户在购物一样。

6.使用断言验证各个步骤的页面状态和操作结果是否符合预期：在每个关键步骤之后，使用Midscene.js的.aiAssert命令，以自然语言描述预期的页面状态或操作结果，如 “页面上显示商品已成功添加到购物车的提示信息”“结算页面显示正确的商品总价” 等。
Midscene.js会根据这些断言，检查页面状态和操作结果是否与我们的预期一致，如果不一致，会及时给出错误提示，帮助我们发现问题。

  1. const puppeteer = require('puppeteer');
  2. const { PuppeteerAgent } = require('@midscene/web/puppeteer');
  3.  
  4. const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
  5.  
  6. Promise.resolve((async () => {
  7.     const browser = await puppeteer.launch({ headless: false });//这里使用有头模式方便调试
  8.     const page = await browser.newPage();
  9.     await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 1 });
  10.     await page.goto('https://www.testerroad.com');
  11.     await sleep(5000);
  13.     // 初始化Midscene agent
  14.     const mid = new PuppeteerAgent(page);
  16.     // 打开电商网站
  17.     await mid.ai('打开电商网站');
  19.     // 在搜索框输入商品关键词，点击搜索按钮
  20.     await mid.ai('在搜索框输入“耳机”，点击搜索按钮');
  21.     await sleep(5000);
  23.     // 从搜索结果中提取商品信息
  24.     const items = await mid.aiQuery('{name: string, price: number}[], 获取商品列表中的名称和价格');
  25.     console.log('商品信息:', items);
  27.     // 选择某一商品，点击进入商品详情页，添加到购物车
  28.     await mid.ai('选择第一个商品，点击进入商品详情页，点击添加到购物车按钮');
  29.     await sleep(5000);
  31.     // 进入购物车，点击结算，输入收货地址、支付信息等，完成购买流程
  32.     await mid.ai('进入购物车，点击结算，输入收货地址“北京市朝阳区XX街道XX号”，选择支付方式为“微信支付”，点击提交订单');
  33.     await sleep(5000);
  35.     // 使用断言验证各个步骤的页面状态和操作结果是否符合预期
  36.     await mid.aiAssert('页面上显示商品已成功添加到购物车的提示信息');
  37.     await mid.aiAssert('结算页面显示正确的商品总价');
  38.     await mid.aiAssert('页面上显示订单提交成功的提示信息');
  40.     await browser.close();
  41. })());

可视化报告分析

当我们运行上述测试脚本后，Midscene.js会生成一个详细的可视化报告。在这个报告中，我们可以清晰地看到每个步骤的执行情况，就像观看一场精彩的电影回放一样。

1.操作是否成功：通过报告中的动画回放功能，我们可以直观地看到浏览器页面上的每一个操作步骤，如是否成功点击了搜索按钮、是否成功添加商品到购物车等。如果某个操作出现了问题，例如按钮点击没有反应，我们可以从动画中明显地观察到异常，快速定位到问题所在。

2.数据提取是否正确：对于数据提取步骤，报告中会展示Midscene.js提取到的商品信息，如名称和价格。我们可以将提取到的数据与预期的数据进行对比，检查数据提取是否准确无误。如果提取到的数据与实际页面上的数据不一致，或者数据格式不符合我们的要求，就可以通过报告发现问题，并进一步分析原因。

3.如何通过报告快速定位和解决问题：报告中不仅包含动画回放和操作结果，还详细记录了每个步骤的执行时间、查询 (Query)、计划 (Planning) 和动作 (Actions) 等信息。当测试出现问题时，我们可以根据这些详细信息，逐步分析问题产生的原因。

总结

Midscene.js作为一款创新的基于AI技术的自动化SDK，为UI自动化测试带来了诸多变革性的优势。其独特的自然语言交互功能，使得测试人员能够以更加直观、便捷的方式编写测试用例，大大降低了测试的门槛，促进了团队成员之间的协作。多模态大型语言模型的支持，让Midscene.js能够更准确地理解页面结构和内容，执行复杂的交互操作并提取数据。简化的命令和多样化的集成方式，以及可视化报告和调试工具，都进一步提升了测试的效率和准确性。

在实际应用中，Midscene.js已在功能测试、回归测试、性能测试和跨平台测试等多个场景中展现出强大的能力，帮助开发者有效地保障了软件的质量和稳定性。通过实际案例的展示，我们可以清晰地看到Midscene.js在提升测试效率和发现问题方面的显著效果。

尽管Midscene.js目前还存在一些局限性，如推理耗时、交互类型有限和对指令准确性要求高等，但随着技术的不断发展和改进，这些问题有望逐步得到解决。未来，Midscene.js在技术改进和应用拓展方面有着广阔的前景，有望为UI自动化测试带来更多的突破和创新。

对于广大测试工程师而言，Midscene.js无疑是一款值得尝试的强大工具。它能够为测试工作带来前所未有的便利和高效，帮助测试工程师更好地应对软件测试中的各种挑战。

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

程序员小濠
微信公众号
免费领取测试资源、大厂面试真题、学习路线
注：本文转载自blog.csdn.net的小码哥说测试的文章"https://blog.csdn.net/jiangjunsss/article/details/145548746"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！