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

1）界面樣式測試

固定界面樣式測試：主要針對文字內容不變的區域，例如頁面的頁頭，頁腳這類結構、內容不變的區域，而測試一般通過截圖對比解決。

結構不變界面樣式測試：主要針對結構不變的區域，例如新聞區域這類結構不變，內容變化的區域，這類測試一般通過DOM元素對比解決。

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

2）功能測試

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

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

3）多瀏覽器測試

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

4）性能測試

白屏時間：用戶瀏覽器輸入網址后至瀏覽器出現至少1px畫面為止。

首屏時間：用戶瀏覽器首屏內所有的元素呈現所花費時間。

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

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

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

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

1.允許測試腳本里調用api

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

2.允許測試腳本里訪問數據庫

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

3.為測試準備獨立干凈的測試環境

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

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

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

5.在開發階段考慮可測性

有的app就是不可測，這也動態那也動態，控件各種不標準，自定義，這種是沒法做自動化的。

6.采用統一的設計和分層次的設計

如果有一個測試場景會用到網站、桌面app、手機app，如何做自動化？如果采用統一的自動化測試設計應當可以解決。不管是桌面的網頁的還是手機的，對測試腳本來說都是執行測試的庫去負責的，也就是說我寫測試只是寫業務邏輯，如何執行是那些庫的事情。第一層是測試邏輯層，第二層是測試實現層。

這樣分開的好處是：

1).實現層的工具可能會換；

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

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

4).便于大團隊的協作。

7.允許半自動化測試

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

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

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

web自動化測試工具AR和APP自動化測試工具MR的區別

怎么做前端自動化測試？實現前端項目的自動化測試的要點

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

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

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

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