美團到店研發平臺質量工程部與復旦大學計算機學院周揚帆教授團隊展開了大前端智慧化測試領域的科研合作，從UI介面內容一致性校驗入手，並實現了一套自動化智慧檢測流程，相關論文被軟體工程領域具有國際影響力的會議ICSE 2024（CCF-A類會議）的Software In Practice Track（軟體工程實踐應用）收錄。
1. 背景
目前，移動App上的業務頁面愈發複雜，技術團隊常會以頁面為單位來拆解團隊開發分工，同一類業務元素資訊分散在不同團隊負責的頁面內。在具體的實踐中，存在一類不易檢出但又影響使用者體驗的異常：頁面中的UI資訊相互矛盾（如下圖中同一個商品在多個頁面上的實際價格不一致）。此類UI內容不一致的異常，沒有固定的出現位置和表現規律，長期以來主要依賴測試人員對於UI的熟悉度，主要靠手工測試執行時來隨機進行發現。
美團App中的眾多業務具備內容繁多的多種頁面佈局，以及多技術棧共存，如何低成本地在多類業務、多樣化佈局、多技術棧的UI頁面間檢測內容一致性，是終端測試領域中的一項重要挑戰。
為解決該問題，美團到店研發平臺質量工程部與復旦大學計算機學院周揚帆教授團隊展開了大前端智慧化測試領域的科研合作，在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首先從一個營銷會場頁開始分析，其主要包含一個商品列表，經過目標區域識別模組識別出各個商品卡片，再從各個商品卡片的截圖中識別出原價和折扣等金額相關的資訊。之後繼續提取每個頁面的相關價格資訊，最後由一致性判斷模組檢查頁面間的價格一致性。
2.2 目標區域識別
為了提取關鍵的一致性資訊，在實踐中我們發現：將頁面上所有的文字OCR識別後直接交給LLM分析，得到的分析結果並不準確。我們分析後認為，UI介面包含大量的與當前檢測需求無關的文字，噪聲過大干擾了LLM的判斷。因此，我們考慮對UI介面進行裁切，即透過目標區域識別的方式將無用的文字資訊去掉，從而使LLM聚焦。
影像的目標識別是CV領域的傳統方向，基於傳統深度學習的目標檢測模型對適配複雜多變的UI介面成本很高，需要進行大量的資料標註和訓練工作才能夠使用，同時泛化性也一般。為了使方法具備良好的泛化性，同時能夠以較低的成本使用，我們採用了基於視覺語義的識別模型CLIP（Contrastive Language-Image Pre-training， 由OpenAI提出的影像-文字語義匹配模型）。CLIP可以將影像和文字的語義對映在同一個高維向量空間，且由於經過海量資料的訓練其具備良好的通用性。針對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。
選取的實驗場景為從商品卡片中提取價態資訊，實驗資料見下表：
在特價營銷的價格一致性檢查場景下，我們希望從商品卡片中識別出與價格相關的所有資訊，並分析出原價、優惠和現價。AutoConsis首先利用OCR從前述商品卡片中獲取所有文字資訊，再利用包含商品價格推理例子的Prompt從中解析出上述三個價態資訊。對於其他營銷模式如滿減，可以對應修改Prompt中的示例和回答指令。
2.4 一致性校驗
一致性問題的校驗設計簡單直接，AutoConsis會依據預先定義的校驗規則判斷前述提取出的UI內容的一致性。具體來說，從校驗的規則有兩種型別：數值邏輯型別和語義型別。對於數值邏輯型別的一致性問題（如檢查商品價格在不同頁面的一致性）AutoConsis使用規則直接檢查其一致性；對於相對複雜的語義規則（如校驗商品與所屬類別是否一致），則設計CoT Prompt、藉助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分析和資料檢查能力並不侷限於內容一致性檢測，目標領域識別->目標資訊抽取->檢測判斷，這實際上是一個大前端通用的校驗流程，相比傳統的自動化方案有低成本、泛化性強等優勢，相信未來可以在更多前端測試場景中進行推廣。
目前，我們正在嘗試將AutoConsis的校驗流程和Agent能力相融合，讓Agent能根據人類反饋指令自我迭代，以更接近人的水平去操作和校驗UI，智慧化的幫助節省人工時間，相關能力已經在美團的直播影片化等業務領域進行落地。後續，我們將結合更多業務需求對AutoConsis進行持續改進與維護，也歡迎業界同行們的反饋與交流。
5. 合作方簡介
復旦大學周揚帆教授團隊致力於新型軟體系統的效能最佳化與故障排查研究，近年團隊在軟體系統領域的重要會議如OSDI、SOSP、ICSE、FSE等發表了多篇高影響力論文。最近，該團隊以解決UI自動化測試中的複雜問題為核心，將大模型應用於UI功能認知與UI互動規劃，以一系列創新方法顯著提高了解決方案的適應性和穩定性。團隊注重科研成果的實際應用，積極與企業及相關機構合作，共建實用工具和系統，推動研究成果的落地，助力合作伙伴提升技術能力並實現業務價值。
| 在美團公眾號選單欄對話方塊回覆【2023年貨】、【2022年貨】、【2021年貨】、【2020年貨】、【2019年貨】、【2018年貨】、【2017年貨】等關鍵詞，可檢視美團技術團隊歷年技術文章合集。
| 本文系美團技術團隊出品，著作權歸屬美團。歡迎出於分享和交流等非商業目的轉載或使用本文內容，敬請註明“內容轉載自美團技術團隊”。本文未經許可，不得進行商業性轉載或者使用。任何商用行為，請傳送郵件至tech@meituan.com申請授權。