672
技術社區[雲棲]
UI自動化體係建設的創新實踐
在雲效持續集成持續交付專場直播中，阿裏資深研發工程師開風為大家帶來了《分層自動化之UI自動化體係建設》分享，他主要從UI自動化之痛和UI自動化體係建設之創新實踐兩部分，詳細講解了雲效團隊在UI自動化體係建設方麵的寶貴經驗。
以下內容根據講師PPT和視頻整理而成。
上圖左側的柱狀圖是從2010年12月到2014年12月中國網站數量增長情況，可以看出目前中國網站的數量呈現平穩遞增的局麵，網頁的數量也呈現出大幅度上升。如此數量的網站和網頁，以及迭代速度越來越快的互聯網項目和越來越多的功能，手工地進行回歸、前端UI方麵的測試完全不能達到要求。
當前主流的UI自動化框架主要分為兩種模式：一是編寫腳本代碼；二是通過錄製生成腳本代碼。上圖對這種兩模式從創建腳本、維護調試、排錯成本、手工測試四個維度進行了對比：前者在編寫腳本代碼上耗時較長，而後者主要時長集中在維護調試這一步驟。由於互聯網行業的業務變更、頁麵變更較快，且人員流動性較強，腳本的交接、保持腳本的穩定性等問題，也成為UI自動化過程中的痛點。
並且，目前瀏覽器的種類越發繁多，如IE、Chrome、火狐、safari等等，如何通過寫一次腳本或錄製一次腳本就實現多瀏覽器的測試呢？這一問題也深深困擾著UI自動化的開發人員。
雲效團隊的創新理念主要包括高效、簡單、質量三點：
-
高效是讓自動化成為一件高效的事情，哪裏不高效，就在哪裏創新；
-
簡單是指降低自動化技術門檻，讓大媽也能玩轉自動化；
-
質量是指快速維護，能持續保證產品質量。
除了上文提到兩種主流模式（第一種是編寫腳本代碼（webdriver），通過封裝形成自身的腳本自動化；第二種像QTP和selenium IDE之類的錄製->生成腳本->維護腳本）。目前阿裏結合自身的創新實踐，提出了第三種模式：錄製腳本->生成數據->最終生成可維護的可視化數據，實現錄製、維護雙可視化，而非維護代碼。
那麼UI自動化體係建設的必備要素有哪些呢？
首先要具有很好的錄製技術；其次維護時需要降低成本，實現維護可視化；還需要在錄製過程中需要設置一些檢查點，對一些數據進行參數化；其他如腳本管理係統、控件定位算法、數據驅動、公共腳本、執行調度、執行驅動、執行監控、執行框架可插拔都是UI自動化體係建設的必備要素。
UI自動化體係建設的關鍵主要有四點，分別是：（1）錄製準確性（前提）；（2）維護成本；（3）執行穩定性；（4）報告和錯誤排查，下麵來一一詳解。
在錄製過程中，元素的抓取是最為關鍵的，元素抓取的完備性決定了後續定位控件的準確性。
如在錄入框內輸入“123456”，在錄製過程中需要采集基本信息，一是元素對象本身，常見的是<input>輸入框；其次是在該元素上的動作，這裏是set；還包括所輸入的數據“123456”。根據這些采集到的元素的基本數據，就可以生成element.set(data)這一測試代碼。
那抓取元素一定需要抓取哪些信息呢？
首先是元素基本的ID、class、text、tagName等屬性需要抓取；其次是xpath（相對）路徑，它可以通過一些工具自動生成；此外，還需要抓取相似元素在頁麵的索引；最後需要注意匹配度，它用於排除誤定位。下麵來分享一下錄製過程中踩過的坑。
Iframe中元素抓取和定位
傳統行業的頁麵經常使用iframe嵌套，當需要錄製多層嵌套中元素時，需要將嵌套的層級和元素自身的信息抓取下來，形成元素信息結構化數據。由於跨層之間的iframe之間無法直接通信，當麵臨這種情況時，采用何種方式才能保證元素抓取的準確性呢？在UI自動化執行階段中，遇到iframe首先需要switch到這個iframe中，然後定位該元素後，再做一些執行動作。
那麼麵對多層嵌套的iframe，如何準確的抓取並且形成穩定的元素信息結構供後麵的定位呢？
上圖描述了一種iframe中簡單元素抓取和定位的機製：首先，通過JS注入的方式往各個iframe中注入代碼；之後再通過window、postMessage等通信協議進行消息的發送和同步；在後台中心對iframe和top window之間的消息轉發，進行循環元素定位，最終抓取出元素，抓取的元素結構包含top window->iframe->iframe->iframe->元素，這種結構阻止了在後續元素定位時出現控件定位失敗的情況。
錄製準確性——抓取元素——精確選擇
另一個需要注意的坑是精確選擇。在錄製過程中，多個Dom樹節點可以表示一個元素，這就導致錄製選擇框選擇dom節點不定。當通過錄製選擇框選擇的元素可用來定位的信息太少時，可能導致執行時定位元素失敗。如果采用精確選擇或者精確定位機製，會有效地規避此類問題，例如在選擇元素時，選擇元素信息豐富的div節點，進而有效提高控件定位的準確性。精確選擇實現起來比較簡單，通常是將當前節點的所有父節點和子節點都抓取之後，結合整體Dom樹結構，選擇元素信息豐富的dom樹節點來表示元素。
錄製準確性——漏錄
利用Selenium IDE錄製框架錄製淘寶上點擊已買到寶貝這一動作時，首先需要將鼠標移動到“我的淘寶”元素上，才會觸發下拉菜單，然後才能看到“已買到的寶貝”這一按鈕，之後才會錄製點擊已買到的寶貝這一動作。麵對這種情況，很多使用者都會漏錄移動鼠標到“我的淘寶”這一步驟，進而使得在執行階段丟失“已買到的寶貝”這一元素；此外，其他如漏錄滾動條滾動動作，都會導致後續控件定位失敗的現象。麵對這些漏錄動作的場景，應該如何處理呢？
自動生成方式可以解決這一問題，阿裏內部自創了自動生成錄製方式：在頁麵錄製時，進行事件監控，當監控到鼠標移動、點擊、滾動條滾動等動作時，在這些事件發生的前後分別做一個dom樹快照，然後對比這兩份快照，看新增了哪些元素。對於這些新增元素進行檢查，如果元素上有特定標記時，說明該元素是有前置動作的，如果錄製了相應的前置動作，則移除該標記；如果沒有錄製響應的前置動作，則會根據這一標識查找具體需要錄製的哪些前置動作。
解決漏錄問題能夠有效提升了執行的成功率，降低了維護成本，使得錄製完成後生成的腳本高可用。
錄製準確性——數據和環境初始化
數據和環境的初始化也是錄製準確性的前提。在執行錄製動作的前後，發送Http請求或支持這種機製，或者進行數據庫初始化以保證在錄製過程中環境穩定、數據冗餘正常，排除環境和數據對錄製過程的幹擾，進而提高腳本錄製的質量。
下麵來談一下維護成本。
降低維護成本主要從三個方麵入手，分別是：
-
可視化維護，區別於常見的錄製框架，可視化維護不需要維護代碼，降低了技術門檻，隻需維護操作界麵，就可以實現UI自動化；
-
錄製元素信息批量更新，例如在頁麵登錄場景，很多腳本都需要錄製登錄這個動作，之後才能錄製其他動作，如果一些常見的公共場景，如登陸密碼框結構發生變化，可以利用錄製元素的批量更新這一機製；
-
公共腳本是將如登錄之類的場景提取出來做成一個公共腳本，使得錄製過程中公共點可以使用公共腳本實現，實現業務腳本的可拚裝，進而降低了生成、維護腳本的成本。
執行穩定性的前提是元素定位，之後再對元素進行點擊、下拉等操作。因此，公司需要有一套自己的空間定位算法，這套算法準確性是基於之前錄製元素準確性的，錄製信息越完備，算法定位越準確。這類算法一般是多種定位方式相結合，按照ID、Class、Text、TagName綜合定位，直到定位到所需元素；對於相似元素，可以按照相對位置或者相對索引進行定位，以及利用Xpath進行最終定位保證，還可以利用相關的匹配度計算來排除誤定位。
執行穩定性——腳本執行
在保障執行穩定性方麵，首先需要有執行監控，它能夠保障在執行過程中每個動作都能被良好地監控；其次要做到多執行框架可插拔，隨時做好框架的可擴展性，並行保證執行穩定性；此外，需要保障一次錄製，多瀏覽器執行。
執行完成後需要進行執行校驗，來校驗操作是否成功。常見的檢查點包括文本檢查、數值檢查、元素屬性檢擦、頁麵URL檢查、Cookie值檢查、數據庫表內容檢查、彈出框檢查。
執行完成之後，假設腳本執行失敗之後如何幫助用戶快速定位問題，這就需要完善的報告和錯誤排查機製了。
錯誤排查主要包括：
執行報告和執行日誌，執行完成之後需要向用戶提供一份完善的執行報告，讓其了解執行的過程以及每次執行是否成功，如上圖所示，詳細羅列出各類信息。
步驟截圖，它幫助用戶進一步定位當時執行場景的信息。
錯誤分類，通過錯誤分類機製引導用戶關注UI自動化框架的特點，更好地排查問題。
除了上述談到的方式，在UI自動化體係建設中，還有一些其他措施，如腳本編譯模塊、報告中心、執行監控係統、執行代理、分布式執行調度係統、定時調度係統等。
在擴展性方麵，對於非常見的頁麵，需要支持自定義編碼，對於特殊要求的用戶，應該支持組件化開發；同時，整個自動化體係建設需要進行生命周期管理，具體可以分為腳本執行前後、動作執行前後，在執行生命周期中插入一些代碼以滿足執行腳本的可擴展性。
最後來談一下數據中心。無論是UI自動化還是接口自動化，都需要有很好的數據最支撐。在錄製過程中，如登錄賬號，不可能實際地去注冊，需要有完善地數據中心服務統一提供執行賬號密碼，以及訂單號、會員ID等。
目前，阿裏雲效團隊將阿裏內部的技術整合，推出了持續集成、持續交付一站式平台，通過項目管理流程和專項提效自動化工具，真正實現24小時持續集成持續交付：
阿裏雲——雲效平台： https://yunxiao.aliyun.com
最後更新：2017-07-25 12:02:46