前端頁(yè)面測(cè)試需要測(cè)試哪些內(nèi)容？前端自動(dòng)化測(cè)試的實(shí)現(xiàn)小技巧

前端頁(yè)面測(cè)試需要測(cè)試哪些內(nèi)容？前端測(cè)試主要分4大類，而這4大類也分很多小方向測(cè)試，今天小編簡(jiǎn)單的介紹每個(gè)方向的概念：

1）界面樣式測(cè)試

固定界面樣式測(cè)試：主要針對(duì)文字內(nèi)容不變的區(qū)域，例如頁(yè)面的頁(yè)頭，頁(yè)腳這類結(jié)構(gòu)、內(nèi)容不變的區(qū)域，而測(cè)試一般通過(guò)截圖對(duì)比解決。

結(jié)構(gòu)不變界面樣式測(cè)試：主要針對(duì)結(jié)構(gòu)不變的區(qū)域，例如新聞區(qū)域這類結(jié)構(gòu)不變，內(nèi)容變化的區(qū)域，這類測(cè)試一般通過(guò)DOM元素對(duì)比解決。

計(jì)算樣式測(cè)試：主要針對(duì)計(jì)算樣式不變的區(qū)域，這類測(cè)試一般通過(guò)比較計(jì)算樣式解決，但是這種測(cè)試不推薦，因?yàn)闇y(cè)試成本比較大。

2）功能測(cè)試

服務(wù)器數(shù)據(jù)預(yù)期測(cè)試：主要針對(duì)用戶在前端界面進(jìn)行某種操作后，提交數(shù)據(jù)給后臺(tái)后，測(cè)試后臺(tái)能否返回預(yù)期的數(shù)據(jù)

界面功能測(cè)試：主要針對(duì)用戶在前端界面進(jìn)行某種交互性操作后，測(cè)試能否獲取預(yù)期的功能、界面交互

3）多瀏覽器測(cè)試

多瀏覽器測(cè)試：基于界面樣式測(cè)試、功能測(cè)試的基礎(chǔ)上來(lái)進(jìn)行不同瀏覽器的的測(cè)試，俗稱兼容性測(cè)試。

4）性能測(cè)試

白屏?xí)r間：用戶瀏覽器輸入網(wǎng)址后至瀏覽器出現(xiàn)至少1px畫面為止。

首屏?xí)r間：用戶瀏覽器首屏內(nèi)所有的元素呈現(xiàn)所花費(fèi)時(shí)間。

頁(yè)面回歸時(shí)間：用戶瀏覽器非第一次加載所有的元素呈現(xiàn)所花費(fèi)時(shí)間。

用戶可操作時(shí)間(dom ready) ：網(wǎng)站某些功能可以使用的時(shí)間。

頁(yè)面總下載時(shí)間(onload):網(wǎng)站中所有資源加載完成并且可用時(shí)間。

下面，主要跟大家分享一下前端自動(dòng)化測(cè)試的實(shí)現(xiàn)：

1.允許測(cè)試腳本里調(diào)用api

我們經(jīng)常在測(cè)試時(shí)要做一些準(zhǔn)備活動(dòng)，比如注冊(cè)一個(gè)新用戶。這一步驟可能每次花費(fèi)幾分鐘時(shí)間，那么這時(shí)候建議直接調(diào)用注冊(cè)用戶的api來(lái)生成新用戶。每個(gè)場(chǎng)景節(jié)約幾分鐘，加起來(lái)就多了。

2.允許測(cè)試腳本里訪問(wèn)數(shù)據(jù)庫(kù)

雖然我們做測(cè)試可以說(shuō)重點(diǎn)在界面上，但是業(yè)務(wù)邏輯上如果出錯(cuò)了最好也要能找出來(lái)。也就是說(shuō)，我的檢查點(diǎn)不止檢查頁(yè)面元素，更先去檢查對(duì)應(yīng)數(shù)據(jù)在數(shù)據(jù)庫(kù)里是否正確。好處是數(shù)據(jù)庫(kù)里不正確的時(shí)候，腳本就不用傻乎乎等個(gè)幾十秒才報(bào)出來(lái)頁(yè)面上的錯(cuò)誤。

3.為測(cè)試準(zhǔn)備獨(dú)立干凈的測(cè)試環(huán)境

測(cè)試如果針對(duì)網(wǎng)站，很多時(shí)候要考慮在windows系統(tǒng)上跑腳本。一般建議和工作用的電腦分開(kāi)。如果有條件，還可以自動(dòng)化搭建這樣的測(cè)試環(huán)境，我們以前是通過(guò)云自動(dòng)搭建符合要求的虛擬機(jī)來(lái)做。

4.考慮測(cè)試邏輯的重要性

通常采用頁(yè)面對(duì)象建模，詳見(jiàn)selenium官網(wǎng)。如果是商業(yè)工具則一般已經(jīng)自帶對(duì)象庫(kù)，如QTP等都自帶了。簡(jiǎn)單來(lái)說(shuō)就是同樣的測(cè)試邏輯封裝在一起，用的時(shí)候直接調(diào)，改的時(shí)候只改一個(gè)地方。

5.在開(kāi)發(fā)階段考慮可測(cè)性

有的app就是不可測(cè)，這也動(dòng)態(tài)那也動(dòng)態(tài)，控件各種不標(biāo)準(zhǔn)，自定義，這種是沒(méi)法做自動(dòng)化的。

6.采用統(tǒng)一的設(shè)計(jì)和分層次的設(shè)計(jì)

如果有一個(gè)測(cè)試場(chǎng)景會(huì)用到網(wǎng)站、桌面app、手機(jī)app，如何做自動(dòng)化？如果采用統(tǒng)一的自動(dòng)化測(cè)試設(shè)計(jì)應(yīng)當(dāng)可以解決。不管是桌面的網(wǎng)頁(yè)的還是手機(jī)的，對(duì)測(cè)試腳本來(lái)說(shuō)都是執(zhí)行測(cè)試的庫(kù)去負(fù)責(zé)的，也就是說(shuō)我寫測(cè)試只是寫業(yè)務(wù)邏輯，如何執(zhí)行是那些庫(kù)的事情。第一層是測(cè)試邏輯層，第二層是測(cè)試實(shí)現(xiàn)層。

這樣分開(kāi)的好處是：

1).實(shí)現(xiàn)層的工具可能會(huì)換；

2).可以測(cè)試復(fù)雜的場(chǎng)景；

3).維護(hù)人員可以分開(kāi)，降低測(cè)試邏輯層維護(hù)人員的技術(shù)要求；

4).便于大團(tuán)隊(duì)的協(xié)作。

7.允許半自動(dòng)化測(cè)試

腳本負(fù)責(zé)截圖，事后人工檢查截下來(lái)的圖，來(lái)判斷是否有界面錯(cuò)亂之類的問(wèn)題，好處是實(shí)現(xiàn)方便。

更多前端自動(dòng)化測(cè)試閱讀：

前端自動(dòng)化測(cè)試方法及工具使用注意事項(xiàng)

web自動(dòng)化測(cè)試工具AR和APP自動(dòng)化測(cè)試工具M(jìn)R的區(qū)別

怎么做前端自動(dòng)化測(cè)試？實(shí)現(xiàn)前端項(xiàng)目的自動(dòng)化測(cè)試的要點(diǎn)

web自動(dòng)化測(cè)試的思路和方法

Web自動(dòng)化測(cè)試工具有哪些？Web自動(dòng)化測(cè)試基本步驟

自動(dòng)化測(cè)試生命周期的6個(gè)階段

如何選擇正確的自動(dòng)化測(cè)試工具？