3類網站測試的套路:UI測試、功能測試和兼容性測試

11 評論 18854 瀏覽 144 收藏 11 分鐘

關于網站測試的幾個小套路,希望對大家有所幫助。

一、 UI測試

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

1.注重細節:

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

2.勿忘整體性:

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

3.注意頁面間相互對比:

即注意相同系列頁面、頁簽布局一致性。就是說的是同一系列頁面中同類元素和模塊的樣式、間距一般要相同;同一個tab下,不同選項對應 的頁簽中同類元素和模塊的樣式、間距一般要相同。例如下圖QQ空間-日志頁面里我的日志和私密日記tab中,紅框圈出的位置高度是否一致。

QQ空間日志-我的日志

QQ空間日志-我的日志

wps73C2.tmp

QQ空間日志-私密日志

一般情況下這些不一致問題出現的情況不多,畢竟相類似的布局前端同學應該會用相同的盒子,但是測試時還是需要留意。

4.注意極端情況下顯示情況:

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

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

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

UI測試注意點總結:

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

小體會:

其實界面測試雖然沒啥技術含量,但測久了就會發現自己對網頁元素有時彼此間的間距差了1、2個像素,整體的視覺效果就尺寸和布局的敏感度有提升,例如像同樣一組元素,會大有不同,web是這樣,移動端更是如此。

隨手畫張圖舉個栗子:左圖網頁做出來名稱、作者、互動統計三者之間行距相等,中文字大小相 同,而設計稿原本應如右圖,行距不同,不同字段的字號也不同。所以假如測試時遇到類似這種問題,我們除了可以提個bug,還會被引導去思考設計初衷,即利用間距細微差異進行視覺分組,利用字號細微差異突出主次。

wps73E2.tmp

二、功能測試

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、谷歌、火狐等等主流瀏覽器)下的頁面顯示情況是否正常。

四、怎樣測試才能少被開發懟?

1、用例盡量輔助截圖:

由于我們公司還沒有bug管理工具,測試反饋都是用excel撰寫的,因此我非常能理解程序員葛葛們看著密密麻麻的文檔時,心里一萬只羊駝呼嘯而過的心情。而輔助頁面截圖,一方面表達更清楚,減少文字描述;另一方面,某些偶發bug留下“事故現場”的證據很有必要。

2、用詞準確到位:

這點我的體會是,如果公司負責測試的同學不是技術出身,無法完全用專業術語,也要盡量把bug和正確結果描述的清楚到位,否則反而會增加溝通成本。當然,如果測試也懂技術,那么世界將變成美好的人間~

3、前端、后端、設計問題在文檔中區分開:

這個不多說了,就是為了避免導致三個和尚沒水吃的下場…

4、某些問題采取靈活的解決方式:

測試時也會偶爾發現原有產品邏輯疏漏或錯誤、或者感覺某些功能有更好的實現方式。第一種情況時,不要慌了手腳忙著策劃新方案,而是先去和程序員葛葛們溝通、聽取建議,咨詢有什么方式可以在變動最小的情況下達到策劃的目的。第二種情況就相當于提新需求了,就算是情勢所迫或開發時間充裕,也盡量三思后行吧,要提可以迭代的時候提。如果測試的時候總提新需求,暫不提程序員的心理陰影面積,產品開發節奏可是會亂套。

以上是對近期測試工作的小總結,主要列出的是自己經常踩的坑。由于經驗尚淺,肯定有許多方面寫的不夠到位,請大家多多指教,我會虛心學習噠~

 

本文由 @晴SAMA 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很詳細,感謝分享

    回復
  2. 兼職測試兼職產品的商務人員來此取經,十分感謝老鳥的分享~~~

    來自北京 回復
    1. 你的頭像會動!

      來自山東 回復
  3. 我是產品新人,寫的很受用 ??

    來自菲律賓 回復
  4. 技術轉型產品中 ??

    來自河北 回復
    1. 好棒!一起加油 ??

      來自上海 回復
    2. 測試轉產品難嗎?我是從英語教研剛轉測試,想了解一下測試專員之后的職業發展方向有哪些?

      來自美國 回復
  5. 我是測試轉過來的產品經理,哈哈

    來自四川 回復
    1. 哈哈我是三無產品新人,請測試+產品老司機多多指教~ ??

      來自上海 回復
  6. ??

    來自上海 回復
    1. (*^__^*)

      來自上海 回復