基于UI交互意图理解的异常检测方法13

最新推荐文章于 2025-04-13 22:00:00 发布

小桥流水'℡

最新推荐文章于 2025-04-13 22:00:00 发布

阅读量1k

点赞数 17

文章标签： ui

本文链接：https://blog.youkuaiyun.com/akppp/article/details/144461077

版权

1. 背景

近年来，随着美团多种业务线的扩充和迭代，UI测试的任务愈发繁重。针对UI测试中人工成本过高的问题，美团到店测试团队开发了视觉自动化工具以进行UI界面的静态回归检查。然而，对于UI交互功能逻辑的检验仍强依赖于脚本测试，其无法满足对于进一步效率、覆盖面提升的强烈需求。主要难点体现在两方面：

前端技术栈多样，不同页面的实现方式各异，这导致不同页面中功能相似的UI模块的组件树差异很多，基于规则的测试脚本也就很难具备泛化能力，生产、维护的成本非常高。
UI样式繁多，同样的功能模块可能在视觉上有很大差异，这为基于CV方法实现自动化驱动带来了困难。

考虑上述两个难点，美团到店平台技术部/质量工程部与复旦大学计算机科学技术学院周扬帆教授团队展开了“基于UI交互理解的智能化异常检测方法”的科研合作，利用多模态模型对用户可见文本、视觉图像内容和UI组件树中的属性进行融合，实现了对于UI交互意图[1]的准确识别。该工作对于大前端UI的质量保障等多个领域都具有可借鉴的意义，介绍该工作的学术论文[2]已经被 ESEC/FSE 2023 （软件领域CCF A类推荐会议）接收，并将于12月6日在其工业届轨（Industry track）公开发布、推介。

2. UI交互介绍

2.1 UI模块与交互意图

移动应用由“页面”组成，不同页面中的不同“模块”为用户提供着不同的功能。用户在浏览页面时，根据以往使用经验以及当前页面中的图像、文字、页面结构等信息，可快速理解页面当中不同【模块】所想要提供的【功能】，以及通过该功能用户能够达到的【目的】。这些被用户认为能够提供特定功能并达到预期目的的页面模块，我们将其命名为一个【交互意图簇】。

以下图中的页面为例，不同模块通常对应不同的交互意图类型划分。比如商品详情区域，我们可以得知此模块主要是向我们展示当前商品最主要的信息，起展示作用；而顾客信息区域，需要用户进行点击或输入个人信息，用以补全整个订单所需要的信息；同时页面当中也会存在各类功能按钮，通过按钮的位置、文本信息、图标等信息，用户也可以大致推断出操作后会得到怎样的结果。由此，我们可以将UI交互意图定义为「用户通过当前UI展示推断出来的不同模块的概念及交互功能」。

图1 模块的概念及交互功能样例

2.2 当下痛点与启示

对于复杂的UI交互场景，如提交订单页，测试人员需要对不同模块制定较复杂的测试流程、测试规则，同时编写及维护复杂的自动化测试逻辑。以美团内的App测试场景为例，许多不同的页面有着相似的功能模块，这些功能模块尽管表象不同，但对于一般用户来说，交互意图明确且相似，没有理解困难。如：

图2 相似的功能模块

2.3 研究目标

本课题期望结合多种机器学习方法，通过机器获取与人工认知一致的“交互意图”，从而利用该信息模拟测试人员对客户端产品进行“理解-操作-检查”的测试验证流程。如人工操作一般，我们希望该能力能够以一个与一般用户类似的逻辑来操作、检查相似的功能，同时兼容不同的技术栈、App、业务领域，无需特定适配。就像一个用户在美团上能够订酒店，在没有使用过的点评或者美团小程序上也同样能完成预订酒店的流程。

从能力目标视角来看，UI交互意图识别的定位是完成一般用户的交互概念到页面实体的映射。由人直接进该映射的准确率最高、泛化性最好，典型的场景就是手工测试，即人观测页面后操作、检查。人能在不同的设计、程序实现形式下实现下找到目标操作实体（例如各种各样的提交按钮、商品卡片）。当前的自动化脚本测试提高了效率，但由于映射的泛化性较差，往往需为每个页面做单独的适配。

此外，业内尝试了诸如CV页面目标检测等方法，但在鲁棒性、泛化性、使用成本等方面上仍不太令人满意。本研究旨在利用深度学习和多模态信息，通过少量标注数据，尽可能提升交互意图识别的映射能力，使其接近人的识别、认知水平。

图3 UI交互意图理解的能力目标