Web測(cè)試中的UI測(cè)試詳解：容易忽略的14個(gè)測(cè)試點(diǎn)匯總

有軟件的地方就有界面，就會(huì)有界面測(cè)試。界面測(cè)試是軟件測(cè)試中，最多，最繁瑣，最簡(jiǎn)單的測(cè)試。尤其在本地化測(cè)試(多國(guó)語(yǔ)言測(cè)試)中，有很多的界面測(cè)試。

用戶界面測(cè)試簡(jiǎn)稱UI測(cè)試，測(cè)試用戶界面的功能模塊的布局是否合理，整體風(fēng)格是否一致和各個(gè)控件的放置位置是否符合客戶使用習(xí)慣，更重要的是要符合操作便捷，導(dǎo)航簡(jiǎn)單易懂，界面中文字是否正確，命名是否統(tǒng)一，頁(yè)面是否美觀，文字、圖片組合是否完美等等。

UI測(cè)試的目的：

1、確保用戶界面會(huì)通過(guò)測(cè)試對(duì)象的功能來(lái)為用戶提供相應(yīng)的訪問(wèn)或?yàn)g覽功能

2、確保用戶界面符合公司或行業(yè)的標(biāo)準(zhǔn)

3、通過(guò)用戶界面 (UI) 測(cè)試來(lái)核實(shí)用戶與軟件的交互

4、UI 測(cè)試的目標(biāo)在于確保用戶界面向用戶提供了適當(dāng)?shù)脑L問(wèn)和瀏覽測(cè)試對(duì)象功能的操作

5、除此之外，UI 測(cè)試還要確保 UI 功能內(nèi)部的對(duì)象符合預(yù)期要求，并遵循公司或行業(yè)的標(biāo)準(zhǔn)

一般情況下我們進(jìn)行界面測(cè)試，直接依據(jù)產(chǎn)品原型圖以及UI切圖/效果圖，進(jìn)行對(duì)比驗(yàn)證，確認(rèn)是否一致。 但是如果碰到公司沒(méi)有原型圖，沒(méi)有UI效果圖怎么破？ 畢竟同是天涯淪落人的情況太多了~~

那么我們可以參考市場(chǎng)上同類型的成熟產(chǎn)品來(lái)做界面比對(duì)，且考慮以下幾個(gè)方面：

1、導(dǎo)航測(cè)試

2、圖形測(cè)試

3、內(nèi)容測(cè)試

4、表格測(cè)試

5、整體界面測(cè)試

接著我分享的就是界面測(cè)試中我們?nèi)菀缀雎曰蛘呤切枰覀冏⒁獾臏y(cè)試點(diǎn)：

1、檢查整個(gè)系統(tǒng)的界面是否和效果圖一致（對(duì)照設(shè)計(jì)出來(lái)的效果圖）；

2、并且檢查整個(gè)系統(tǒng)所有界面的界面風(fēng)格和設(shè)計(jì)是否一致；

3、檢查界面是否存在錯(cuò)別字或者是不合適的字；

4、檢查界面上的所有的按鈕的樣式是否一致，是否正確；

5、檢查界面操作是否友好，用戶交互是否親善；

6、檢查界面所有的按鈕、下拉框或者是導(dǎo)航箭頭是否有反應(yīng)，且是正確的反應(yīng)；

7、檢查系統(tǒng)上的鏈接是否有正確的鏈接地址，且能正確跳轉(zhuǎn)；

8、檢查系統(tǒng)中是否存在無(wú)用的鏈接，即不需要做成鏈接的地方做成了鏈接，并且點(diǎn)擊不能正常跳轉(zhuǎn)或是跳轉(zhuǎn)錯(cuò)誤；

9、檢查界面中所有的輸入框是否都做了檢驗(yàn)，比如輸入框的最大限制字符，超過(guò)輸入框的最大限度，系統(tǒng)是否會(huì)做處理，而不是報(bào)錯(cuò)或者是出現(xiàn)其他錯(cuò)誤；

10、檢查界面中的標(biāo)題或者是內(nèi)容輸入過(guò)多時(shí)，是否會(huì)進(jìn)行換行或者是隱藏處理，而不是出現(xiàn)界面錯(cuò)位等現(xiàn)象；

11、檢查系統(tǒng)在不同瀏覽器的兼容性問(wèn)題，檢查頁(yè)面在不同瀏覽器下是否會(huì)發(fā)生異常，當(dāng)用戶調(diào)整瀏覽器窗口大小時(shí)，是否會(huì)出現(xiàn)界面不兼容的情況；

12、檢查界面中使用的字體風(fēng)格和大小是否一致，格式是否統(tǒng)一準(zhǔn)確；

13、檢查所有的字段后面是否有需要的冒號(hào)，查看是否冒號(hào)為統(tǒng)一的中文冒號(hào)還是英文冒號(hào)，即中英文符號(hào)是否統(tǒng)一；

14、檢查界面中的圖片是否顯示正確，是否被裁減，是否被拉伸變形，是否顯示完全；

測(cè)試方法：

1、靜態(tài)測(cè)試：對(duì)于用戶界面的布局，風(fēng)格，字體，圖片等與顯示相關(guān)的部分測(cè)試應(yīng)該采用靜態(tài)測(cè)試，比如點(diǎn)檢表測(cè)試，即將測(cè)試必須通過(guò)的項(xiàng)用點(diǎn)檢表一條一條列舉出，然后通過(guò)觀察確保每項(xiàng)是否通過(guò)。

2、動(dòng)態(tài)測(cè)試：對(duì)用戶界面中各個(gè)類別的控件應(yīng)該采用動(dòng)態(tài)測(cè)試，即編寫測(cè)試用例或者點(diǎn)檢表，對(duì)每個(gè)按鈕的響應(yīng)情況進(jìn)行測(cè)試，是否符合概要設(shè)計(jì)所規(guī)定的條件，還可以對(duì)用戶界面在不同環(huán)境下的顯示情況進(jìn)行測(cè)試。

界面測(cè)試用例的設(shè)計(jì)方法

1、窗體
測(cè)試窗體的方法：
a、窗體大小，大小要合適，控件布局合理;
b、移動(dòng)窗體。快速或慢速移動(dòng)窗體，背景及窗體本身刷新必須正確;
c、縮放窗體，窗體上的控件應(yīng)隨窗體的大小變化而變化;
d、顯示分辨率。必須在不同的分辨率的情況下測(cè)試程序的顯示是否正常。
進(jìn)行測(cè)試時(shí)還要注意狀態(tài)欄是否顯示正確，工具欄的圖標(biāo)執(zhí)行操作是否有效，是否與菜單懶中圖標(biāo)顯示一致;錯(cuò)誤信息內(nèi)容是否正確、無(wú)錯(cuò)別字且明確等等。
2、控件
測(cè)試方法：
a、窗體或控件的字體和大小要一致;
b、注意全角、半角混合;
c、無(wú)中英文混合。

3、菜單
進(jìn)行測(cè)試時(shí)要注意：
a、選擇菜單是否可以正常工作、并與實(shí)際執(zhí)行內(nèi)容一致;
b、是否有錯(cuò)別字;
c、快捷鍵是否重復(fù);
d、熱鍵是否重復(fù);
e、快捷鍵與熱鍵操作是否有效;
f、是否存在中英文混合;
g、菜單要與語(yǔ)境相關(guān)、如、不同權(quán)限的用戶登陸一個(gè)應(yīng)用程序、不同級(jí)別的用戶可以看到不同級(jí)別的菜單并使用不同級(jí)別的功能;
h、鼠標(biāo)右鍵快捷菜單。
4、 特殊屬性
a、安裝界面應(yīng)有公司介紹或產(chǎn)品介紹、有公司的圖標(biāo);
b、主界面及大多數(shù)界面最好有公司圖標(biāo);
c、選擇“幫助”->“關(guān)于”命令、應(yīng)看見(jiàn)相關(guān)版權(quán)和產(chǎn)品信息。

總結(jié)：

現(xiàn)在一般人都有使用瀏覽器瀏覽網(wǎng)頁(yè)的經(jīng)歷，用戶雖然不是專業(yè)人員但是對(duì)界面效果的印象是很重要的。如果你注重這方面的測(cè)試，那么驗(yàn)證應(yīng)用程序是否易于使用就非常重要了。

很多人認(rèn)為這是測(cè)試中最不重要的部分，但是恰恰相反界面對(duì)不懂技術(shù)的客戶來(lái)說(shuō)那相當(dāng)關(guān)鍵，慢慢體會(huì)你會(huì)明白的，界面測(cè)試應(yīng)當(dāng)引起重視！

歡迎加入  51軟件測(cè)試大家庭，在這里你將獲得【最新行業(yè)資訊】，【免費(fèi)測(cè)試工具安裝包】，【軟件測(cè)試技術(shù)干貨】，【面試求職技巧】... 51與你共同學(xué)習(xí)，一起成長(zhǎng)！期待你的加入： QQ     群：    755431660