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

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

1）界面樣式測試

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

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

計算樣式測試：主要針對計算樣式不變的區(qū)域，這類測試一般通過比較計算樣式解決，但是這種測試不推薦，因為測試成本比較大。

2）功能測試

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

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

3）多瀏覽器測試

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

4）性能測試

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

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

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

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

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

下面，主要跟大家分享一下前端自動化測試的實現(xiàn)：

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

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

2.允許測試腳本里訪問數(shù)據(jù)庫

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

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

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

4.考慮測試邏輯的重要性

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

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

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

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

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

這樣分開的好處是：

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

2).可以測試復(fù)雜的場景；

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

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

7.允許半自動化測試

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

更多前端自動化測試閱讀：

前端自動化測試方法及工具使用注意事項

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

怎么做前端自動化測試？實現(xiàn)前端項目的自動化測試的要點

web自動化測試的思路和方法

Web自動化測試工具有哪些？Web自動化測試基本步驟

自動化測試生命周期的6個階段

如何選擇正確的自動化測試工具？