AutoConsis：UI内容一致性智能检测6

可参考美团技术团队

1. 背景

目前，移动App上的业务页面愈发复杂，技术团队常会以页面为单位来拆解团队开发分工，同一类业务元素信息分散在不同团队负责的页面内。在具体的实践中，存在一类不易检出但又影响用户体验的异常：页面中的UI信息相互矛盾（如下图中同一个商品在多个页面上的实际价格不一致）。此类UI内容不一致的异常，没有固定的出现位置和表现规律，长期以来主要依赖测试人员对于UI的熟悉度，主要靠手工测试执行时来随机进行发现。

图：界面间UI内容不一致举例（示意图）

美团App中的众多业务具备内容繁多的多种页面布局，以及多技术栈共存，如何低成本地在多类业务、多样化布局、多技术栈的UI页面间检测内容一致性，是终端测试领域中的一项重要挑战。

图：UI和API服务对应关系（以价格计算为例）

为解决该问题，美团到店研发平台质量工程部与复旦大学计算机学院周扬帆教授团队展开了大前端智能化测试领域的科研合作，在UI认知与校验方面积累了多项智能技术。在应用方面，我们选择从UI界面内容一致性校验入手，对多个页面状态信息的合理性与一致性进行自动化检查，并在美团App中的多类营销业务场景中进行落地。

在方法上，我们针对UI层面设计并实现了一套自动化智能检测流程，取名为AutoConsis，在UI内容一致性检测上做到了低成本、高泛化性、高置信度。该工作对于大前端UI的质量保障多个领域都具有可借鉴意义，并产出了一篇学术论文《AutoConsis: Automatic GUI-driven Data Inconsistency Detection of Mobile Apps》，该论文被软件工程领域具有国际影响力的会议ICSE 2024（CCF-A类会议）的Software In Practice Track（软件工程实践应用）收录。

2. 实现原理与项目实践

本文以特价商品营销业务为例，来介绍智能化UI内容一致性检测所需要的能力。特价商品营销是一种大型促销应用，与之相关的一致性测试涉及数百个城市，单个城市内的多个商品品类，每个商品的多个所涉及页面，其状态空间非常复杂。传统的自动化测试方法需要对各个状态逐一适配，成本极高。理想情况下，我们需要提供一种低成本、易适配、可以覆盖所有状态的能力，同时还需要较强的泛化迁移能力，在不同页面模板、技术栈、App上自动进行适配。

具体到特价商品营销的一致性校验，其包含营销会场页、详情页、提单页等多个页面，不同页面之间价格的一致性是检查的重点。对于每一件商品，我们希望从上述三个页面中识别出商品的价格，并判断其是否一致。需要注意的是，由于商品的价格受优惠活动的影响，而优惠活动有多种形式，因此如何准确分析出各页面中商品的价格是主要难点。

2.1 总体流程

AutoConsis的核心优势在于其在泛化性、准确性上的良好效果。电商平台中的内容一致性校验，包括商品名称、描述、价格、库存方面的校验，本质是对UI页面的特定信息提取，价格一致性采用的也是信息提取流程。我们将UI页面分析任务转化为目标检测和内容理解的组合，利用了大语言模型的能力，实现对不同技术栈页面的适应能力。以下介绍工具的设计过程。

AutoConsis有三个关键处理流程：

• 目标区域识别：AutoConsis首先识别UI界面中与检测相关的关键区域。通过图像处理和模式识别，工具能够准确地定位到包含重要信息的UI部分。
• 目标信息抽取：在目标区域确认后，经过OCR和UI组件分析工具（使用自建的开源系统能力Vision-UI）提取目标区域的文本和元素，填入预先设置好的CoT Prompt（CoT, Chain of Thought），通过大模型推理提取一致性校验所需要的关键信息。
• 一致性判断：AutoConsis对提取出的信息进行一致性校验，确保UI信息的准确性和一致性。

下面我们会以「购买特价商品」场景为例来介绍AutoConsis的工作流程。如下图所示：AutoConsis首先从一个营销会场页开始分析，其主要包含一个商品列表，经过目标区域识别模块识别出各个商品卡片，再从各个商品卡片的截图中识别出原价和折扣等金额相关的信息。之后继续提取每个页面的相关价格信息，最后由一致性判断模块检查页面间的价格一致性。

图：AutoConsis的工作流程（以购买特价商品为例）

2.2 目标区域识别

为了提取关键的一致性信息，在实践中我们发现：将页面上所有的文字OCR识别后直接交给LLM分析，得到的分析结果并不准确。我们分析后认为，UI界面包含大量的与当前检测需求无关的文字，噪声过大干扰了LLM的判断。因此，我们考虑对UI界面进行裁切，即通过目标区域识别的方式将无用的文字信息去掉，从而使LLM聚焦。

图像的目标识别是CV领域的传统方向，基于传统深度学习的目标检测模型对适配复杂多变的UI界面成本很高，需要进行大量的数据标注和训练工作才能够使用，同时泛化性也一般。为了使方法具备良好的泛化性，同时能够以较低的成本使用，我们采用了基于视觉语义的识别模型CLIP（Contrastive Language-Image Pre-training， 由OpenAI提出的图像-文本语义匹配模型）。CLIP可以将图像和文字的语义映射在同一个高维向量空间，且由于经过海量数据的训练其具备良好的通用性。针对UI的目标区域识别场景，我们对其原有设计进行了改进。具体来说，我们提供图像和文本两种检索词并设置权重进行多模态的匹配。

图：目标UI区域识别流程

为了验证上述多模态UI区域识别流程的有效性，我们设计了检索词仅包含图像和仅包含文本两个单模态的目标区域识别算法作为CLIP多模态算法的对照组。考虑到商品信息在线上购物应用中的核心作用，以及其用户界面通常较为复杂，我们决定选用商品信息界面作为UI区域识别算法的测试场景。具体来说，我们收集了100个商品列表页，测试多模态UI区域识别算法和两个对照方法从中识别商品卡片的效果。实验收集到了如下数据：

由该实验数据可见，经图像和文本两种信息相互补充（Multi-Modal），AutoConsis采用的识别算法能有效识别出目标UI区域。

对于营销会场页而言，如UI区域识别流程图所示：我们将一个会场页的UI截图送入识别模型，并提供一个商品卡片和对应的文本描述作为检索词，该多模态模型会根据检索词从经UI组件分析处理过的会场页中筛选出近似的商品卡片。

图：营销会场页商品卡片识别示例

2.3 目标信息提取

目标区域的识别可以减少UI中大部分无关信息，但判断UI内容是否一致还需要关键的校验点信息（例如商品价格一致性的关键信息是价格和折扣），因此还需要对提取到的UI目标区域做关键信息提取。由于UI的样式多样，同类业务上的关键信息（如商品详情卡片上的折扣）往往有多种表达形式，难以通过通用性规则准确提取。对此，AutoConsis借助了大语言模型的理解能力对页面进行理解分析，同时针对大语言模型常见的“幻觉”问题，我们按照上下文学习（即In-Context Learning，指一种让LLM在提示词中进行类比学习的增强手段。）的思路参考“思维链CoT”的范式设计了信息提取Prompt。

在流程上，对于每一个UI目标区域，AutoConsis利用OCR提取所有可识别的字符，随后将分词的结果与CoT示例进行拼合构成Prompt，最后从LLM（AutoConsis的实验部分调用GPT-3.5-Turbo完成）的输出中获取一致性检验所需的关键信息。同样，为了定量地探究AutoConsis所采用Prompt的有效性，我们设计了两种Prompt进行了消融实验：去除了推理过程的Standard ICL（Standard In-Context Learning）和直接去除示例的Zero-shot。

图：两种对照Prompt示例

选取的实验场景为从商品卡片中提取价态信息，实验数据见下表：

在特价营销的价格一致性检查场景下，我们希望从商品卡片中识别出与价格相关的所有信息，并分析出原价、优惠和现价。AutoConsis首先利用OCR从前述商品卡片中获取所有文本信息，再利用包含商品价格推理例子的Prompt从中解析出上述三个价态信息。对于其他营销模式如满减，可以对应修改Prompt中的示例和回答指令。

图：从营销会场页商品卡片中提取价态信息示例

2.4 一致性校验

一致性问题的校验设计简单直接，AutoConsis会依据预先定义的校验规则判断前述提取出的UI内容的一致性。具体来说，从校验的规则有两种类型：数值逻辑类型和语义类型。对于数值逻辑类型的一致性问题（如检查商品价格在不同页面的一致性）AutoConsis使用规则直接检查其一致性；对于相对复杂的语义规则（如校验商品与所属类别是否一致），则设计CoT Prompt、借助LLM对自然语言的理解能力实现最终校验（见下图所示）。

图：利用LLM实现的品类一致性校验示例

对于营销场景的价态检查，AutoConsis会对于每个商品检查会场页、详情页和订单页的现价是否一致（如下图所示）。

图：对营销场景价态的一致性校验示例

2.5 MLLM相关方案讨论

在探索过程中，随着多模态大语言模型（MLLM）的发展，我们也尝试了用GPT-4V解决UI一致性检查的问题的可行性和效果。我们选取营销会场的商品列表页作为测试场景，对比两种方法在提取商品价格上的效果和成本。验证时，我们将营销会场的完整UI界面截图作为输入，让GPT-4V返回每种商品的原价、优惠/折扣以及现价，如果三个信息都与截图一致，则认为识别正确。

AutoConsis作为一整套一致性检测流程，相比于直接应用MLLM作为整体UI图像输入来判断，适配的复杂度会更高一些。但从结果看，AutoConsis在执行效率、检测结果的可靠性、执行成本三个方面均更具优势。当前业务一次巡检需在几千量级的页面规模上使用，所以我们选择AutoConsis来批量进行业务应用落地。

3. 应用效果

目前，该能力在美团特价团购营销会场场景上覆盖了700城市、4000多页面，在项目开城与后续迭代过程中，持续以巡检形式执行，期间共发现几十个有效的业务问题。

图：业务缺陷示例- 左侧为详情页，右侧为提单页，总价不一致

同时我们通过在营销会场上的落地应用形成了一套标准化工程流程，在其他有类似校验需求的业务场景快速完成了落地。下面是我们基于这套标准流程已经实现并应用的另一些项目：

门票运营活动巡检：分析页面所有可能有运营的位置，点击后判断内容和活动是否一致。目前已在12个城市的200个页面上进行使用，共计发现了8个有效问题。

优选品类巡检：分析优选业务中的各个商品与所属类别是否一致。

4. 认知与展望

将一个问题拆解为一连串的步骤，在每个步骤更加针对性地应用智能化能力，在现阶段往往能取得更好的效果。AutoConsis所具备的UI分析和数据检查能力并不局限于内容一致性检测，目标领域识别->目标信息抽取->检测判断，这实际上是一个大前端通用的校验流程，相比传统的自动化方案有低成本、泛化性强等优势，相信未来可以在更多前端测试场景中进行推广。

图：Agent学习人类偏好经验流程

目前，我们正在尝试将AutoConsis的校验流程和Agent能力相融合，让Agent能根据人类反馈指令自我迭代，以更接近人的水平去操作和校验UI，智能化的帮助节省人工时间，相关能力已经在美团的直播视频化等业务领域进行落地。后续，我们将结合更多业务需求对AutoConsis进行持续改进与维护，也欢迎业界同行们的反馈与交流。