Midscene与Qwen-VL模式小试UI自动化

背景

Midscene.js是一款由字节跳动Web Infra团队开发的开源、基于AI技术的UI自动化工具，其应用场景广泛且多样：

1. 自动化测试

• 功能测试：Midscene.js能够模拟用户操作，如点击按钮、输入文本等，对Web应用进行功能测试，确保应用在不同情况下都能稳定运行。
• 冒烟测试：对于简单的站点走查和编译产物巡检场景，Midscene.js尤为实用，可以快速验证关键用户路径是否可用。
• 端到端测试：通过与Puppeteer、Playwright等自动化测试框架集成，Midscene.js可以实现端到端的自动化测试，覆盖更全面的测试场景。

2. 数据抓取

• 自定义数据查询：Midscene.js允许用户通过自然语言描述所需的数据格式，从复杂的页面内容中提取出关键信息，为数据分析和业务决策提供支持。

3. 性能监控

• 页面加载时间：通过自动化测试，Midscene.js可以监测页面的加载时间，帮助开发者优化应用性能。
• 响应速度：测试用户交互的响应速度，确保应用在高并发场景下仍能保持良好的用户体验。

4. 界面一致性检查

• UI元素检查：Midscene.js可以自动检查页面上的UI元素是否符合预期，如颜色、字体、布局等，确保应用在不同设备和浏览器上的一致性。

5. 快速原型验证

• 用户交互验证：在产品开发初期，Midscene.js可以帮助开发者快速验证用户交互设计，通过模拟用户操作来评估交互的流畅性和易用性。

6. 持续集成与持续交付（CI/CD）

• 自动化测试集成：Midscene.js可以集成到CI/CD流水线中，实现自动化测试的持续运行，确保每次代码提交都不会引入新的错误。

7. 教育与培训

• 自动化测试教学：Midscene.js的自然语言交互方式降低了自动化测试的门槛，使得非专业编程人员也能够轻松上手，因此它也可以用于自动化测试的教学和培训中。

从 Midscene v0.12 开始，适配了千问 Qwen-2.5-VL 模型。

安装插件

https://www.crxsoso.com/webstore/detail/gbldofcpkknbggpkmbdaefngejllnief

Qwen 2.5 VL

特性

• 低成本：Midscene 不需要发送 DOM 树给模型。和 gpt-4o 相比，它可以节省 30% 到 50% 的 token 消耗，复杂场景下甚至更多。
• 高分辨率支持：Qwen 2.5 VL 支持更高的分辨率输入，足以满足大多数情况。
• 开源：这是一个开源模型，因此你可以选择使用云提供商已经部署好的版本，或者自己部署到你自己的服务器上。

限制

• 小图标识别能力较差：和 gpt-4o 一样，它可能无法准确定位小图标。
• 断言能力一般：在某些情况下，Qwen 2.5 VL 的断言能力可能不如 gpt-4o。
• 无法使用缓存：目前在 Qwen 2.5 VL 中无法使用 Midscene.js 的缓存功能。

配置

OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"

OPENAI_API_KEY="sk-222222222222222222222"

MIDSCENE_MODEL_NAME="qwen-vl-max-latest"

MIDSCENE_USE_QWEN_VL=1

实战

以博客园为例

下载report

token消耗

usage

{ "prompt_tokens": 2150, "completion_tokens": 146, "total_tokens": 2296, "completion_tokens_details": { "text_tokens": 146 }, "prompt_tokens_details": { "text_tokens": 729, "image_tokens": 1421 } }

搜索框定位

其他探索

     虽然 Midscene.js 支持点击、输入、滚动、拖拽等常见操作，但滑块验证码的验证过程可能涉及更复杂的用户行为模式检测，如滑动轨迹、滑动速度等。这些复杂的行为模式可能无法通过简单的自然语言描述来模拟。此外，Midscene.js 在处理某些复杂操作时可能需要手写代码进行配合，而滑块验证码的验证过程可能就属于这种复杂操作。因此，即使 Midscene.js 能够模拟滑块的拖动操作，也可能无法通过验证码的验证逻辑。

Midscene.js 对 UI 自动化测试的意义

一、降低自动化测试门槛

• 自然语言交互：Midscene.js 允许测试人员使用自然语言描述测试步骤，而无需编写复杂的代码。这大大降低了自动化测试的门槛，使得非专业编程人员也能够轻松上手。
• 简化测试代码：通过自然语言描述，测试人员可以更直观地表达测试意图，减少了编写和维护测试代码的工作量。

二、提高测试效率

• 快速编写测试用例：Midscene.js 的自然语言交互方式使得测试人员能够更快地编写测试用例，缩短了测试周期。
• 自动化执行：Midscene.js 可以与 Puppeteer、Playwright 等自动化测试框架集成，实现测试用例的自动化执行，提高了测试效率。

三、增强测试灵活性

• 支持多种操作：Midscene.js 支持点击、输入、滚动、拖拽等常见操作，以及更复杂的用户行为模拟，如鼠标悬停、键盘输入等。这使得测试人员能够更灵活地模拟用户操作，覆盖更全面的测试场景。
• 易于扩展：Midscene.js 的设计允许测试人员根据需要扩展其功能，以满足特定的测试需求。

四、提升测试准确性

• 减少人为错误：自动化测试可以减少人为操作带来的错误，提高测试的准确性。
• 稳定执行：Midscene.js 可以稳定地执行测试用例，不受环境、时间等因素的影响，确保测试结果的可靠性。

五、促进团队协作

• 易于理解：自然语言描述的测试用例更易于被团队成员理解和评审，促进了团队协作和沟通。
• 共享测试资源：Midscene.js 支持测试资源的共享和复用，使得团队成员可以更有效地利用测试资源，提高测试效率。

---

今天先到这儿，希望对云原生，技术领导力， 企业管理，系统架构设计与评估，团队管理, 项目管理, 产品管理，信息安全，团队建设 有参考作用 , 您可能感兴趣的文章:
构建创业公司突击小团队
国际化环境下系统架构演化
微服务架构设计
视频直播平台的系统架构演化
微服务与Docker介绍
Docker与CI持续集成/CD
互联网电商购物车架构演变案例
互联网业务场景下消息队列架构
互联网高效研发团队管理演进之一
消息系统架构设计演进
互联网电商搜索架构演化之一
企业信息化与软件工程的迷思
企业项目化管理介绍
软件项目成功之要素
人际沟通风格介绍一
精益IT组织与分享式领导
学习型组织与企业
企业创新文化与等级观念
组织目标与个人目标
初创公司人才招聘与管理
人才公司环境与企业文化
企业文化、团队文化与知识共享
高效能的团队建设
项目管理沟通计划
构建高效的研发与自动化运维
某大型电商云平台实践
互联网数据库架构设计思路
IT基础架构规划方案一(网络系统规划)
餐饮行业解决方案之客户分析流程
餐饮行业解决方案之采购战略制定与实施流程
餐饮行业解决方案之业务设计流程
供应链需求调研CheckList
企业应用之性能实时度量系统演变

如有想了解更多软件设计与架构, 系统IT,企业信息化, 团队管理 资讯，请关注我的微信订阅号：

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 该文章也同时发布在我的独立博客中-Petter Liu Blog。