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

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

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

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

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

3 軟件設(shè)計

3.1 系統(tǒng)的特點

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

(1）選擇測試計劃

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

(2）執(zhí)行測試計劃

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

3.2 系統(tǒng)的難點

(1）GUI測試的難點

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

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

(2）系統(tǒng)開發(fā)及推廣難點

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

另外的一個難點是測試腳本的開發(fā)，對于目前的工具，寫自定義測試用例是有一定門檻的，對于前端同學(xué)會好一些，但對于測試同學(xué)門檻會更高，給主動接入增加了難度。

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

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

(1）方案一：Phantomjs＋CasperJS

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

CasperJS 基于PhantomJS和SlimerJS，提供了更加易用API, 增強了測試等方面的支持。

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

(2）方案二：SlimerJS＋CasperJS

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

(3）方案三：webdriverio + mocha

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

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

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

(1）搭建工程目錄

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

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

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

(3）啟停測試

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

(4）測試腳本

根據(jù)系統(tǒng)使用者的需求，依據(jù)開發(fā)人員或者測試人員設(shè)計的測試用例，來開發(fā)測試腳本，根據(jù)對每個測試腳本執(zhí)行測試用例。在每個測試用例逐一地自動化地執(zhí)行后，測試結(jié)果（成功與失?。⒈环祷亟o控制節(jié)點，返回結(jié)束后對結(jié)果進(jìn)行過濾并且輸出顯示測試結(jié)果。

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

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

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

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