淘寶如何做智能化UI測試？
| 阿裡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逐漸成為流量精細化營運不可或缺的新能力。