淘寶如何做智能化UI測試？
阿里QA導(dǎo)讀：伴隨智能UI的發(fā)展，淘寶大促會場已支持AI千人千面的解決方案。但智能UI模塊樣式龐大的數(shù)量級面前，傳統(tǒng)的手工測試顯得十分的力不從心，單純地堆積人力已然無法解決問題，我們該如何應(yīng)對新的挑戰(zhàn)？讓我們來看看淘寶質(zhì)量團隊是如何破解這個難題。 |
背景
? ? ? ?不同的用戶有不同的偏好，不僅對于商品，對于UI也是同樣如此。淘系會場的智能UI模塊由此應(yīng)運而生。在目前的淘系會場中，所謂的智能UI指的是借助AI提供界面千人千面的解決方案，給不同的用戶展現(xiàn)不同的界面。在今年的雙11中，智能UI模塊成為了會場模塊的主流方案之一，在本次雙11大促中覆蓋了300+的會場，使得會場除了在商品推薦上做到個性化之外，還實現(xiàn)了UI層面上的千人千面的個性化能力。
現(xiàn)狀和挑戰(zhàn)
什么是智能UI？
? ? ? ? 通過對大量線上頁面的研究，智能UI設(shè)計團隊總結(jié)并提出了描述電商模塊設(shè)計方案的模型。模型包含了界面的柵格、布局、樣式等信息，具體定義見下圖。
? ? ? 通過上述模型，可以將電商模塊的設(shè)計數(shù)據(jù)進行結(jié)構(gòu)化。在實際應(yīng)用中，我們將模型拆分成幾個部分分別進行描述。
? ? ? 以區(qū)塊（Block）為例，在上圖的智能UI商品模塊視覺稿中，我們將整個模塊劃分為5個區(qū)塊，分別為：封面、標題、賣點、營銷活動、價格，每個區(qū)塊有唯一對應(yīng)的編碼：A - E，每個區(qū)塊可以展示不同的物料。以上圖為例，該視覺稿包含的樣式方案數(shù)為5個區(qū)塊的乘積：3*2*8*3*1=144。前端在開發(fā)時，會根據(jù)算法接口返回的唯一編碼把對應(yīng)物料渲染到對應(yīng)區(qū)塊位置。
測試要怎么做？
? ? ? 單一模塊具有如此眾多的樣式，勢必會給測試工作帶來新的挑戰(zhàn)。為了保障線上質(zhì)量，在測試工作中必須覆蓋所有的樣式，然而在智能UI模塊樣式龐大的數(shù)量級面前，傳統(tǒng)的手工測試顯得十分的力不從心。從現(xiàn)實角度考慮，單純地堆積人力已然無法解決問題，因此，自動化檢測就順理成章地成為了我們唯一的選擇。
通過梳理智能UI模塊的現(xiàn)狀，我們的自動化測試方案主要需要解決以下幾個問題：
針對不同智能UI模塊，自動獲取所有樣式方案，并分別生成測試頁面。
針對某一特定方案，自動校驗數(shù)據(jù)投放和顯示的邏輯，即：頁面上展示的圖片以及數(shù)據(jù)是否正確。
UI樣式檢測。內(nèi)容包括商品坑相互之間的間距，以及商品坑與邊框的邊距等。
解決方案
測試樣本生成
//區(qū)塊全部描述信息
{
"blocks":
[
{"name":"封面區(qū)","code":"A","children":["1","2","3"]},
{"name":"標題區(qū)","code":"B","children":["1","2"]},
{"name":"賣點區(qū)","code":"C","children":["1","2","3","4","5","6","7","8"]},
{"name":"營銷活動區(qū)","code":"D","children":["1","2","3"]},
{"name":"價格區(qū)","code":"E","children":["1"]}
],
"key": "A^1|B^2|C^4|D^1|E^1"
}
上述代碼描述了一個智能UI模塊的區(qū)塊信息，其中key字段表示當前所使用的樣式“A^1|B^2|C^4|D^1|E^1”：
A1：封面區(qū)顯示場景圖
B2：標題區(qū)顯示算法商品名字段
C4：賣點區(qū)顯示銷量字段
D1：營銷活動區(qū)顯示滿減字段
E1：價格區(qū)顯示價格字段
根據(jù)模塊的區(qū)塊描述信息，我們很容易就可以遍歷生成模塊對應(yīng)的所有樣式。
? ? ? 對于會場所使用的模塊，我們開發(fā)了相應(yīng)的功能，用于批量生成模塊的測試頁面。測試頁面的數(shù)據(jù)投放方式（阿拉丁、kangaroo）以及渲染方式與線上正式頁面保持一致。通過構(gòu)造頁面的mock數(shù)據(jù)，我們可以指定測試頁面所使用的樣式，同時也可以設(shè)置模塊所要展示的商品或店鋪等數(shù)據(jù)字段。
自動識別
? ? ? 生成模塊測試頁面之后，我們希望能夠?qū)τ陧撁嫔系脑剡M行自動識別，判斷是否與生成頁面時所使用的mock數(shù)據(jù)相一致。
? ? 整個識別的過程大致可以分為兩個步驟：
識別坑位（商品坑、店鋪坑等等）；
識別坑位中的信息。
目標檢測（Object Detection）
? ? ? 為了能夠識別頁面截圖中的商品/店鋪坑位，我們采用了深度學習中的目標檢測算法。整個流程可以分為3個步驟：數(shù)據(jù)準備、訓練、部署。
1.數(shù)據(jù)準備
? ? ? 眾所周知，機器學習需要大量的數(shù)據(jù)樣本用于訓練。那么用于智能UI模塊訓練的樣本需要如何生成？如果單純依靠手工標注的方式，顯然費時費力，效率低下，樣本的多樣性也比較難以保障。因此我們選擇的是imgcook。通過imgcook提供的sketch插件，我們可以從設(shè)計師提供的sketch文件中摳出對應(yīng)的模塊，生成相應(yīng)的DSL代碼，具體詳情可參考文檔：https://imgcook.taobao.org/dsl。在獲取到模塊對應(yīng)的DSL代碼之后，我們就可以對所有模塊進行統(tǒng)一管理。
? ? ? 如上圖所示，我們對設(shè)計稿中提取出的模塊做了統(tǒng)一管理，并且對模塊中的區(qū)域進行了進一步的標注。例如在上圖的商品模塊中，我們將圖片區(qū)域標注為商品白底圖，商品標題、商品利益點、商品描述以及價格等區(qū)域也分別進行了標注。這樣做的目的，是為了在后續(xù)的樣本生成中，可以自動生成更多的樣本用于訓練。在生成樣本時，我們會從淘寶的商品池中隨機選取一張商品白底圖，替換上圖模塊中的白底圖，其他商品標題價格等字段也是類似的處理方式?？偟膩碚f，標注得越細致，所生成樣本的多樣性越能得到保障。
? ? ? 完成單個模塊的數(shù)據(jù)錄入之后，我們會將模塊組裝成類似手機截屏的樣式，并自動對圖中的模塊進行標注，生成最終的測試樣本。
? ? ?? 至此，為了訓練所用的數(shù)據(jù)準備就基本完成。依托于淘寶龐大的商品數(shù)據(jù)庫，我們可以根據(jù)需求，生成任意數(shù)量的測試樣本，并自動完成標注。
2.訓練
??? 我們采用的是標準的Faster R-CNN模型，具體細節(jié)可參見論文：http://arxiv.org/abs/1506.01497，模型的結(jié)構(gòu)如下圖所示，這里就不再贅述。
? ? ? 由于訓練需要GPU資源，因此我們準備了一臺裝有2張Nvidia GTX 1080顯卡的機器用于訓練。從我們的使用情況來看，一般訓練一個模型可以在2小時以內(nèi)完成，AP（Average Precision）在95%以上。
? ? ? 在實際使用中我們發(fā)現(xiàn)，如果直接訓練模型對圖片中的商品坑進行識別，識別的準確率并不理想，因此我們對方案進行了調(diào)整。如上圖所示，我們首先訓練的是一個比較粗粒度的模型，對圖片中的布局進行一個識別，識別出其中的1排1、1排2、1排3、底部bar等模塊。其次，我們又訓練了一個坑位級識別的模型，對上一步識別的結(jié)果進行再一次的識別，最終達到的效果，可以將1排2、1排3等常規(guī)模塊中的每個坑位都識別出來，也可以識別出組件中的按鈕等元素。
3.部署
? ? ? 最終我們需要將完成訓練完成的模型進行部署。我們在訓練中使用的是PyTorch，可以選擇相應(yīng)的平臺完成相關(guān)模型的部署。
內(nèi)容識別
? ? ? 在對模塊進行識別之后，我們需要對模塊中的內(nèi)容進行進一步的識別，以校驗?zāi)K內(nèi)容是否正確。整個校驗可以分為兩部分：
圖片校驗?；贠penCV，校驗mock數(shù)據(jù)中所使用的圖片是否在模塊中展示。
文字校驗?；贠CR能力，校驗mock數(shù)據(jù)中的文字信息是否在模塊中正確顯示。
? ? ? 在實踐中，首先我們會檢測頁面上識別到的坑位數(shù)是否與mock數(shù)據(jù)一致。其次，我們會分別檢測每個坑位的圖片以及文字信息是否與對應(yīng)的mock數(shù)據(jù)相符合。
UI樣式檢測
? ? ? 在智能UI模塊的設(shè)計中，設(shè)計師規(guī)定了模塊與邊框的距離已經(jīng)商品坑位相互之間的間距，但在具體實現(xiàn)中開發(fā)可能會有所疏漏，因此我們設(shè)計了對應(yīng)的自動檢測能力。
? ? ? 以上圖中的第一個坑位為例，通過目標檢測我們可以從圖片中識別到坑位的位置，然而由于精度問題，算法識別出的邊框與實際邊框存在一定的誤差，因此我們無法直接通過算法識別到的坑位邊框來進行邊距的計算。為了解決這個問題，我們可以在生成測試頁面的時候指定頁面的背景色（非白色），然后基于目標檢測算法識別到的坑位邊框，以一定的偏移量向上/向下/向左/向右比較圖片中像素點的顏色是否與背景色一致，從而定位到準確的坑位邊框，最終實現(xiàn)邊距的精確計算。
其他
? ? ? 不可避免的是，智能UI中依然有部分功能需要涉及人工測試，比如線上會場的真實數(shù)據(jù)以及真實頁面的校驗。此外，整個自動化測試也需要留底用于日后的校驗或復(fù)盤。基于上述考慮，我們也做了相應(yīng)功能的開發(fā)。目前我們的系統(tǒng)支持mock頁面的生成，也支持線上頁面的獲取。在截圖方面，我們可以通過瀏覽器模擬手機頁面來截圖，也支持通過指定的手機真機來截圖。
? ?? ?此外，通過上文對于智能UI模塊的分析可以發(fā)現(xiàn)，智能UI模塊樣式在生成的過程中，采用的是類似笛卡爾積的方式，將不同區(qū)域的物料進行了一個組合。在具體的測試過程中，特別是針對人工測試，我們認識到，沒有必要對每一種樣式都進行測試，只要檢測的樣式可以覆蓋所有的物料，就可以保障模塊的質(zhì)量。因此，我們對每個智能UI模塊生成的樣式進行了去重處理，使得需檢測的樣式降低了一個數(shù)量級，從而大大減少了工作量。
總結(jié)
? ? ? 在2020年的雙十一中，我們通過上述方案對智能UI模塊進行了質(zhì)量保障，累計覆蓋樣式20000+。總體而言，整個智能UI方案接受住了大促的考驗，線上未產(chǎn)生故障或bug，同時也為業(yè)務(wù)帶來了穩(wěn)定的增長，智能UI逐漸成為流量精細化運營不可或缺的新能力。