前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)

舒海林 貴州大學(xué)明德學(xué)院

1 系統(tǒng)相關(guān)技術(shù)

值得一提的是，基于Node.js容器托管的YunOS官網(wǎng)V2.7發(fā)布上線證明前端項(xiàng)目也可以如同后端項(xiàng)目一樣以一個(gè)完整的工程存在。在這種開(kāi)發(fā)模式下，開(kāi)發(fā)機(jī)器上的預(yù)覽效果即等同線上效果的全貌，修改和迭代不再需要從線上拷貝源代碼了。在傳統(tǒng)的Java層和客戶端層引入了新的一層Node，不僅給前端帶來(lái)了機(jī)遇，也帶來(lái)了挑戰(zhàn)。對(duì)后端環(huán)境的陌生，使得前端在質(zhì)量、安全、部署、監(jiān)控、預(yù)警等領(lǐng)域需要重新思考、界定范圍并建立新規(guī)則。

2 系統(tǒng)需求分析

從前端自動(dòng)化測(cè)試的特點(diǎn)出發(fā)分析，前端自動(dòng)化測(cè)試提供質(zhì)量信息給項(xiàng)目開(kāi)發(fā)者，測(cè)試人員，以及維護(hù)人員。同時(shí)，前端自動(dòng)化測(cè)試通過(guò)對(duì)有關(guān)被測(cè)試產(chǎn)品或者服務(wù)的而進(jìn)行的一系列的測(cè)試活動(dòng)，預(yù)測(cè)網(wǎng)站上線的風(fēng)險(xiǎn)以及對(duì)上線網(wǎng)站的回歸測(cè)試。至于進(jìn)行前端自動(dòng)化測(cè)試的實(shí)際，傳統(tǒng)來(lái)說(shuō)是在軟件的具體概要已經(jīng)確定并且完成代碼編寫(xiě)后才進(jìn)行軟件測(cè)試，但是隨著敏捷測(cè)試的概念的產(chǎn)生，軟件測(cè)試被提出與軟件開(kāi)發(fā)同時(shí)進(jìn)行，甚至開(kāi)始于需求設(shè)計(jì)階段。對(duì)于本次前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)來(lái)說(shuō)，我們測(cè)試的目的是是對(duì)網(wǎng)站進(jìn)行審核，這種審核是用來(lái)幫助軟件產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)的，是客觀的、獨(dú)立的，因此在開(kāi)發(fā)過(guò)程中的任何階段都可以進(jìn)行前端自動(dòng)化測(cè)試與持續(xù)集成。

3 軟件設(shè)計(jì)

3.1 系統(tǒng)的特點(diǎn)

前端自動(dòng)化測(cè)試及持續(xù)集成系統(tǒng)的特點(diǎn)主要體現(xiàn)在選擇測(cè)試計(jì)劃和執(zhí)行測(cè)試計(jì)劃兩個(gè)方面。

(1）選擇測(cè)試計(jì)劃

如需求分析中所列，根據(jù)不同的測(cè)試內(nèi)容，執(zhí)行不同的測(cè)試計(jì)劃。區(qū)別于服務(wù)端代碼的測(cè)試的是GUI軟件測(cè)試部分。

(2）執(zhí)行測(cè)試計(jì)劃

執(zhí)行階段的工作就是按照步驟來(lái)執(zhí)行測(cè)試,所依據(jù)的測(cè)試用例是設(shè)計(jì)階段建立的.狹義上講，按照測(cè)試用例開(kāi)展測(cè)試的階段就是通常我們提到的測(cè)試。在我們這里把執(zhí)行測(cè)試計(jì)劃分為：前端單元測(cè)試、前端覆蓋率測(cè)試、界面回歸測(cè)試、前端功能測(cè)試、持續(xù)集這幾個(gè)階段。

3.2 系統(tǒng)的難點(diǎn)

(1）GUI測(cè)試的難點(diǎn)

目前，計(jì)算機(jī)軟件與普通用戶進(jìn)行信息傳遞和交互過(guò)程中，GUI（Graphical User Interface）是主要的方式。GUI中文譯為圖形用戶界面，而對(duì)GUI軟件開(kāi)展的軟件測(cè)試也叫GUI軟件測(cè)試。

極大的方便了用戶的操作的同時(shí)，GUI的存在也使得GUI軟件更復(fù)雜、更難以測(cè)試。學(xué)術(shù)界和工業(yè)界日漸感興趣于GUI軟件的開(kāi)發(fā)，也重視GUI軟件的測(cè)試的重要性，然而，還處于初級(jí)階段的測(cè)試實(shí)踐證明， 很多存在于GUI軟件的測(cè)試的問(wèn)題還沒(méi)有解決，由于技術(shù)限制，在實(shí)際需求中，保證軟件質(zhì)量不能被滿足，依然需要投入較多的項(xiàng)目時(shí)間和較高人工成本來(lái)進(jìn)行GUI軟件測(cè)試。

(2）系統(tǒng)開(kāi)發(fā)及推廣難點(diǎn)

在一些特殊的情況下，前端自動(dòng)化測(cè)試及持續(xù)集成系統(tǒng)需要考慮到測(cè)試環(huán)境，如是否跨域，日常線上等；需要考慮到性能問(wèn)題，如測(cè)試系統(tǒng)的性能會(huì)受本地機(jī)器的影響，能否同時(shí)測(cè)試多個(gè)承受大型項(xiàng)目的壓力測(cè)試等；需要考慮到可用性問(wèn)題，為了代替手工的測(cè)試，是否建立通過(guò)倉(cāng)庫(kù)地址來(lái)執(zhí)行測(cè)試，然后建立測(cè)試腳本來(lái)調(diào)用測(cè)試工具，這就要求倉(cāng)庫(kù)和腳本對(duì)測(cè)試平臺(tái)來(lái)說(shuō)是可訪問(wèn)的，一些私有倉(cāng)庫(kù)需要考慮這一點(diǎn)；測(cè)試腳本的編寫(xiě)：腳本的測(cè)試內(nèi)容對(duì)使用者有技術(shù)門(mén)檻和較高的學(xué)習(xí)成本?；谶@些信息，如何讓測(cè)試人員能夠方便快捷有效正確地使用測(cè)試系統(tǒng)，保證能夠按照預(yù)期進(jìn)行測(cè)試，對(duì)前端自動(dòng)化測(cè)試及持續(xù)集成系統(tǒng)的開(kāi)發(fā)提出了挑戰(zhàn)。

另外的一個(gè)難點(diǎn)是測(cè)試腳本的開(kāi)發(fā)，對(duì)于目前的工具，寫(xiě)自定義測(cè)試用例是有一定門(mén)檻的，對(duì)于前端同學(xué)會(huì)好一些，但對(duì)于測(cè)試同學(xué)門(mén)檻會(huì)更高，給主動(dòng)接入增加了難度。

3.3 系統(tǒng)技術(shù)選型

這里從需求，實(shí)現(xiàn)成本和使用成本出發(fā)，選擇方案一Phantomjs與CasperJS開(kāi)發(fā)前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)的開(kāi)發(fā)。

(1）方案一：Phantomjs＋CasperJS

PhantomJS 是一個(gè)無(wú)界面的,可腳本編程的WebKit瀏覽器引擎。它原生支持多種web 標(biāo)準(zhǔn)：DOM 操作，CSS選擇器，JSON，Canvas以及SVG。

CasperJS 基于PhantomJS和SlimerJS，提供了更加易用API, 增強(qiáng)了測(cè)試等方面的支持。

Phantomjs＋CasperJS適合于大部分網(wǎng)站的自動(dòng)化測(cè)試，但是要注意的是，這組技術(shù)選型不適合于新特性眾多的網(wǎng)站的測(cè)試，究其原因最新版的CasperJS所支持的Phantomjs1.9.8用的是2011年的Webkit內(nèi)核534.34，目標(biāo)測(cè)試網(wǎng)站用到的很多新特性在此版本瀏覽器上不兼容。

(2）方案二：SlimerJS＋CasperJS

SlimerJS 與PhantomJS相似，運(yùn)行于Gecko內(nèi)核之上（與Firefox同核）。SlimerJS的功能相對(duì)Phantomjs弱很多，比如不支持--ignore-ssl-errors參數(shù)設(shè)置，導(dǎo)致登錄頁(yè)面腳本運(yùn)行失敗。

(3）方案三：webdriverio + mocha

webdriverio 自動(dòng)化工具，基于Selenium WebDriver封裝，可運(yùn)行于chrome, firefox, safari, ie, ios android等瀏覽器或APP。mocha 是一款BDD測(cè)試框架。用戶操作測(cè)試：編寫(xiě)一套腳本，可運(yùn)行于不同瀏覽器，實(shí)現(xiàn)功能測(cè)試的同時(shí)順帶實(shí)現(xiàn)瀏覽器兼容性測(cè)試。界面回歸測(cè)試：像素對(duì)比，需要安裝webdrivercss插件。作為前端工程師，在寫(xiě)測(cè)試腳本時(shí)總有一股修改DOM元素從而達(dá)到操作效果的沖動(dòng)，還好webdriver沒(méi)有提供此類(lèi)API，避免了對(duì)測(cè)試對(duì)象的破壞與干涉。

3.4 系統(tǒng)架構(gòu)

前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)集前端單元測(cè)試、覆蓋率測(cè)試、界面回歸測(cè)試、功能測(cè)試、持續(xù)集成及結(jié)果分析等多種功能于一體。利用此平臺(tái)，測(cè)試工作者可以方便地進(jìn)行測(cè)試內(nèi)容管理和測(cè)試結(jié)果查看。此外，為了方便測(cè)試工作者使用前端自動(dòng)化測(cè)試及持續(xù)集成系統(tǒng)，設(shè)計(jì)了易于理解的交互界面。以下將從幾個(gè)步驟分析系統(tǒng)的流程：

(1）搭建工程目錄

搭建工程目錄是自動(dòng)化測(cè)試和項(xiàng)目開(kāi)展的第一步，旨在自動(dòng)地下載前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)模塊，拉去代碼版本管理服務(wù)器（如SVN）里項(xiàng)目源碼的最新版本到本地，然后根據(jù)模塊的結(jié)構(gòu)組織開(kāi)展項(xiàng)目并隨時(shí)實(shí)施自動(dòng)化測(cè)試。

(2）安裝環(huán)境以及插件

自動(dòng)化安裝時(shí)需要考慮操作系統(tǒng)以及瀏覽器測(cè)試需求，前端自動(dòng)化測(cè)試與持續(xù)集成系統(tǒng)將根據(jù)用戶的命令，在硬件軟件安祖運(yùn)行條件時(shí)根據(jù)相應(yīng)的測(cè)試環(huán)境來(lái)開(kāi)展測(cè)試。

(3）啟停測(cè)試

多模塊協(xié)調(diào)工作的插件在前端自動(dòng)化測(cè)試系統(tǒng)中普遍存在，部分前端自動(dòng)化測(cè)試模塊有很?chē)?yán)格的安裝啟動(dòng)順序。被命令行調(diào)用的模塊成功安裝后，啟停測(cè)試的命令應(yīng)該根據(jù)特定的業(yè)務(wù)邏輯執(zhí)行，保證相應(yīng)模塊的業(yè)務(wù)邏輯能夠正常的工作。

(4）測(cè)試腳本

根據(jù)系統(tǒng)使用者的需求，依據(jù)開(kāi)發(fā)人員或者測(cè)試人員設(shè)計(jì)的測(cè)試用例，來(lái)開(kāi)發(fā)測(cè)試腳本，根據(jù)對(duì)每個(gè)測(cè)試腳本執(zhí)行測(cè)試用例。在每個(gè)測(cè)試用例逐一地自動(dòng)化地執(zhí)行后，測(cè)試結(jié)果（成功與失敗）將被返回給控制節(jié)點(diǎn)，返回結(jié)束后對(duì)結(jié)果進(jìn)行過(guò)濾并且輸出顯示測(cè)試結(jié)果。

(5）顯示測(cè)試結(jié)果

在執(zhí)行測(cè)試用例時(shí)，node中的監(jiān)控進(jìn)程會(huì)收集被測(cè)系統(tǒng)上的測(cè)試結(jié)果性能數(shù)據(jù)和詳細(xì)日志數(shù)據(jù)。在該測(cè)試用例執(zhí)行完后，該監(jiān)控進(jìn)程自動(dòng)地會(huì)將收集的結(jié)果發(fā)送到GUI界面。

由系統(tǒng)技術(shù)選型以及以上流程，這個(gè)系統(tǒng)的架構(gòu)如下：

圖 系統(tǒng)架構(gòu)圖