大前端智能化測試：技術(shù)演進(jìn)與實(shí)踐探索講

師：郭詩雨目錄一、大前端測試流程二、大前端測試的挑戰(zhàn)與痛點(diǎn)三、技術(shù)演進(jìn)與實(shí)踐探索四、未來趨勢與挑戰(zhàn)1.測試設(shè)計(jì)與準(zhǔn)備（測什么）（用例生成、選擇與篩選、精準(zhǔn)測試）2.測試執(zhí)行與驗(yàn)證（怎么測）（環(huán)境搭建、驅(qū)動執(zhí)行、結(jié)果校驗(yàn)）針對「測試執(zhí)行與驗(yàn)證」：手工測試通常用來做新需求測試，但人力成本較高，在回歸測試等場景難以大規(guī)模開展。為彌補(bǔ)手工測試的不足，業(yè)界引入了傳統(tǒng)UI自動化測試，旨在降低成本、擴(kuò)大覆蓋范圍并提升效率，較多應(yīng)用于回歸測試等場景。一、大前端測試流程測試過程可以概括為：（覆蓋率分析、效率評估、狀態(tài)跟蹤）3.測試評估與優(yōu)化（測的怎么樣）一、大前端測試流程UI自動化測試的「額外工作」?手工測試：測試人員根據(jù)需求，

設(shè)計(jì)、維護(hù)測試用例集；依照用例集對測試用例逐條操作、觀察、判斷，并記錄結(jié)果；?UI自動化測試：測試人員根據(jù)需求，設(shè)計(jì)、維護(hù)測試用例集；利用自動化框架（如Appium、UIAutomator、

Playwright等）將驅(qū)動和驗(yàn)證邏輯編寫與維護(hù)測試用例代碼；執(zhí)行完自動化后人工確認(rèn)自動化結(jié)果。測試效率瓶頸-UI自動化用例開發(fā)維護(hù)成本高-可遷移性差（跨平臺復(fù)用率低）-魯棒性不足（穩(wěn)定性與準(zhǔn)確率低）前端技術(shù)復(fù)雜性-框架多樣性-設(shè)備碎片化-多端多技術(shù)棧適配投入冗余二、大前端測試的挑戰(zhàn)與痛點(diǎn)傳統(tǒng)UI自動化測試存在的諸多問題：二、大前端測試的挑戰(zhàn)與痛點(diǎn)目標(biāo)：利用智能化能力，探索低成本、高效的UI自動化解決方案，提升大前端測試整體的效率。三、技術(shù)演進(jìn)與實(shí)踐探索自2022年11月起，我們迅速調(diào)整建設(shè)策略，結(jié)合LLM、Agent等技術(shù)，圍繞實(shí)際業(yè)務(wù)需求，完成了大前端智能化測試領(lǐng)域多個能力原型建設(shè)，主要圍繞自動化測試的執(zhí)行建設(shè)了包括智能遍歷測試、

UI

內(nèi)容一致性檢測、AUITestAgent智能化自然語言UI驅(qū)動校驗(yàn)、智能UI異常檢測等，并在門票、沉浸式視頻、服務(wù)零售等多個業(yè)務(wù)方向成功落地，大幅提升了測試效率并檢出100+個有效缺陷。三、技術(shù)演進(jìn)與實(shí)踐探索3.1測試環(huán)境準(zhǔn)備3.2智能化遍歷測試針對端上應(yīng)用執(zhí)行交互的穩(wěn)定性與功能性檢查。與傳統(tǒng)的遍歷工具（如Monkey）

相比，智能化遍歷測試不僅檢測Crash、

JSError等硬性異常，還基于用視覺模型和大模型的能力，能夠識別檢測黑白屏、加載失敗、以及交互結(jié)果不符合功能預(yù)期等問題。適合與傳統(tǒng)測試配合，通過大量運(yùn)行發(fā)掘現(xiàn)有人工\自動化測試用例以外的異常場景，同時(shí)也比較適合對質(zhì)量問題較多的新業(yè)務(wù)、新平臺、新系統(tǒng)進(jìn)行自動化低成本問題挖掘（如鴻蒙等）三、技術(shù)演進(jìn)與實(shí)踐探索三、技術(shù)演進(jìn)與實(shí)踐探索3.2智能化遍歷測試創(chuàng)新點(diǎn)：1.利用LLM預(yù)測被交互節(jié)點(diǎn)功能，并判斷交互后頁面是否符合功能預(yù)期2.利用SoM標(biāo)注節(jié)點(diǎn)，提高小杯模型(如4o-mini/claude-haiku)性能，兼顧成本與準(zhǔn)確率三、技術(shù)演進(jìn)與實(shí)踐探索3.2智能化遍歷測試步驟一：預(yù)測節(jié)點(diǎn)功能三、技術(shù)演進(jìn)與實(shí)踐探索3.2智能化遍歷測試步驟二：判斷交互后頁面響應(yīng)是否符合預(yù)期三、技術(shù)演進(jìn)與實(shí)踐探索3.2智能化遍歷測試指標(biāo)bug召回能力評估：針對明顯異常情況（如RN報(bào)錯、APP崩潰、黑白屏、返回APP首頁、停留掃碼配置頁等）可做到99%+召回。針對通識類bug異常（LLM判斷），召回率在80%以上，整體校驗(yàn)準(zhǔn)確率為91%。三、技術(shù)演進(jìn)與實(shí)踐探索3.2智能化遍歷測試業(yè)務(wù)實(shí)際落地效果智能化遍歷測試總體運(yùn)行時(shí)長1w+小時(shí)，共執(zhí)行了50w+個自動化測試用例，接入22個業(yè)務(wù)方向，其中17個方向深度使用。至今已發(fā)現(xiàn)了100+個有效缺陷。技術(shù)與學(xué)術(shù)影響力發(fā)表國際軟件工程領(lǐng)域頂會

ICSE2025（CCFA）論文一篇：KuiTest:

Leveraging

KnowledgeintheWildasGUITestingOracleforMobileApps三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)同一類業(yè)務(wù)元素信息分散在不同團(tuán)隊(duì)負(fù)責(zé)的頁面內(nèi)，存在頁面中的UI信息相互矛盾（如右圖中同一個商品在多個頁面上的實(shí)際價(jià)格不一致）此類UI內(nèi)容不一致的異常，長期以來主要依賴測試人員對于UI的熟悉度，靠手工測試執(zhí)行時(shí)來隨機(jī)進(jìn)行發(fā)現(xiàn)。三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)為解決該問題，我們針對UI層面設(shè)計(jì)并實(shí)現(xiàn)了一套自動化智能檢測流程，名為AutoConsis

，

在UI內(nèi)容一致性檢測上做到了低成本、高泛化性、高置信度。三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)內(nèi)容一致性校驗(yàn)本質(zhì)是對UI頁面的特定信息提取，價(jià)格一致性采用的也是信息提取流程。我們將UI頁面分析任務(wù)轉(zhuǎn)化為目標(biāo)檢測和內(nèi)容理解的組合，利用了大語言模型的能力，實(shí)現(xiàn)對不同技術(shù)棧頁面的適應(yīng)能力。三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)AutoConsis有三個關(guān)鍵處理流程：1.目標(biāo)區(qū)域識別：AutoConsis首先識別UI界面中

與檢測相關(guān)的關(guān)鍵區(qū)域。通過圖像處理和模式識

別，工具能夠準(zhǔn)確地定位到包含重要信息的UI部

分。2.目標(biāo)信息抽?。涸谀繕?biāo)區(qū)域確認(rèn)后，

經(jīng)過OCR和UI組件分析工具提取目標(biāo)區(qū)域的文本和元素，

填入預(yù)先設(shè)置好的CoT

Prompt

，通過大模型推

理提取一致性校驗(yàn)所需要的關(guān)鍵信息。3.一致性判斷：AutoConsis對提取出的信息進(jìn)行

一致性校驗(yàn)，確保UI信息的準(zhǔn)確性和一致性。三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)步驟1:

目標(biāo)區(qū)域識別三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)步驟2:

目標(biāo)信息提取通過OCR識別商品文本信息，通過CoT提示推理過程，讓大模型預(yù)測當(dāng)前展示的商品原價(jià)+折扣+折扣后價(jià)格三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)步驟3:信息一致性校驗(yàn)三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)指標(biāo)AutoConsis作為一整套一致性檢測流程，相比于直接應(yīng)用MLLM作為整體UI圖像輸入來判斷，適配的復(fù)雜度會更高一些。但從結(jié)果看，AutoConsis在執(zhí)行效率、檢測結(jié)果的可靠性、執(zhí)行成本三個方面均更具優(yōu)勢。當(dāng)前業(yè)務(wù)一次巡檢需在幾千量級的頁面規(guī)模上使用，所以我們選擇AutoConsis來批量進(jìn)行業(yè)務(wù)應(yīng)用落地。三、技術(shù)演進(jìn)與實(shí)踐探索3.3智能化一致性校驗(yàn)業(yè)務(wù)實(shí)際落地效果特價(jià)團(tuán)購巡檢：該能力在美團(tuán)特價(jià)團(tuán)購營銷會場場景上覆蓋了700+城市、4000+多頁面，在項(xiàng)目開城與后續(xù)迭代過程中，持續(xù)以巡檢形式執(zhí)行，期間共發(fā)現(xiàn)20+個有效業(yè)務(wù)問題。門票運(yùn)營活動巡檢：分析頁面所有可能有運(yùn)營的位置，點(diǎn)擊后判斷內(nèi)容和活動是否一致。目前已在12個城市的200+個頁面上進(jìn)行使用，共計(jì)發(fā)現(xiàn)了10+個有效問題。技術(shù)與學(xué)術(shù)影響力發(fā)表國際軟件工程領(lǐng)域頂會

ICSE2024（CCFA）論文一篇：AutoConsis:AutomaticGUI-driven

Data

Inconsistency

Detectionof

Mobile

Apps三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試聚焦于UI測試的GUIAgent。用戶可通過輸入自然語言形式的交互指令與檢查指令，讓AI幫助完成端上交互的執(zhí)行以及交互后結(jié)果的檢查。三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試AUITestAgent的適用場景與定位：1.聚焦交互的功能回歸測試?針對于需求迭代，希望快速建立自動化進(jìn)行重交互的功能檢查覆蓋。2.定制化的線上巡檢?針對線上場景，存在特定的檢查規(guī)則，希望快速構(gòu)建客戶端自動化巡檢。三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試創(chuàng)新點(diǎn)：提出雙路架構(gòu)，在執(zhí)行操作同時(shí)抽取測試相關(guān)信息，并在最終進(jìn)行結(jié)果校驗(yàn)三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試-流程原理三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試-Case書寫規(guī)范基本原則?清晰性(Clarity):指令應(yīng)明確無歧義，準(zhǔn)確描述每一個操作步驟。?完整性(Completeness):任務(wù)應(yīng)包含從起始狀態(tài)到目標(biāo)狀態(tài)的所有必要步驟。?原子性(Atomicity):每個獨(dú)立操作應(yīng)盡可能拆分為一個指令步驟。?順序性(Sequentiality):嚴(yán)格按照操作的先后順序書寫指令。三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試指標(biāo)使用美團(tuán)場景下的不同難度等級的自然語言Case的數(shù)據(jù)集進(jìn)行評測。三、技術(shù)演進(jìn)與實(shí)踐探索3.4AUITestAgent智能交互測試技術(shù)與學(xué)術(shù)影響力博客：技術(shù)博客：一句話讓AI幫你做UI測試，多模態(tài)測試智能體AUITestAgent大前端智能UI異常檢測指App/Web

UI界面的自動化異常檢測，不限技術(shù)棧，分為有參考和無參考兩個分類，為Hyperjump視覺自動化，遍歷測試，垂直測試提供UI檢測能力，部分能力以服務(wù)接口的形式提供其他團(tuán)隊(duì)使用。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測3.5智能UI異常檢測有參考UI檢測：有參考檢測指基于參照物如基準(zhǔn)圖/斷言目標(biāo)，能夠攜帶專業(yè)業(yè)務(wù)知識做深入性的檢測，支持高精度的行特征比對和具有自適應(yīng)性的圖像語義斷言兩個檢測模式，同時(shí)標(biāo)記當(dāng)前圖和參考基準(zhǔn)不同的地方，是自動化回歸測試的核心檢測能力。三、技術(shù)演進(jìn)與實(shí)踐探索三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測有參考UI檢測：業(yè)務(wù)實(shí)際落地效果平均每天檢測2w+個場景，基本覆蓋到店全量測試場景，同時(shí)應(yīng)用于美團(tuán)平臺、金融、地圖、買菜業(yè)務(wù)，經(jīng)過對比去噪后評估對比噪聲在小于10%，近一年在到店范圍幫助業(yè)務(wù)發(fā)

現(xiàn)150+個問題無參考UI檢測：指自動識別通識性的UI展示異常，無配置和維護(hù)成本，當(dāng)前已支持了如數(shù)字異常，文本重疊遮擋，模塊渲染異常檢測能力。針對UI異常如文本遮擋/亂碼/重疊/模塊空白等進(jìn)行檢測。無需配置，檢測點(diǎn)明確且專一。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)UI問題屬于局部問題檢測，最常見的是訓(xùn)練一個目標(biāo)檢測模型。模型的訓(xùn)練一般需大量的標(biāo)注數(shù)據(jù)，可實(shí)際場景一般標(biāo)注數(shù)據(jù)很少，我們的前代方法（yolo）通過數(shù)據(jù)合成，微調(diào)目標(biāo)檢測模型實(shí)現(xiàn)了檢測方案，但是在應(yīng)用過程中發(fā)現(xiàn)對于真實(shí)問題召回率較低。分析原因，傳統(tǒng)深度模型如目標(biāo)檢測適合識別局部特征，不具備人類對UI頁面舉一反三的理解能力。同時(shí)UI發(fā)版更新快，由于無法預(yù)測UI問題的真實(shí)分布，合成訓(xùn)練數(shù)據(jù)對比實(shí)際場景存在區(qū)別，局部特征擬合因此失效。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)近年來隨著多模態(tài)大語言模型的發(fā)展，特別是R1推理模型的成功，我們看到模型在語義理解層面的潛力，語義理解能夠突破局部特征的限制。多模態(tài)模型是否能夠模擬人類對UI的觀察視角？我們僅使用少量的標(biāo)注數(shù)據(jù)實(shí)現(xiàn)了多模態(tài)模型的微調(diào)，最終在UI異常檢測領(lǐng)域取得的效果不僅相比前代方法有很大提升，對比GPT4o等通用模型也具有明顯優(yōu)勢，以下介紹建設(shè)的過程和思考。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測效果評估與示例三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)–

1.數(shù)據(jù)合成經(jīng)過人工篩選后生成290條數(shù)據(jù)三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)–2.模型訓(xùn)練先模仿-

有監(jiān)督訓(xùn)練環(huán)境信息GPU

-A100x

1基礎(chǔ)模型

-Qwen2.5-VL訓(xùn)練方式

-SFT

Lora訓(xùn)練過程Supervised

Fine-Tuning-SFT有監(jiān)督訓(xùn)練是為了讓基礎(chǔ)模型先學(xué)會UI問題的基本模式，理解業(yè)務(wù)的關(guān)注點(diǎn)是什么。使用LoRA可以有效降低GPU需求，需多做實(shí)驗(yàn)觀察調(diào)參的效果。我們通過訓(xùn)練前后的推理過程觀察到，模型的注意力從觀察背景顏色和布局位置，到已經(jīng)有了接近人類QA的思考過程。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)–2.模型訓(xùn)練先模仿-

有監(jiān)督訓(xùn)練SFT后的模型在一些場景上已經(jīng)達(dá)到了預(yù)期效果，好像可以出師了，但是在部分沒見過的場景上還是不夠準(zhǔn)確，為了增強(qiáng)魯棒性進(jìn)行下階段的強(qiáng)化學(xué)習(xí)。三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)–2.模型訓(xùn)練自己摸索–強(qiáng)化學(xué)習(xí)環(huán)境信息GPU

-A100x

1基礎(chǔ)模型

-SFT訓(xùn)練后模型訓(xùn)練方式

-GRPO

Lora強(qiáng)化學(xué)習(xí)Policy

Model

-訓(xùn)練過程中需要不斷優(yōu)化的目標(biāo)模型Reward

Model

-用于對目標(biāo)模型的回答進(jìn)行打分，計(jì)算相對獎勵和優(yōu)勢的依據(jù)，指導(dǎo)policy

model的更新三、技術(shù)演進(jìn)與實(shí)踐探索3.5智能UI異常檢測無參考UI檢測：多模態(tài)模型微調(diào)–