3類網(wǎng)站測(cè)試的套路:UI測(cè)試、功能測(cè)試和兼容性測(cè)試

11 評(píng)論 19130 瀏覽 145 收藏 11 分鐘

關(guān)于網(wǎng)站測(cè)試的幾個(gè)小套路,希望對(duì)大家有所幫助。

一、 UI測(cè)試

用戶界面測(cè)試主要是拿待測(cè)網(wǎng)頁(yè)和設(shè)計(jì)稿進(jìn)行對(duì)比,個(gè)人覺(jué)得主要需做到以下4點(diǎn):

1.注重細(xì)節(jié):

這點(diǎn)最基本,就是對(duì)比時(shí)細(xì)心、細(xì)心再細(xì)心。像我現(xiàn)在被虐到網(wǎng)頁(yè)上元素和設(shè)計(jì)稿差一個(gè)像素都能看出來(lái)…

2.勿忘整體性:

由于PC網(wǎng)頁(yè)頁(yè)面空間大,模塊多,很容易在測(cè)試時(shí)只注意到模塊內(nèi)設(shè)計(jì)元素是否正確,而忽略了模塊間的間距或整個(gè)頁(yè)面的布局是否正確。所以最好按照由局部到整體的順序測(cè)試。

3.注意頁(yè)面間相互對(duì)比:

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

QQ空間日志-我的日志

QQ空間日志-我的日志

wps73C2.tmp

QQ空間日志-私密日志

一般情況下這些不一致問(wèn)題出現(xiàn)的情況不多,畢竟相類似的布局前端同學(xué)應(yīng)該會(huì)用相同的盒子,但是測(cè)試時(shí)還是需要留意。

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

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

例如:文章標(biāo)題最多可顯示50字符(25漢字),測(cè)試時(shí)就要在所有會(huì)出現(xiàn)標(biāo)題的位置(文章列表頁(yè)、推薦邊欄、轉(zhuǎn)發(fā)彈框…)是否能正常顯示含有50字符的標(biāo)題,會(huì)不會(huì)出現(xiàn)破框而出、自動(dòng)切掉等情況。

由于UI測(cè)試時(shí)需要檢查的細(xì)節(jié)很多,特別是像我們團(tuán)隊(duì),網(wǎng)站還在搭建中并未上線,UI測(cè)試的工作量更是大,測(cè)久了難免會(huì)覺(jué)得枯燥繁瑣,但其實(shí)每項(xiàng)任務(wù)都能總結(jié)出套路、有所收獲,故下面僅列出我平時(shí)在測(cè)這部分時(shí)的主要注意點(diǎn)和心得。

UI測(cè)試注意點(diǎn)總結(jié):

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

小體會(huì):

其實(shí)界面測(cè)試雖然沒(méi)啥技術(shù)含量,但測(cè)久了就會(huì)發(fā)現(xiàn)自己對(duì)網(wǎng)頁(yè)元素有時(shí)彼此間的間距差了1、2個(gè)像素,整體的視覺(jué)效果就尺寸和布局的敏感度有提升,例如像同樣一組元素,會(huì)大有不同,web是這樣,移動(dòng)端更是如此。

隨手畫(huà)張圖舉個(gè)栗子:左圖網(wǎng)頁(yè)做出來(lái)名稱、作者、互動(dòng)統(tǒng)計(jì)三者之間行距相等,中文字大小相 同,而設(shè)計(jì)稿原本應(yīng)如右圖,行距不同,不同字段的字號(hào)也不同。所以假如測(cè)試時(shí)遇到類似這種問(wèn)題,我們除了可以提個(gè)bug,還會(huì)被引導(dǎo)去思考設(shè)計(jì)初衷,即利用間距細(xì)微差異進(jìn)行視覺(jué)分組,利用字號(hào)細(xì)微差異突出主次。

wps73E2.tmp

二、功能測(cè)試

1.操作反應(yīng):

(1) 頁(yè)面元素(按鈕、錨文本、輸入框…)自身狀態(tài)變化:鼠標(biāo)移入/移出時(shí)效果、點(diǎn)擊后效果、獲取/失去焦點(diǎn)時(shí)效果…(可以想想axure里的用例狀態(tài))

eg:鼠標(biāo)移入按鈕,按鈕是底色是否應(yīng)改變;若輸入框內(nèi)有默認(rèn)提示文字,則是當(dāng)輸入框獲得焦點(diǎn)后文字就消失,還是用戶輸入文字后提示文字才消失…

(2)操作成功后續(xù)反應(yīng):頁(yè)面跳轉(zhuǎn)、彈框、提示文字…

a.頁(yè)面跳轉(zhuǎn):

  • 頁(yè)面切換方式:另開(kāi)頁(yè)面、本頁(yè)切換
  • 頁(yè)面起始定位:頁(yè)面起始位置、頁(yè)面其他錨點(diǎn)(例如用戶想評(píng)論某文章,在列表頁(yè)點(diǎn)評(píng)論按鈕后,就會(huì)在另開(kāi)的文章內(nèi)容頁(yè)直接定位到評(píng)論區(qū))

b.彈框:

  • 匹配情況:彈出的彈框是否和觸發(fā)條件匹配
  • 出現(xiàn)位置:一般情況下要一致。因?yàn)閺椏蚴褂貌煌寮?,可能?dǎo)致彈出位置不同。
  • 顯示時(shí)間(非操作類彈框):某些僅起到提示功能的彈框會(huì)自動(dòng)顯示若干秒關(guān)閉。一般情況此類彈框上文案較少,顯示秒數(shù)應(yīng)該是全站一致的。

c.提示文字:

匹配情況:出現(xiàn)的提示文案是否和觸發(fā)條件匹配

關(guān)于操作成功后續(xù)反應(yīng),以上主要是在已確定會(huì)觸發(fā)某反應(yīng)情況下,測(cè)試其正確性。其實(shí)這里更重要的是要考慮在前置條件不同的情況下,對(duì)某元素進(jìn)行相同操作,會(huì)觸發(fā)什么不同的反應(yīng)。即需要對(duì)各類情況進(jìn)行窮舉。

eg:點(diǎn)擊關(guān)注按鈕觸發(fā)反應(yīng)窮舉:

a.未登錄用戶點(diǎn)擊該按鈕后效果;

b.已登錄用戶點(diǎn)擊該按鈕后效果(b1.未關(guān)注過(guò)對(duì)方、b2.已關(guān)注過(guò)對(duì)方、b3.自己關(guān)注自己)

窮舉時(shí)可以參考PRD,但不要局限于PRD上列出的情況,畢竟有時(shí)也許PRD上會(huì)有小疏漏,要是程序員做的時(shí)候發(fā)現(xiàn)疏漏,就自己隨手碼了一個(gè)簡(jiǎn)易提示而忘記通知產(chǎn)品,而測(cè)試的時(shí)候也沒(méi)觸發(fā)到,等用戶實(shí)際操作出來(lái)就會(huì)造成不佳的用戶體驗(yàn)。

2.數(shù)據(jù):

(1)數(shù)據(jù)狀態(tài):此處指數(shù)據(jù)值自身的狀態(tài)。即前置條件滿足后,數(shù)據(jù)狀態(tài)是否會(huì)按照規(guī)則更新。
這里的規(guī)則一般是

a.時(shí)間規(guī)則(eg:經(jīng)過(guò)多長(zhǎng)時(shí)間數(shù)據(jù)狀態(tài)改變;在哪個(gè)時(shí)間點(diǎn)更新…);

b.統(tǒng)計(jì)規(guī)則(eg:每個(gè)ID多次完成前置操作,數(shù)據(jù)更新多次;每個(gè)ID多次完成前置操作,數(shù)據(jù)僅更新一次;每個(gè)ID…)

(2)數(shù)據(jù)排序:數(shù)據(jù)在某篩選條件下排序的正確性。

eg:某寶某店鋪商品展示頁(yè)面,當(dāng)用戶選擇按銷量由高到低排序時(shí),列表是否變?yōu)榘翠N售量多到寡進(jìn)行排序;當(dāng)商品A的銷量超過(guò)商品B的時(shí)候,商品A的位置是否會(huì)更換到商品B的前面。

3.特殊情況 :

(1)缺省情況:當(dāng)某頁(yè)面或模塊還沒(méi)有內(nèi)容或尚未加載出來(lái)時(shí),是否有相關(guān)提示畫(huà)面、文案。

(2)操作中斷:用戶操作中途退出頁(yè)面(eg:填寫(xiě)資料并尚未保存時(shí)關(guān)閉頁(yè)面);操作中途斷網(wǎng)…這些情況下是否設(shè)置了相關(guān)提醒彈框。

三、兼容性測(cè)試

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

四、怎樣測(cè)試才能少被開(kāi)發(fā)懟?

1、用例盡量輔助截圖:

由于我們公司還沒(méi)有bug管理工具,測(cè)試反饋都是用excel撰寫(xiě)的,因此我非常能理解程序員葛葛們看著密密麻麻的文檔時(shí),心里一萬(wàn)只羊駝呼嘯而過(guò)的心情。而輔助頁(yè)面截圖,一方面表達(dá)更清楚,減少文字描述;另一方面,某些偶發(fā)bug留下“事故現(xiàn)場(chǎng)”的證據(jù)很有必要。

2、用詞準(zhǔn)確到位:

這點(diǎn)我的體會(huì)是,如果公司負(fù)責(zé)測(cè)試的同學(xué)不是技術(shù)出身,無(wú)法完全用專業(yè)術(shù)語(yǔ),也要盡量把bug和正確結(jié)果描述的清楚到位,否則反而會(huì)增加溝通成本。當(dāng)然,如果測(cè)試也懂技術(shù),那么世界將變成美好的人間~

3、前端、后端、設(shè)計(jì)問(wèn)題在文檔中區(qū)分開(kāi):

這個(gè)不多說(shuō)了,就是為了避免導(dǎo)致三個(gè)和尚沒(méi)水吃的下場(chǎng)…

4、某些問(wèn)題采取靈活的解決方式:

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

以上是對(duì)近期測(cè)試工作的小總結(jié),主要列出的是自己經(jīng)常踩的坑。由于經(jīng)驗(yàn)尚淺,肯定有許多方面寫(xiě)的不夠到位,請(qǐng)大家多多指教,我會(huì)虛心學(xué)習(xí)噠~

 

本文由 @晴SAMA 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很詳細(xì),感謝分享

    回復(fù)
  2. 兼職測(cè)試兼職產(chǎn)品的商務(wù)人員來(lái)此取經(jīng),十分感謝老鳥(niǎo)的分享~~~

    來(lái)自北京 回復(fù)
    1. 你的頭像會(huì)動(dòng)!

      來(lái)自山東 回復(fù)
  3. 我是產(chǎn)品新人,寫(xiě)的很受用 ??

    來(lái)自菲律賓 回復(fù)
  4. 技術(shù)轉(zhuǎn)型產(chǎn)品中 ??

    來(lái)自河北 回復(fù)
    1. 好棒!一起加油 ??

      來(lái)自上海 回復(fù)
    2. 測(cè)試轉(zhuǎn)產(chǎn)品難嗎?我是從英語(yǔ)教研剛轉(zhuǎn)測(cè)試,想了解一下測(cè)試專員之后的職業(yè)發(fā)展方向有哪些?

      來(lái)自美國(guó) 回復(fù)
  5. 我是測(cè)試轉(zhuǎn)過(guò)來(lái)的產(chǎn)品經(jīng)理,哈哈

    來(lái)自四川 回復(fù)
    1. 哈哈我是三無(wú)產(chǎn)品新人,請(qǐng)測(cè)試+產(chǎn)品老司機(jī)多多指教~ ??

      來(lái)自上海 回復(fù)
  6. ??

    來(lái)自上海 回復(fù)
    1. (*^__^*)

      來(lái)自上海 回復(fù)