網站測試一般為三個套路：UI測試、功能測試和兼容性測試

　　一、UI測試

　　用戶界面測試主要是拿待測網頁和設計稿進行對比，個人覺得主要需做到以下4點：

　　1、注重細節：

　　這點基本，就是對比時細心、細心再細心。像我現在被虐到網頁上元素和設計稿差一個像素都能看出來…

　　2、勿忘整體性：

　　由于PC網頁頁面空間大，模塊多，很容易在測試時只注意到模塊內設計元素是否正確，而忽略了模塊間的間距或整個頁面的布局是否正確。所以知名按照由局部到整體的順序測試。

　　3、注意頁面間相互對比：

　　即注意相同系列頁面、頁簽布局一致性。就是說的是同一系列頁面中同類元素和模塊的樣式、間距一般要相同；同一個tab下，不同選項對應的頁簽中同類元素和模塊的樣式、間距一般要相同。

　　4、注意極端情況下顯示情況：

　　即要注意長度可變的元件、模塊或字段在極端情況下的顯示是否正常。

　　例如：文章標題多可顯示50字符（25漢字），測試時就要在所有會出現標題的位置（文章列表頁、推薦邊欄、轉發彈框…）是否能正常顯示含有50字符的標題，會不會出現破框而出、自動切掉等情況。

　　由于UI測試時需要檢查的細節很多，特別是像我們團隊，網站還在搭建中并未上線，UI測試的工作量更是大，測久了難免會覺得枯燥繁瑣，但其實每項任務都能總結出套路、有所收獲，故下面僅列出我平時在測這部分時的主要注意點和心得。

　　UI測試注意點總結：

　　模塊間距
　　元素間距
　　不同類型文本（數字、漢字、英文）顏色、格式（全角、半角）大小、字體、（不必須）
　　固定文案：內容的可讀性、正確性?排版的合理性
　　可變字段：極多、極少文字的排版情況
　　Icon用錯、用混
　　相似頁面的差異性和一致性

　　二、功能測試

　　1、操作反應：

　　（1）頁面元素（按鈕、錨文本、輸入框…）自身狀態變化：鼠標移入/移出時效果、點擊后效果、獲取/失去焦點時效果…（可以想想axure里的用例狀態）

　　eg：鼠標移入按鈕，按鈕是底色是否應改變；若輸入框內有默認提示文字，則是當輸入框獲得焦點后文字就消失，還是用戶輸入文字后提示文字才消失…

　　（2）操作成功后續反應：頁面跳轉、彈框、提示文字…

　　a、頁面跳轉：

　　頁面切換方式：另開頁面、本頁切換

　　頁面起始定位：頁面起始位置、頁面其他錨點（例如用戶想評論某文章，在列表頁點評論按鈕后，就會在另開的文章內容頁直接定位到評論區）

　　b、彈框：

　　匹配情況：彈出的彈框是否和觸發條件匹配

　　出現位置：一般情況下要一致。因為彈框使用不同插件，可能導致彈出位置不同。

　　顯示時間（非操作類彈框）：某些僅起到提示功能的彈框會自動顯示若干秒關閉。一般情況此類彈框上文案較少，顯示秒數應該是全站一致的。

　　c、提示文字：

　　匹配情況：出現的提示文案是否和觸發條件匹配

　　關于操作成功后續反應，以上主要是在已確定會觸發某反應情況下，測試其正確性。其實這里更重要的是要考慮在前置條件不同的情況下，對某元素進行相同操作，會觸發什么不同的反應。即需要對各類情況進行窮舉。

　　eg：點擊關注按鈕觸發反應窮舉：

　　a、未登錄用戶點擊該按鈕后效果；
　　b、已登錄用戶點擊該按鈕后效果（b1。未關注過對方、b2。已關注過對方、b3。自己關注自己）

　　窮舉時可以參考PRD，但不要局限于PRD上列出的情況，畢竟有時也許PRD上會有小疏漏，要是程序員做的時候發現疏漏，就自己隨手碼了一個簡易提示而忘記通知產品，而測試的時候也沒觸發到，等用戶實際操作出來就會造成不佳的用戶體驗。

　　2、數據：

　　（1）數據狀態：此處指數據值自身的狀態。即前置條件滿足后，數據狀態是否會按照規則更新。

　　這里的規則一般是

　　a、時間規則（eg：經過多長時間數據狀態改變；在哪個時間點更新…）；
　　b、統計規則（eg：每個ID多次完成前置操作，數據更新多次；每個ID多次完成前置操作，數據僅更新一次；每個ID…）

　　（2）數據排序：數據在某篩選條件下排序的正確性。

　　eg：某寶某店鋪商品展示頁面，當用戶選擇按銷量由高到低排序時，列表是否變為按銷售量多到寡進行排序；當商品A的銷量超過商品B的時候，商品A的位置是否會更換到商品B的前面。

　　3、特殊情況：

　　（1）缺省情況：當某頁面或模塊還沒有內容或尚未加載出來時，是否有相關提示畫面、文案。

　　（2）操作中斷：用戶操作中途退出頁面（eg：填寫資料并尚未保存時關閉頁面）；操作中途斷網…這些情況下是否設置了相關提醒彈框。

　　三、兼容性測試

　　不同瀏覽器（360、谷歌、火狐等等主流瀏覽器）下的頁面顯示情況是否正常。

網頁設計

• 2020-11-11網站測試的重要性 保障網站的穩定
• 2020-11-09響應式網頁測試工具確保你的設計萬無一失-佛山網站制作
• 2020-11-11網站上線前需要測試什么,網站上線前的工作
• 2020-11-11網站建設完成后應該怎么測試驗收
• 2020-11-09如何選擇瀏覽器兼容測試對象
• 2020-11-11新建網站怎么測試驗收
• 2020-11-09網站發布前測試需要注意哪些方面
• 2020-11-11微信小程序開發工具全新上線：新增測試系統、WXS腳本語言