02- web UI測試與UI Check List

UI英文是 user interface 。因此UI測試就是用戶界面測試。

 

Web UI測試

用戶界面測試：user interface testing，UI Testing指軟件中的可見外觀及其與用戶交互的部分。

包括

1.菜單

2.對話框

3.窗口

4.其餘控件

 

UI測試的目標

UI測試是測試用戶界面的庚哥是否知足客戶要求，文字是否正確，頁面是否美觀，文字，圖片組合是否完美，操做是否友好等。

UI測試的目標是確保用戶界面經過測試對象的工鞥呢爲用戶提綱相應訪問或瀏覽功能。確保用戶界面 符合公司或行業標磚。包括用戶友好性，人性化，易操做性。

 

WebUI總體頁面測試

總體界面是指整個web應用系統的頁面結構設計，是給用戶一個總體感，例如：

1.當用戶瀏覽web應用系統時是否感到溫馨，是否憑直覺就知道要找的信息在什麼地方？

2.整個web應用系統的設計風格是否一致。

3.對全部的可用性測試來講，都須要外部人員的參與，最好是最終用戶的參與。

 

web總體頁面測試點

1.調整頁面大小，檢驗頁面的佈局是否被壓縮，重疊，覆蓋等；

2.檢查須要滾動條的頁面是否提供的滾動條，並可有效滑動。

3.頁面被內容拉長，拉寬後，檢查頁面的文字是否還能正確顯示，對齊方式，格式都保持一致，正常；

4.對外文和繁體的顯示，須要支持，不容許出現亂碼；

5.頁面中的tab鍵能夠正常切換，支持tab按鍵切換的要檢驗是否的正確。

6.多個tab頁面間的數據交換更新要檢驗正確性；

7.頁面推薦的內容要保證有結果，能夠正常使用。

 

Web UI導航

導航：引用用戶在web頁面內操做的方式。

導航類型：

1.超連接

2.菜單

3.按鈕

4.對話框

5.列表

6.窗口

 

web導航測試點

1.web應用系統是否易於導航，導航是否直觀？

2.web系統的主要部分是否能夠經過主頁進行訪問、

3.web應用系統導航是否準確。

4.web應用系統的頁面結構，導航，菜單，鏈接的風格是否一致。

 

web UI導航測試點

1.對廣告圖片的點擊是否正常，點擊後給出的頁面是否正確；

2.檢查頁面連接是否正常點擊，點擊後連接到的位置是否正確；

3.連接點擊後是否長長的發生顏色變化（若特殊處理也須要相應的檢查）；

4.連接打開的方式是否合理（在當前窗口打開，打開新窗口），是否符合產品設計；

 

 

web UI圖片

在web應用系統中，適當的圖片和動畫技能起到廣告宣傳的做用，又能起到美化頁面的功能。

一個web應用系統的圖形能夠包括圖片，動畫，邊框，顏色，字體，背景，按鈕等。

 

web UI 圖片測試點：

1.要確保圖形有明確的用途

2.web應用系統的圖片尺寸要儘可能的小，而且能清楚地說明某件事情，通常都鏈接到某個具體的頁面。

3.驗證全部頁面字體的風格是否一致；

4.背景顏色應該與字體顏色和前景顏色相搭配；

5.檢查圖片的尺寸，位置是否符合需求；

6.對廣告圖片的點擊是否正常，點擊後給出的頁面是否正確；

7.頁面上具備相贊成義的圖標應該保持一致；

8.對於連接其餘網站的圖片，沒法顯示時是否有容錯性處理。

 

web UI內容測試

內容測試用來檢驗web應用系統提供信息的正確性，準確性和相關性，例如：

1.在商品加個列表中，錯誤的加個可能引發財政問題甚至致使法律糾紛。

2.信息的準確性是指是否有語法錯誤或拼寫錯誤。

2.信息的相關性是指是否在當前頁面能夠找到與當前瀏覽信息相關的信息列表或入口，也就是通常web測試點中的所謂「相關文章列表」

 

 

webUI靜態文字測試

1.內檢查一個頁面或者一組中多個頁面的字體，size，顏色，位置等因素是否符合需求；

2.檢查頁面文字圖標的間距，行距是否統一，對齊方式是否統一；

3.靜態文字的含義是否符合需求；

4.靜態文字中是否存在拼寫錯誤；

 

web UI測試典型錯誤小結

文字或圖片重疊，剪裁，沒對齊。

重複菜單或鏈接

提示信息錯誤，tooltip不顯示。

js錯誤問題

頁面鏈接錯誤

頁面訪問資源不可用

出現‘404頁面錯誤’

按鈕不工做，功能沒有實現

錯誤信息提示不合理

文檔沒法下載

 

web客戶端平臺相關性測試

1.最多見的Windows Unix macintosh linux等

2.web應用系統的最終用戶究竟使用哪種操做系統，取決於用戶系統的配置，可能會發生兼容性問題。

同一個應用可能在某些操做系統下能正常運行，但在另外一個操做系統下可能會運行失敗

在web系統發佈以前，須要在各類操做系統下對web系統進行兼容性測試。

 

一般會UI測試不須要單個寫測試用例，能夠編寫一個測試點，或者checklist，以下：

UI Check List

一、若是頁面內容超過一個頁面能夠顯示的量，檢查是否有滾動條操做二、改變瀏覽器頁面大小，移動瀏覽器，看控件展現是否錯位三、動態顯示的頁面，頁面最小化或者將其置於後臺，再將其打開，檢查動態顯示部分是否正常運行，是否有瀏覽器卡死現象四、按tab鍵，看是否能跟蹤到頁面的每一個控件五、檢查是否相關的下拉框，工具條，滾動條是否運行正常六、當有多個tab頁面或者多個狀態流程時，當前操做的狀態或者流程的圖標是否適當加亮七、受限制的按鈕或者tab頁是否有仍是正常明亮色？有無變暗？好比，已經有四個子帳號，「添加子帳號」按鈕是否變暗，不能再次操做等八、更新，添加或者刪除一個內容時，相關顯示的內容是否同時更新九、當前頁面的聲音，不一樣內容的字體顏色和大小，和窗口的操做是否符合規範（好比：錯誤提示的顏色，字體大小是否一致，正確操做提示信息的顏色是否一致等）十、檢查錯誤提示信息是否與對應的字段關聯十一、檢查每一個頁面的title， 是否所有顯示，顯示的內容是否符合當時的業務邏輯十二、檢查頁面的風格是否知足客戶的設計要求，文字和圖片組合是否正確，操做是否友好1三、當前頁面是否能順利正確地關閉1四、菜單功能的名字是否具備字解釋性1五、是否有無用的按鈕或者功能？1六、檢查全部的超連接，連接和連接內容是否正確， 該有連接的地方是否有連接1七、在不能輸入非數字的字段中，經過中文輸入其餘字符1八、檢查加密字段，可否經過複製按鈕，將加密內容複製出來1九、頁面中的每一個字段或者功能，該有描述或者功能解釋，字段解釋的地方是否都有20、項目中，同一個字段的術語，在全部頁面中是否一致2一、在上傳圖片的功能中，選擇路徑之後，檢查路徑字段的路徑是否與選擇的路徑一致2二、檢查有字符限制的地段，是否能夠輸入限制意外的字符2三、檢查須要在同一個窗口跳轉的頁面，是否在另外一個tab窗口打開；一樣的，須要在新的tab窗口打開的是否覆蓋了現有的窗口2四、打開一個新的連接或者新的頁面時，檢查瀏覽器中的連接是否合理，是否有泄漏用戶資料的參數2五、本地化測試中，是否顯示有其餘國家的語言2六、本地化測試中，檢查電話號碼，身份證件號碼，郵編，全名，貨幣符號，標點符號，貨運，稅費等是否符合國人標準2七、本地化測試中，英文翻譯成中文的是不是直譯的，是否符合本地化環境和業務術語的標準