【UIAutomation】AI驱动的UI自动化工具midscene

介绍

Midscene.js 是一个由 AI 驱动的 UI 自动化测试框架,旨在通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,并生成可视化报告。

github 地址:https://github.com/web-infra-dev/midscene

传统 UI 自动化测试的局限性

测试脚本编写与维护难点

  • 学习特定框架事件语法
  • selector 选择器问题
    • 难以对抗页面变化
    • 需要侵入业务代码
  • 页面信息提取困难
  • 测试脚本可读性/可维护性差
  • 报告可读性差

视觉检查

  • 白屏检查困难(监测 dom 渲染变化不稳定)
  • 样式错乱(依赖人工视觉检查)

midscene 基于 AI 多模态的测试框架

  • 让 UI 自动化测试脚本变得更容易编写、更易维护
  • 对传统 E2E 工具和人工 QA 带来变革

产品形态

  • 浏览器插件(自然语言)
  • 与测试框架集成(playwright、puppeteer)
  • cli(yaml 文件)

与传统 UI 自动化测试框架对比

传统 UI 自动化测试 多模态 AI 自动化测试
可维护性 🌟 🌟 🌟 🌟 🌟 🌟
可读性 🌟 🌟 🌟 🌟 🌟 🌟
开发成本 🌟 🌟 🌟 🌟 🌟 🌟
开发体验 🌟 🌟 🌟 🌟 🌟 🌟
视觉检查能力 🌟 🌟 🌟 🌟 🌟 🌟

常用 api

agent.ai() / agent.aiAction()

1
2
function aiAction(steps: string): Promise<void>;
function ai(steps: string): Promise<void>; // shorthand form

Examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Basic usage
await agent.aiAction(
  'Type "JavaScript" into the search box, then click the search button'
)

// Using the shorthand .ai form
await agent.ai(
  'Click the login button at the top of the page, then enter "test@example.com" in the username field'
)

// Complex example of target-oriented prompts from the ui-tars model
// Other models recommend writing the execution steps for each step
await agent.aiAction(`
  1. Scroll to the product list
  2. Locate the "Sauce Labs Backpack" item
  3. Click its "Add to cart" button
  4. Wait for the shopping cart icon to update
`)

agent.aiQuery()

1
function aiQuery<T>(dataShape: string | Object): Promise<T>;

Examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const dataA = await agent.aiQuery({
  time: 'The date and time displayed in the top-left corner as a string',
  userInfo: 'User information in the format {name: string}',
  tableFields: 'An array of table field names, string[]',
  tableDataRecord:
    'Table records in the format {id: string, [fieldName]: string}[]',
})

// You can also describe the expected return format using a string:

// dataB will be an array of strings
const dataB = await agent.aiQuery('string[], list of task names')

// dataC will be an array of objects
const dataC = await agent.aiQuery(
  '{name: string, age: string}[], table data records'
)

agent.aiAssert()

1
function aiAssert(assertion: string, errorMsg?: string): Promise<void>;

Example:

1
await agent.aiAssert('The price of "Sauce Labs Onesie" is 7.99')
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计