阿里QA導讀：伴隨智能UI的發展，淘寶大促會場已支持AI千人千面的解決方案。但智能UI模塊樣式龐大的數量級面前，傳統的手工測試顯得十分的力不從心，單純地堆積人力已然無法解決問題，我們該如何應對新的挑戰？讓我們來看看淘寶質量團隊是如何破解這個難題。

背景

不同的用戶有不同的偏好，不僅對于商品，對于UI也是同樣如此。淘系會場的智能UI模塊由此應運而生。在目前的淘系會場中，所謂的智能UI指的是借助AI提供界面千人千面的解決方案，給不同的用戶展現不同的界面。在今年的雙11中，智能UI模塊成為了會場模塊的主流方案之一，在本次雙11大促中覆蓋了300+的會場，使得會場除了在商品推薦上做到個性化之外，還實現了UI層面上的千人千面的個性化能力。

現狀和挑戰

---

什么是智能UI？

通過對大量線上頁面的研究，智能UI設計團隊總結并提出了描述電商模塊設計方案的模型。模型包含了界面的柵格、布局、樣式等信息，具體定義見下圖。

通過上述模型，可以將電商模塊的設計數據進行結構化。在實際應用中，我們將模型拆分成幾個部分分別進行描述。

以區塊（Block）為例，在上圖的智能UI商品模塊視覺稿中，我們將整個模塊劃分為5個區塊，分別為：封面、標題、賣點、營銷活動、價格，每個區塊有唯一對應的編碼：A - E，每個區塊可以展示不同的物料。以上圖為例，該視覺稿包含的樣式方案數為5個區塊的乘積：3*2*8*3*1=144。前端在開發時，會根據算法接口返回的唯一編碼把對應物料渲染到對應區塊位置。

測試要怎么做？

單一模塊具有如此眾多的樣式，勢必會給測試工作帶來新的挑戰。為了保障線上質量，在測試工作中必須覆蓋所有的樣式，然而在智能UI模塊樣式龐大的數量級面前，傳統的手工測試顯得十分的力不從心。從現實角度考慮，單純地堆積人力已然無法解決問題，因此，自動化檢測就順理成章地成為了我們唯一的選擇。

通過梳理智能UI模塊的現狀，我們的自動化測試方案主要需要解決以下幾個問題：

• 針對不同智能UI模塊，自動獲取所有樣式方案，并分別生成測試頁面。

• 針對某一特定方案，自動校驗數據投放和顯示的邏輯，即：頁面上展示的圖片以及數據是否正確。

• UI樣式檢測。內容包括商品坑相互之間的間距，以及商品坑與邊框的邊距等。

解決方案

---

測試樣本生成

//區塊全部描述信息 {"blocks":[{"name":"封面區","code":"A","children":["1","2","3"]},{"name":"標題區","code":"B","children":["1","2"]},{"name":"賣點區","code":"C","children":["1","2","3","4","5","6","7","8"]},{"name":"營銷活動區","code":"D","children":["1","2","3"]},{"name":"價格區","code":"E","children":["1"]}],"key": "A^1|B^2|C^4|D^1|E^1" }

上述代碼描述了一個智能UI模塊的區塊信息，其中key字段表示當前所使用的樣式“A^1|B^2|C^4|D^1|E^1”：

A1：封面區顯示場景圖

B2：標題區顯示算法商品名字段

C4：賣點區顯示銷量字段

D1：營銷活動區顯示滿減字段

E1：價格區顯示價格字段

根據模塊的區塊描述信息，我們很容易就可以遍歷生成模塊對應的所有樣式。

對于會場所使用的模塊，我們開發了相應的功能，用于批量生成模塊的測試頁面。測試頁面的數據投放方式（阿拉丁、kangaroo）以及渲染方式與線上正式頁面保持一致。通過構造頁面的mock數據，我們可以指定測試頁面所使用的樣式，同時也可以設置模塊所要展示的商品或店鋪等數據字段。

自動識別

生成模塊測試頁面之后，我們希望能夠對于頁面上的元素進行自動識別，判斷是否與生成頁面時所使用的mock數據相一致。

整個識別的過程大致可以分為兩個步驟：

識別坑位（商品坑、店鋪坑等等）；

識別坑位中的信息。

目標檢測（Object Detection）

為了能夠識別頁面截圖中的商品/店鋪坑位，我們采用了深度學習中的目標檢測算法。整個流程可以分為3個步驟：數據準備、訓練、部署。

1.數據準備

眾所周知，機器學習需要大量的數據樣本用于訓練。那么用于智能UI模塊訓練的樣本需要如何生成？如果單純依靠手工標注的方式，顯然費時費力，效率低下，樣本的多樣性也比較難以保障。因此我們選擇的是imgcook。通過imgcook提供的sketch插件，我們可以從設計師提供的sketch文件中摳出對應的模塊，生成相應的DSL代碼，具體詳情可參考文檔：https://imgcook.taobao.org/dsl。在獲取到模塊對應的DSL代碼之后，我們就可以對所有模塊進行統一管理。

如上圖所示，我們對設計稿中提取出的模塊做了統一管理，并且對模塊中的區域進行了進一步的標注。例如在上圖的商品模塊中，我們將圖片區域標注為商品白底圖，商品標題、商品利益點、商品描述以及價格等區域也分別進行了標注。這樣做的目的，是為了在后續的樣本生成中，可以自動生成更多的樣本用于訓練。在生成樣本時，我們會從淘寶的商品池中隨機選取一張商品白底圖，替換上圖模塊中的白底圖，其他商品標題價格等字段也是類似的處理方式。總的來說，標注得越細致，所生成樣本的多樣性越能得到保障。

完成單個模塊的數據錄入之后，我們會將模塊組裝成類似手機截屏的樣式，并自動對圖中的模塊進行標注，生成最終的測試樣本。

至此，為了訓練所用的數據準備就基本完成。依托于淘寶龐大的商品數據庫，我們可以根據需求，生成任意數量的測試樣本，并自動完成標注。

2.訓練

我們采用的是標準的Faster R-CNN模型，具體細節可參見論文：http://arxiv.org/abs/1506.01497，模型的結構如下圖所示，這里就不再贅述。

由于訓練需要GPU資源，因此我們準備了一臺裝有2張Nvidia GTX 1080顯卡的機器用于訓練。從我們的使用情況來看，一般訓練一個模型可以在2小時以內完成，AP（Average Precision）在95%以上。

在實際使用中我們發現，如果直接訓練模型對圖片中的商品坑進行識別，識別的準確率并不理想，因此我們對方案進行了調整。如上圖所示，我們首先訓練的是一個比較粗粒度的模型，對圖片中的布局進行一個識別，識別出其中的1排1、1排2、1排3、底部bar等模塊。其次，我們又訓練了一個坑位級識別的模型，對上一步識別的結果進行再一次的識別，最終達到的效果，可以將1排2、1排3等常規模塊中的每個坑位都識別出來，也可以識別出組件中的按鈕等元素。

3.部署

最終我們需要將完成訓練完成的模型進行部署。我們在訓練中使用的是PyTorch，可以選擇相應的平臺完成相關模型的部署。

內容識別

在對模塊進行識別之后，我們需要對模塊中的內容進行進一步的識別，以校驗模塊內容是否正確。整個校驗可以分為兩部分：

圖片校驗。基于OpenCV，校驗mock數據中所使用的圖片是否在模塊中展示。

文字校驗。基于OCR能力，校驗mock數據中的文字信息是否在模塊中正確顯示。

在實踐中，首先我們會檢測頁面上識別到的坑位數是否與mock數據一致。其次，我們會分別檢測每個坑位的圖片以及文字信息是否與對應的mock數據相符合。

UI樣式檢測

在智能UI模塊的設計中，設計師規定了模塊與邊框的距離已經商品坑位相互之間的間距，但在具體實現中開發可能會有所疏漏，因此我們設計了對應的自動檢測能力。

以上圖中的第一個坑位為例，通過目標檢測我們可以從圖片中識別到坑位的位置，然而由于精度問題，算法識別出的邊框與實際邊框存在一定的誤差，因此我們無法直接通過算法識別到的坑位邊框來進行邊距的計算。為了解決這個問題，我們可以在生成測試頁面的時候指定頁面的背景色（非白色），然后基于目標檢測算法識別到的坑位邊框，以一定的偏移量向上/向下/向左/向右比較圖片中像素點的顏色是否與背景色一致，從而定位到準確的坑位邊框，最終實現邊距的精確計算。

其他

不可避免的是，智能UI中依然有部分功能需要涉及人工測試，比如線上會場的真實數據以及真實頁面的校驗。此外，整個自動化測試也需要留底用于日后的校驗或復盤。基于上述考慮，我們也做了相應功能的開發。目前我們的系統支持mock頁面的生成，也支持線上頁面的獲取。在截圖方面，我們可以通過瀏覽器模擬手機頁面來截圖，也支持通過指定的手機真機來截圖。

此外，通過上文對于智能UI模塊的分析可以發現，智能UI模塊樣式在生成的過程中，采用的是類似笛卡爾積的方式，將不同區域的物料進行了一個組合。在具體的測試過程中，特別是針對人工測試，我們認識到，沒有必要對每一種樣式都進行測試，只要檢測的樣式可以覆蓋所有的物料，就可以保障模塊的質量。因此，我們對每個智能UI模塊生成的樣式進行了去重處理，使得需檢測的樣式降低了一個數量級，從而大大減少了工作量。

總結

在2020年的雙十一中，我們通過上述方案對智能UI模塊進行了質量保障，累計覆蓋樣式20000+。總體而言，整個智能UI方案接受住了大促的考驗，線上未產生故障或bug，同時也為業務帶來了穩定的增長，智能UI逐漸成為流量精細化運營不可或缺的新能力。

---

- EOF -

想要加入中生代架構群的小伙伴，請添加群合伙人大白的微信

申請備注（姓名+公司+技術方向）才能通過哦！

阿里技術精彩文章推薦

往期推薦

深度：揭秘阿里巴巴的客群畫像

多隆：從工程師到阿里巴巴合伙人

阿里技術專家楚衡：架構制圖的工具與方法論

螞蟻集團技術專家山丘：性能優化常見壓測模型及優缺點

阿里文娛技術專家戰獒: 領域驅動設計詳解之What, Why, How?

阿里專家馬飛翔：一文讀懂架構整潔之道

阿里專家常昊：新人如何上手項目管理？

螞蟻集團沈凋墨：Kubernetes-微內核的分布式操作系統

阿里合伙人范禹：常掛在阿里技術人嘴邊的四句土話

阿里技術專家都鐸：一文搞懂技術債

支付寶研究員兼OceanBase總架構師楊傳輝：我在數據庫夢之隊的十年成長路

阿里技術專家麒燁：修煉測試基本功

阿里計算平臺掌門人賈揚清：我對人工智能方向的一點淺見

螞蟻資深算法專家周俊：從原理到落地，支付寶如何打造保護隱私的共享智能？

阿里高級技術專家簫逸：如何畫好一張架構圖？

阿里高級技術專家張建飛：應用架構分離業務邏輯和技術細節之道

螞蟻科技 Service Mesh 落地實踐與挑戰 | GIAC 實錄

阿里6年，我的技術蛻變之路！

螞蟻集團涵暢：再啟程，Service Mesh 前路雖長，尤可期許

阿里P9專家右軍：大話軟件質量穩定性

阿里合伙人程立：阿里15年，我撕掉了身上兩個標簽

阿里高工流生 | 云原生時代的 DevOps 之道

阿里高級技術專家邱小俠：微服務架構的理論基礎 - 康威定律

阿里P9專家右軍：以終為始的架構設計

阿里P8架構師：淘寶技術架構從1.0到4.0的架構變遷！12頁PPT詳解

阿里技術：如何畫出一張合格的技術架構圖？

螞蟻資深技術專家王旭：開源項目是如何讓這個世界更安全的？

阿里資深技術專家崮德：8 個影響我職業生涯的重要技能

儒梟：我看技術人的成長路徑

阿里高級技術專家宋意：平凡人在阿里十年的成長之旅

阿里技術專家甘盤：淺談雙十一背后的支付寶LDC架構和其CAP分析

阿里技術專家光錐：億級長連網關的云原生演進之路

阿里云原生張羽辰：服務發現技術選型那點事兒

螞蟻研究員玉伯：做一個簡單自由有愛的技術人

阿里高級技術專家至簡: Service Mesh 在超大規模場景下的落地挑戰

阿里巴巴山獵：手把手教你玩轉全鏈路監控

阿里涉江：你真的會學習嗎？從結構化思維說起

螞蟻金服資深技術專家經國：云原生時代微服務的高可用架構設計

深入分布式緩存之EVCache探秘開局篇

? ?END ? ?? #架構師必備#點分享點點贊點在看

總結

以上是生活随笔為你收集整理的阿里立秋：AI千人千面，淘宝如何做智能化UI测试？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。