WEB-UI自動(dòng)化測試實(shí)踐

一、設(shè)計(jì)背景

隨著IT行業(yè)的發(fā)展，產(chǎn)品愈漸復(fù)雜，web端業(yè)務(wù)及流程更加繁瑣，目前UI測試僅是針對(duì)單一頁面，操作量大。為了滿足多頁面功能及流程的需求及節(jié)省工時(shí)，設(shè)計(jì)了這款UI 自動(dòng)化測試程序。旨在提供接口，集成到蝸牛自動(dòng)化測試框架，方便用例的設(shè)計(jì)。

整個(gè)程序是基于 selenium 設(shè)計(jì)的。程序?qū)?selenium 提供的接口進(jìn)行了二次封裝以滿足日常的用例設(shè)計(jì)，二次封裝后的接口解決了元素加載，元素定位解析等問題，可以讓用例設(shè)計(jì)變得更加簡捷。

之所以采用 Selenium 的模式。原因一，對(duì)于用戶來說這是一個(gè)開源框架，很想窺探一二; 原因二，Selenium 可無縫接入。這是一個(gè)用于Web應(yīng)用程序測試的工具，支持多平臺(tái)、多瀏覽器、多語言去實(shí)現(xiàn)自動(dòng)化測試，Selenium2將瀏覽器原生的API封裝成WebDriver API，可以直接操作瀏覽器頁面里的元素，甚至操作瀏覽器本身（截屏，窗口大小，啟動(dòng)，關(guān)閉之類的）,所以就像真正的用戶在操作一樣。

目前支持：Mac、Windows操作系統(tǒng)，chrome、Firefox、IE瀏覽器。

二、工作原理

• 在蝸牛管理后臺(tái)添加測試用例。
• 蝸牛管理后臺(tái)測試用例執(zhí)行調(diào)用任務(wù)執(zhí)行接口，傳送任務(wù)id及測試數(shù)據(jù)的JSON格式字符串給程序。
• 程序根據(jù)獲取數(shù)據(jù)，解析并處理。
• 啟動(dòng)瀏覽器后，selenium-webdriver會(huì)將目標(biāo)瀏覽器綁定到特定的端口，啟動(dòng)后的瀏覽器則作為webdriver的server。
• 客戶端(也就是測試腳本)，借助ComandExecutor發(fā)送HTTP請(qǐng)求給server端（通信協(xié)議：The WebDriver Wire Protocol，在HTTP request的body中，會(huì)以WebDriver Wire協(xié)議規(guī)定的JSON格式的字符串來告訴Selenium，我們希望瀏覽器接下來做什么事情）。
• Server端需要依賴原生的瀏覽器組件，轉(zhuǎn)化Web Service的命令為瀏覽器native的調(diào)用來完成操作。
• 最后將處理結(jié)果及任務(wù)id通過JSON字符串的格式返回給蝸牛，通過蝸牛的管理后臺(tái)可查看每條用例執(zhí)行結(jié)果。

三、框架介紹

3.1 工程結(jié)構(gòu)

按照實(shí)際的業(yè)務(wù)流程調(diào)用對(duì)應(yīng)接口來實(shí)現(xiàn) WEB-UI 自動(dòng)化測試用例。case 層可調(diào)用 service 層和 pageObject 層的接口，pageObject 是對(duì)每一個(gè)頁面元素的一個(gè)封裝，service 是對(duì)一個(gè)常用的業(yè)務(wù)模塊功能的封裝。比如一個(gè)查詢企業(yè)信息的測試用例，需要依賴登入，這個(gè)業(yè)務(wù)功能就可以直接調(diào)用 service 中的接口。企業(yè)查詢的創(chuàng)建就可以調(diào)用 pageObject 中的接口，然后按照查詢的業(yè)務(wù)流程，在測試用例中把這些接口串起來就形成了一個(gè) UI 自動(dòng)化測試用例，詳細(xì)細(xì)節(jié)接下去會(huì)舉例說明。

如企業(yè)查詢。查詢之前，需要登入管理后臺(tái)，登入操作已封裝到業(yè)務(wù)層，直接調(diào)用 service 層的接口，不需要在意這個(gè)步驟的細(xì)節(jié)；登入之后要指定一個(gè)路徑，找到對(duì)應(yīng)的空間，直接調(diào)用 model 層的接口，不需要在意這個(gè)步驟的細(xì)節(jié)；接著是創(chuàng)建查詢，創(chuàng)建查詢的所有定位方法也封裝到業(yè)務(wù)層，這就是個(gè)企業(yè)查詢的實(shí)現(xiàn)，也是用例設(shè)計(jì)中最主要的環(huán)節(jié)。

整個(gè)工程基于 selenium，采用 pageObject 模式搭建。下面對(duì)工程中的幾個(gè)重要模塊做介紹。

3.1.1 driver — 接口層

對(duì) web 頁面所有元素的操作都是在driver定義接口并實(shí)現(xiàn)的。driver 對(duì) selenium 提供的接口做了二次封裝，對(duì)外提供封裝后的接口。pageObject 實(shí)現(xiàn)了一些公共方法，比如給輸入框賦值等，目前 pageObject封裝的方法不多，大多功能都可以通過 selenium 實(shí)現(xiàn)。driver 層對(duì)開源工具接口做了二次封裝，想要驅(qū)動(dòng)一個(gè)瀏覽器還有一個(gè)必不可少的工具 —— 瀏覽器驅(qū)動(dòng)，這個(gè)驅(qū)動(dòng)放在 Referenced Libraries 里，驅(qū)動(dòng)的版本必須與被測瀏覽器版本相匹配。

3.1.2 model — 數(shù)據(jù)模型

創(chuàng)建數(shù)據(jù)模型為了實(shí)現(xiàn)測試數(shù)據(jù)和測試用例分離而采取的一種方法，具體的測試數(shù)據(jù)初始化?？梢詫?duì)一個(gè)業(yè)務(wù)流程中需要測試數(shù)據(jù)的元素在一個(gè) model 中定義出來，方便管理和代碼閱讀。

3.1.3 pageObject — 業(yè)務(wù)層

pageObject 模式，采用接口形式封裝每一個(gè)頁面需要用到的元素，實(shí)現(xiàn)封裝只要做兩步：

• 確定元素的定位方式；
• 調(diào)用 driver 中對(duì)應(yīng)的操作接口。

driver 的接口實(shí)現(xiàn)包含了一定的容錯(cuò)能力，但并不是全面的，部分頁面或者組件具有獨(dú)特性，單純調(diào)用 driver 的接口并不能保證測試用例的穩(wěn)定性，此時(shí)就需要在 pageObject 的接口實(shí)現(xiàn)中加入一些容錯(cuò)算法，確保用例穩(wěn)定性。

3.1.4 service — 提供業(yè)務(wù)功能

一個(gè)業(yè)務(wù)流程很多時(shí)候依賴其他業(yè)務(wù)模塊功能，為了方便設(shè)計(jì)一個(gè)測試用例，也為了避免重復(fù)造輪子，service 層就提供了一些常用的業(yè)務(wù)功能，比如登入、企業(yè)查詢等。依賴方只需要在 service 層調(diào)用即可。

3.2 功能優(yōu)化

對(duì)selenium 做二次封裝的同時(shí)也對(duì)接口做了優(yōu)化，框架的初衷是使UI 用例的設(shè)計(jì)盡可能的易設(shè)計(jì)、易讀、易維護(hù)。

3.2.1 接口優(yōu)化

直接調(diào)用 selenium 的接口經(jīng)常會(huì)遇到些令人頭疼的問題，比如網(wǎng)絡(luò)問題使頁面 loading 太慢，需要操作的元素還沒展示出來，這種情況就會(huì)經(jīng)常報(bào)元素找不到的 error，導(dǎo)致用例執(zhí)行失敗，但實(shí)際上這種報(bào)錯(cuò)并不是一個(gè) bug，其測試結(jié)果是無效的。為了減少誤報(bào)率 driver 層接口設(shè)計(jì)了等待元素加載的功能，使用的關(guān)鍵方法：cf.searchForElementVisibleXpath(TestStartQuitwd.wd, "//*[text()='運(yùn)營平臺(tái)登錄']", id, 200, 100L)。參考代碼：

在 click、input 等操作接口中加入循環(huán)查找的判斷可最大限度的等待一個(gè)元素的加載從而提高測試用例的穩(wěn)定性。

3.2.2 元素定位統(tǒng)一入口

接觸過 UI 自動(dòng)化用例設(shè)計(jì)的測試人員會(huì)比較清楚，想通過 selenium 操作一個(gè)元素，其中必不可少的就是對(duì)元素定位的描述，通俗的講就是要通知接口在當(dāng)前頁面操作哪個(gè)位置上的元素。定位一個(gè)元素的方法很多，常用的有 id，name，css，xpath 等，對(duì)應(yīng)不同的定位方法selenium 在處理上也給出了不同接口，這從維護(hù)角度上來考慮顯然不是最好的。最好的做法就是用例設(shè)計(jì)者只管元素定位和操作事件的調(diào)用，而事件在實(shí)現(xiàn)上走了哪種渠道最好是無感知，無需維護(hù)的。對(duì)此框架封裝了一個(gè)方法供 driver 調(diào)用，主要功能就是解析描述元素的字符串自動(dòng)判斷是 id、css 還是 xpath。

3.3 元素定位

UI自動(dòng)化用例其實(shí)可以分成兩部分：定位元素；調(diào)用接口操作該元素。其中定位一個(gè)元素的方法很多，常用的有 id，name，css，xpath。實(shí)際設(shè)計(jì)中選擇哪種定位方法一般會(huì)在維護(hù)角度上考慮的會(huì)多一些，因?yàn)楝F(xiàn)在的服務(wù)器性能配置等都很優(yōu)秀，所以跑一個(gè)WEB-UI用例可以不用考慮性能問題。從維護(hù)成本上考慮會(huì)優(yōu)先選擇 id、name，其次 css，最后用 xpath。

我們不能保證每一個(gè) web 系統(tǒng)的所有元素都能提供一個(gè)唯一 id 或 name，當(dāng)然如果能和前端開發(fā)達(dá)成合作，這就是一件很美好的事情了。一般情況下我們都需要面對(duì)沒有 id 和 name 這兩個(gè)屬性的情況。這時(shí)我們就可以使用 css 樣式，很多時(shí)候 css 樣式是能滿足我們的定位需求。當(dāng)然在這些都不提供給我們的情況下就只能選擇 xpath，使用 xpath 的優(yōu)點(diǎn)：

• 易獲取，主流瀏覽器只要打開“查看”就可以通過 copy 輕松獲取到；
• 頁面上的元素都可以用 xpath 來描述；缺點(diǎn)，不穩(wěn)定，大量使用會(huì)給用例維護(hù)產(chǎn)生很大的負(fù)擔(dān)。

xpath 一般只要前端在頁面上做一下小調(diào)整，用例就必須重新維護(hù)，在不得不使用 xpath 的情況下，為了減少今后的維護(hù)量，可對(duì) xpath 做一些優(yōu)化，可以減少 xpath 的路徑長度提高穩(wěn)定性。以下是實(shí)踐過程中最長用到的幾種類型：

• 依靠自己的屬性文本定位，如 //input[@value=‘XXXXX’]
• 包含指示性字符，如 //input[contains(text(),’指示性字符’)]
• 巧妙使用content，如 //*[@id=‘a(chǎn)pp-container']

四、常見報(bào)錯(cuò)

使用過程中經(jīng)常會(huì)遇到問題，這里做下總結(jié)方便 debug。

• 某些頁面彈窗，有時(shí)候定位不到彈窗元素。理論上 selenium 在一個(gè)頁面中查找一個(gè)元素是可以定位到，但有些時(shí)候出現(xiàn)彈窗，此時(shí)就需要在重新定位彈窗。解決方法：

• 有些輸入框不能被 input 接口正常操作。實(shí)踐過程中在日歷控件中遇到過，元素定位什么的都對(duì)，但就是不能正常被操作。解決方法：判斷元素是否是select類型，之后再賦值。解決代碼：

3.發(fā)現(xiàn) selenium 的某些接口不能 work 了，此時(shí)最大的可能就是瀏覽器升級(jí)了。解決方法：重新下載低版本瀏覽器。

4.元素不可見。有一種元素能在頁面上正常展示，但對(duì)于工具來說它是不可見的，這是因?yàn)樵谝话闱闆r下，元素可見需要滿足以下幾個(gè)條件：visibility!=hidden ; display!=none; opacity!=0; height、width都大于0;對(duì)于 input 標(biāo)簽，沒有 hidden 屬性。如截圖就是只讀的實(shí)例。

解決方法：調(diào)用接口 TestStartQuitwd.js.executeScript("var txtN = document.getElementsByName("timeRange"); txtN[0].readOnly = false;");  

五、結(jié)束語

UI自動(dòng)化是在開源工具的基礎(chǔ)上做了些優(yōu)化，在 driver 層，數(shù)據(jù)層、業(yè)務(wù)層以及用例層的解決方案還有很大的提升空間。WEB-UI自動(dòng)化還不完美，后期還需繼續(xù)努力。感謝一直以來支持研究的小伙伴。

作者：顏博蓮

來源：宜信技術(shù)學(xué)院