3類網站測試的套路:UI測試、功能測試和兼容性測試
關于網站測試的幾個小套路,希望對大家有所幫助。
一、 UI測試
用戶界面測試主要是拿待測網頁和設計稿進行對比,個人覺得主要需做到以下4點:
1.注重細節:
這點最基本,就是對比時細心、細心再細心。像我現在被虐到網頁上元素和設計稿差一個像素都能看出來…
2.勿忘整體性:
由于PC網頁頁面空間大,模塊多,很容易在測試時只注意到模塊內設計元素是否正確,而忽略了模塊間的間距或整個頁面的布局是否正確。所以最好按照由局部到整體的順序測試。
3.注意頁面間相互對比:
即注意相同系列頁面、頁簽布局一致性。就是說的是同一系列頁面中同類元素和模塊的樣式、間距一般要相同;同一個tab下,不同選項對應 的頁簽中同類元素和模塊的樣式、間距一般要相同。例如下圖QQ空間-日志頁面里我的日志和私密日記tab中,紅框圈出的位置高度是否一致。
QQ空間日志-我的日志
QQ空間日志-私密日志
一般情況下這些不一致問題出現的情況不多,畢竟相類似的布局前端同學應該會用相同的盒子,但是測試時還是需要留意。
4.注意極端情況下顯示情況:
即要注意長度可變的元件、模塊或字段在極端情況下的顯示是否正常。
例如:文章標題最多可顯示50字符(25漢字),測試時就要在所有會出現標題的位置(文章列表頁、推薦邊欄、轉發彈框…)是否能正常顯示含有50字符的標題,會不會出現破框而出、自動切掉等情況。
由于UI測試時需要檢查的細節很多,特別是像我們團隊,網站還在搭建中并未上線,UI測試的工作量更是大,測久了難免會覺得枯燥繁瑣,但其實每項任務都能總結出套路、有所收獲,故下面僅列出我平時在測這部分時的主要注意點和心得。
UI測試注意點總結:
- 模塊間距
- 元素間距
- 不同類型文本(數字、漢字、英文)顏色、格式(全角、半角)大小、字體、(不必須)
- 固定文案:內容的可讀性、正確性?排版的合理性
- 可變字段:極多、極少文字的排版情況
- Icon用錯、用混
- 相似頁面的差異性和一致性
小體會:
其實界面測試雖然沒啥技術含量,但測久了就會發現自己對網頁元素有時彼此間的間距差了1、2個像素,整體的視覺效果就尺寸和布局的敏感度有提升,例如像同樣一組元素,會大有不同,web是這樣,移動端更是如此。
隨手畫張圖舉個栗子:左圖網頁做出來名稱、作者、互動統計三者之間行距相等,中文字大小相 同,而設計稿原本應如右圖,行距不同,不同字段的字號也不同。所以假如測試時遇到類似這種問題,我們除了可以提個bug,還會被引導去思考設計初衷,即利用間距細微差異進行視覺分組,利用字號細微差異突出主次。
二、功能測試
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 原創發布于人人都是產品經理。未經許可,禁止轉載。
很詳細,感謝分享
兼職測試兼職產品的商務人員來此取經,十分感謝老鳥的分享~~~
你的頭像會動!
我是產品新人,寫的很受用 ??
技術轉型產品中 ??
好棒!一起加油 ??
測試轉產品難嗎?我是從英語教研剛轉測試,想了解一下測試專員之后的職業發展方向有哪些?
我是測試轉過來的產品經理,哈哈
哈哈我是三無產品新人,請測試+產品老司機多多指教~ ??
??
(*^__^*)