一、背景

隨着得物App各業務功能的豐富和升級，得物App內可供用户體驗的內容和活動逐步增多，在用户App內體驗時長不斷增長的大背景下，App使用過程中的體驗問題變得愈發重要。同時，在整個功能研發流程中，App端的測試時間相對有限，對於App上的各種場景的體驗問題無法實現完全的覆蓋，傳統的UI自動化迴歸無法全面滿足應用質量保障的需求。特別是在涉及頁面交互和用户體驗等較為主觀的問題時，往往只能依賴於測試人員手動體驗相關場景來進行質量保障，整體測試效率較低。

前段時間，我們結合內部的前端頁面巡檢平台，實現了對App上核心場景和玩法的日常巡檢執行能力，對於基礎的頁面展示問題檢查、交互事件檢測和圖片相似檢測等問題已經初步具備有效的檢測能力。針對應用體驗類問題在傳統自動化方式下的檢測難題，我們結合AI模型在內部場景應用的經驗，開始嘗試在App上利用大型模型的分析能力進行巡檢，並最終實現得物App智能巡檢的應用落地。相較於傳統的App質量保障方式，App智能巡檢在幫助業務排查應用體驗類問題有着極大的優勢。

二、架構總覽

App智能巡檢系統架構

在App智能巡檢的整個架構流程中，涉及了對於內部多個平台和服務的交互，這些平台和服務在整個流程中的定位不同，各自發揮着不同的作用：

• 巡檢平台

巡檢平台作為整個智能巡檢流程的管理中心，是用户直接能夠進行交互的平台，所有用户需要檢測的問題、檢測的個性化規則、檢測的目標場景等都可以在平台上完成。任務執行結束後，平台會對各個服務的執行結果進行彙總，並將結果和異常進行分析過濾，最終對於確定的異常問題會自動告警並通知給用户。

• 自動化服務

自動化服務主要提供了App各端自動化任務執行的基本能力，是工作具體的承擔者。在整個任務執行過程中，根據任務的配置信息，自動化服務會依次進行可用真機設備調度、執行環境初始化、進入目標頁面、現場AI送檢、自定義操作執行、通用異常查詢分析等流程，最終將執行結果上報給巡檢平台側，進行結果歸檔。

• 前端/客户端SDK

為了豐富巡檢過程中可以活動到的異常信息和內容，我們和前端以及客户端平台進行合作，對相關檢測能力進行了打通，除了執行過程本身可以檢測和識別到的錯誤外，一些系統級別的錯誤，例如js錯誤、白屏錯誤、網絡錯誤等都可以通過對應平台提供的sdk進行獲取，相關的檢測結果和執行步驟進行了關聯綁定，方便用户快速識別異常來源。

• 模型服務

對於視覺類任務的檢測主要由模型服務來完成，模型基於用户配置的AI校驗規則以及基礎的通用檢測規則，對執行現場的實時截圖進行快速識別分析，對圖中可疑的UI問題、交互問題以及不符合用户目標規則的內容進行深入探索，併產出最終的檢測結果給到巡檢平台。

• 真機服務

真機服務用於提供雲端的真機設備，在任務執行過程中，可以根據用户的執行系統、品牌、數量等需要進行空閒設備調度，以滿足多設備的智能巡檢需要。此外，對於巡檢過程中發現的問題，用户可以遠程登錄對應的真機設備進行快速現場復現，研發修復相關問題後也可以通過真機設備快速驗證。

三、主要功能設計

頁面結構佈局問題檢測

在App使用過程中，最常見的UI問題包括頁面的展示錯位、組件重合或者排盤佈局錯亂等等，這類問題可以很直觀地被用户感受到，直接影響到用户對於App的使用體驗，此類問題我們稱為頁面結構佈局問題類問題。

針對此類頁面結構佈局問題，傳統的自動化手段一般缺乏一個統一的判斷標準，因此無法在不同頁面場景下應用，使用的維護成本也比較高。由於頁面現場圖片包含了大部分的有效信息，我們這裏嘗試將整體的頁面信息提供給AI模型，讓模型基於特定的規則來自動理解圖片內容，並基於需要的檢測規則來進行問題校驗，此功能檢測的基本流程如下：

頁面結構佈局問題檢測流程

在功能整體的操作流程中，我們將基礎的任務使用場景分成了兩大類，針對不同類別的場景，AI檢測和理解的側重點有所不同，最終測試結果判斷的標準也會有所不同：

• 頁面部分框架是否匹配

用於進行頁面佈局類檢測，比如頁面展示的內容、圖片、文字、價格等和預期頁面是否符合，模型通常會檢測頁面的元素佈局以進行元素級別的匹配。

• 頁面完全匹配

用於文本文案展示類頁面，校驗文本與預期的是否完全保持一致，校驗範圍包含所有的圖片、文字的，一般除了元素級別的匹配，還對整體頁面進行了分析對比。

通用視覺體驗問題檢測

除了前面提到的頁面佈局問題，App體驗和視覺類問題的表現形式實際還有非常多，為了能夠覆蓋這些不同的場景內容，我們額外設計了一個通用的視覺檢測功能，用於更一般性場景的視覺問題分析，具體的校驗規則可以由用户自由指定，當然平台也會提供一些默認的通用的規則，用户可以根據實際場景自由組合檢測的目標和方式，該檢測功能的基本流程如下：

通用視覺體驗問題檢測流程

在該功能的檢測流程中，我們將整體的檢驗側重點區分為針對文字和針對圖片兩類的檢測兩類，並基於各自的類型進行模型能力的調整：

• 文字類校驗

側重於對頁面中文案展示、文字排列、文字順序等內容的校驗，一般會先結合AI理解和ocr技術一起進行結果判斷，通常用於文本展示較多的頁面。

• 圖片類校驗

側重於對頁面中展示元素的校驗，一般包括所有頁面元素的檢驗，文字相關校驗的校驗同樣包括在內，但側重點權重有所不同，結果會基於AI理解頁面後產生，通常用於元素、圖標、頁面交互等豐富的頁面場景。

頁面展示一致性檢測

前面兩個檢測能力都是針對單頁面的異常問題檢測，目前，得物App上的不同業務頁面比較複雜，通用用户需要在多個不同頁面中跳轉，在這種情況下，會出現不同頁面中的UI信息展示的是否符合預期標準的問題。此類UI問題由於設計多個頁面，不同的頁面可能由不同的業務團隊和測試團隊負責，其本身也沒有固定的出現規律，一般只有依賴測試人員手工進行測試執行時隨機發現，而且無法保障相關場景功能的覆蓋面。

針對上述這種設計多頁面的UI問題，我們經過分析後發現，在利用AI模型的基礎上，解決該問題的關鍵是要理解目標商品或者展示之間的對應關係，同時在後續測試流程中保留這個關聯信息，最終結合不同頁面的現場信息和關聯關係進行問題分析。我們基於此設計了一套頁面展示一致性檢測功能，該功能的整體流程如下：

頁面展示一致性檢測流程

相較於單頁面的視覺體驗問題檢測，這類涉及多頁面的UI問題檢測有幾個關鍵的差異點：

• 檢驗層級和目標發現

由於整個檢測流程涉及多級頁面，在檢測過程中需要判斷檢測的最終層級，防止對比頁面不完全的問題，同時針對需要對比的商品內容，需要實時維護多級頁面的對應展示關係，避免對比的對象出現差異。

• 多級操作定位

在自動化執行過程中，由於後面層級的頁面沒有可靠的定位對比信息，我們採用了模型來識圖定位，即用上級頁面的目標圖片來定位當前頁面是否存在相同的目標，這個過程中要對相似的目標圖片進行過濾和識別。

• 多級頁面對比分析

最終的分析結果依賴多級頁面的現場截圖信息和規則進行校驗和對比，最終得到整個多級頁面場景下的一致性分析結果。

AI操作與異常(無響應)檢測

前置操作

除了直接對目標頁面進行檢測的場景，還有些目標入口可能無法直接到達，比如展示位置在目標頁面某個板塊，這個板塊需要下滑動多屏距離才會展示。針對這種場景，我們引入了AI自動化操作能力，用户可以利用簡短的語言描述對應的前置操作步驟，在實際任務執行時，AI會識別這些描述來完成相應的操作指令，在所有操作執行完成後，才進行其他視覺體驗功能的智能巡檢。該功能的執行流程如下：

前置AI操作任務流程

基於AI實現自然語言描述到實際操作的方式，我們參考業界一些實踐的例子和開源的方案，最終採用AI模型完成操作分析和UI自動化框架完成操作執行的方式，在接入大模型的方式下（而且是開源免費的大模型，如果自建服務，token的耗費成本基本可以忽略），由於大模型本身有多模態能力，具備NLP、圖像識別、目標定位、分類、檢測，通過持續的對Prompt進行優化，就可以實現智能的UI自動化執行，實現大致的架構如下：

智能UI自動化架構圖

具體的實現原理這裏不進行詳細的介紹，我們通過一個核心的能力實現簡單分析下實現流程:

1.模型相關實現

import json
from openai import OpenAI
from ..config.llm_config import LLMConfig
from ..utils import get_logger
class ChatClient:
    #模型初始化
    def __init__(self, config_path=None, model_log_path=None):
        self.logger = get_logger(log_file=model_log_path)
        self.config = LLMConfig(config_path)
        self.openai = OpenAI(
            api_key=self.config.openai_api_key,
            base_url=self.config.openai_api_base,
        )
    def chat(self, prompt_data):
        #模型交互，提交截圖和任務描述
        chat_response = self.openai.chat.completions.create(
            model=self.config.model,
            messages=prompt_data,
            max_tokens=self.config.max_tokens,
            temperature=self.config.temperature,
            extra_body={
                "vl_high_resolution_images": True,
            }
        )
        result = chat_response.choices[0].message.content
        json_str_result = result.replace("```json", "").replace("```", "")
        try:
            res_obj = json.loads(json_str_result)
            return res_obj
        except Exception as err:
            self.logger.info(f"LLM response err: {err}")


        #異常數據修復
        try:
            import json_repair
            res_obj = json_repair.repair_json(json_str_result, return_objects=True)
            return res_obj
        except Exception as err:
            self.logger.info(f"LLM response json_repair err: {err}")
        try:
            import re
            #返回的bbox處理
            if "bbox" in json_str_result:
                while re.search(r"\d+\s+\d+", json_str_result):
                    json_str_result = re.sub(r"(\d+)\s+(\d+)", r"\1,\2", json_str_result)
            res_obj = json.loads(json_str_result)
            return res_obj
        except Exception as err:
            self.logger.info(f"LLM response re.search err: {err}")

2.點擊操作實現

def ai_tap(self, description):
    screenshot_base64 = self.get_resized_screenshot_as_base64()
    ret = {
        "screenshot": screenshot_base64,
    }
    prompt = Tap(description).get_prompt(screenshot_base64)
    res_obj = self.chat_client.chat(prompt)
    if "errors" in res_obj and res_obj["errors"]:
        ret["result"] = False
        ret["message"] = res_obj["errors"]
    else:
        #返回的bbox處理為實際座標
        x, y = self.get_center_point(res_obj["bbox"])
        #進行具體的自動化操作
        self._click(x, y)
        ret["location"] = {"x": x, "y": y}
        ret["result"] =  True
        ret["message"] = ""
    return ret

獨立路徑校驗操作

當然，AI操作配置也可以作為單獨的功能校驗邏輯，放在視覺任務檢測後面去執行，此時操作執行的邏輯與其他任務相對獨立，如果操作執行過程中出現錯誤同樣會上報。

獨立路徑校驗流程

操作無響應檢測

在自動化的操作過程中，我們還需要關注操作本身是否是生效的，否則無法保證整個執行鏈路的完成，操作本身的有效性需要通過額外的方式來保障。在一些實際場景中，App內的一些點擊操作也可能出現無響應的情況，這可能是設計問題，也可能是網絡或者響應問題，總的來説，這也屬於一種實際使用過程中的體驗類問題。因此，在原有的執行流程中，我們引入了額外的差異分析模塊，用於保證操作的有效完成。

操作無響應檢測流程

在操作有效性的保障方案上，我們對比了圖像像素處理和模型分析對比兩種方式，從分析結果來看，兩者的分析結果都能滿足我們實際的場景需要，考慮到成本因素，大部分場景下我們會優先採用基於圖像像素對比的方式，在一些判斷結果無法滿足的場景中，我們再使用模型來分析：

def check_operation_valid(screen_path_before, screen_path_after, cur_ops, screen_oss_path_before,
                          screen_oss_path_after):
    try:
        import cv2
        import numpy as np
        img_before = cv2.imread(screen_path_before)
        img_after = cv2.imread(screen_path_after)
        if img_before is None or img_after is None:
            raise RuntimeError(f"操作響應校驗讀取圖片異常")
        # 確保兩張圖片大小相同
        if img_before.shape != img_after.shape:
            img_after = cv2.resize(img_after, (img_before.shape[1], img_before.shape[0]))
        # 轉換為灰度圖
        gray_before = cv2.cvtColor(img_before, cv2.COLOR_BGR2GRAY)
        gray_after = cv2.cvtColor(img_after, cv2.COLOR_BGR2GRAY)
        # 計算直方圖
        hist_before = cv2.calcHist([gray_before], [0], None, [256], [0, 256])
        hist_after = cv2.calcHist([gray_after], [0], None, [256], [0, 256])
        # 歸一化直方圖
        hist_before = cv2.normalize(hist_before, hist_before).flatten()
        hist_after = cv2.normalize(hist_after, hist_after).flatten()
        # 計算相關係數 (範圍[-1, 1]，1表示完全相同)
        correlation = cv2.compareHist(hist_before, hist_after, cv2.HISTCMP_CORREL)
        # 計算卡方距離 (範圍[0, ∞]，0表示完全相同)
        chi_square = cv2.compareHist(hist_before, hist_after, cv2.HISTCMP_CHISQR)
        # 計算交集 (範圍[0, 1]，1表示完全相同)
        intersection = cv2.compareHist(hist_before, hist_after, cv2.HISTCMP_INTERSECT)
        # 設置相關係數閾值，超過此閾值視為兩張圖一致
        threshold = Thres
        threshold_chi_square = Thres_chi
        if correlation > threshold and chi_square < threshold_chi_square and intersection > threshold:
            raise RuntimeError(f"當前操作：{cur_ops} 疑似無效")
    except Exception as e:
        raise e

四、平台建設與使用

平台配置

基礎規則配置

對於上述不同的檢測類型和功能，在巡檢平台上可以進行目標檢測規則的創建和管理，所有的巡檢場景和任務可以共同使用這些規則。

配置項

不同功能具體的檢測規則不盡相同，配置內容也有所差異，但基本上只需要描述一個檢測的大致範圍，不需要太細化，比如下面是我們平台的通用檢測規則，用於檢查所有常見的排版、報錯的異常問題：

巡檢結果反饋

常規任務

一般來説，對於執行完成的檢測任務，在對應的詳情頁可以查看到模型的邏輯和過程，比如下面是得物App內某ip品牌頁的檢測結果：

在對應測試記錄的執行詳情裏，一般會展示以下關鍵的信息：

• 當前規則的對比圖和現場實時截圖
• 基於配置的檢測規則，模型的具體分析過程和結論

通過現場的截圖信息和模型分析描述，測試人員可以準確的定位和分析問題，如果當前結果是模型的誤報，相關人員也可以反饋給我們，我們會根據檢測結果不斷優化模型的檢測能力。

頁面展示一致性檢測

對於多級頁面展示一致性的檢測任務，最終返回的結果信息裏，會有日誌信息説明比較的過程和結果，如果有異常會額外提供不同頁面的對比截圖：

AI操作

在有AI操作配置的任務中，其結果詳情頁面會有整個流程的執行截圖，來幫助測試人員定位問題和還原現場：

五、總結

在移動應用自動化測試領域，傳統的元素和圖像驅動方法正在逐漸向智能化驅動轉型，這一轉變不僅提升了自動化的使用效率和維護便利性，也使得基於模型的圖像理解能力得以發揮，從而實現深度探索應用程序的潛力。

我們通過將現有的技術平台進行整合，基於視覺語言模型（VLM），開展場景化的智能巡檢探索與實踐。這種方法在多種任務場景下均能有效識別應用中的問題，相較於之前的方案，智能巡檢整體的問題識別準確率從50%提升到80%， 整體圖片相似度匹配準確率從50%提升到80%以上，在首次會場AI走查的過程中（純技術），共發現17個配置問題，AI問題發現率達95%。

後續我們會繼續結合AI大模型能力在App的相關場景進行更多的探索和應用，幫助測試人員更高效地保障App的質量，提升得物App的用户使用體驗。

往期回顧

1.深度實踐：得物算法域全景可觀測性從 0 到 1 的演進之路

2.前端平台大倉應用穩定性治理之路｜得物技術

3.RocketMQ高性能揭秘：承載萬億級流量的架構奧秘｜得物技術

4.PAG在得物社區S級活動的落地

5.Ant Design 6.0 嚐鮮：上手現代化組件開發｜得物技術

文 /錦祥

關注得物技術，每週更新技術乾貨

要是覺得文章對你有幫助的話，歡迎評論轉發點贊～

未經得物技術許可嚴禁轉載，否則依法追究法律責任。