WEB測試---UI 測試要點

UI 測試要點

使用者界面一般是由窗體及其内部控件組成。 是以， 界面測試主要從窗體及窗體中的控件兩方面來考慮。

一個窗體一般由标題欄、 菜單欄、 工具欄、 狀态欄及内部控件組成， 是以為主要測試目标

• 1、 窗體的測試

(1) 窗體的大小

窗體的大小要合适， 使内部控件布局合理， 不過于密集， 也不過于空曠。

(2) 窗體的位置。

對于主窗體， 顯示屏正中， 對于子窗體， 一般應在父窗體顯示區的中間。

(3) 移動窗體

快速或慢速移動窗體， 背景及窗體本身重新整理必須正确。

(4) 縮放窗體

① 滑鼠拖動

對于固定大小的窗體， 滑鼠拖動不能縮放其大小。

對于能用滑鼠拖動縮放大小的窗體， 放大或縮小窗體後其内容也應做相應調整。

② 單擊‘最大化’ 按鈕。 窗體被最大化， 内部控件大小或位置也應做相應調整。

③ 單擊‘還原’ 按鈕。 應還原到窗體最初預設的大小。

④ 單擊‘最小化’ 按鈕。 對于主窗體， 應最小化到系統狀态欄的左下角， 并依次排列； 對于窗體中的子窗

體， 應最小化到父窗體容器的左下角， 并依次排列。

(5) 顯示分辨率。

通常情況下， 計算機的顯示分辨率包括 800×600、 1024×768、 1280×1024 等等。

【注意】 由于程式員在程式設計時， 可能使用了固定的控件大小和位置， 不能随分辨率的改變而變化， 是以， 在分

辨率為 1024×768 下開發的程式在分辨率為 800×600 時， 會出現顯示内容被裁切的情況。

(6) 寬屏和普屏。

寬屏和普屏的顯示器， 界面顯示效果可能不一樣。

• 2、 标題欄的測試

(1) 不同窗體的圖示要易于分辨

① 父窗體的标題圖示；

② 子窗體的标題圖示；

③ 提示資訊窗體的标題圖示；

④ 警告資訊窗體的标題圖示；

⑤ 錯誤資訊窗體的标題圖示；

(2) 标題内容

①标題的内容要簡明扼要， 且不能有錯别字。

② 父窗體的标題内容；

③ 子窗體的标題内容；

④ 提示資訊窗體的标題内容；

⑤ 警告資訊窗體的标題内容；

⑥ 錯誤資訊窗體的标題内容；

• 3、 菜單欄的測試

1） 菜單深度最好不超過 3 層；

2） 菜單通常使用 5 号字型。3） 菜單前的圖示不宜太大， 與字高保持一緻最好。

4） 各項菜單是否能完成相應功能？

5） 各菜單與其完成的功能是否一緻？

6） 有無錯别字？

7） 有無中英文混合？

8） 快捷鍵或熱鍵

① 是否有效？

② 是否重複？

9） 滑鼠右鍵菜單；

10） 不可用菜單是否真的不可用？ （這在不同權限下會出現。 ）

• 4、 工具欄的測試

1） 工具欄中通常使用 5 号字型， 工具欄一般比菜單欄略寬。

2） 相近功能的工具欄放在一起。

3） 工具欄的按鈕要有即時提示資訊， 圖示要能直覺的表達要完成的操作。

4） 一條工具欄的長度最長不能超過螢幕寬度。

5） 系統常用的工具欄設定預設放置位置。

6） 工具欄太多時可以考慮使用工具箱， 由使用者根據自己的需求定制。

• 5、 狀态欄的測試

1） 顯示使用者切實需要的資訊

① 目前的操作

② 系統的狀态

③ 目前位置

④ 時間

⑤ 使用者資訊

⑥ 提示資訊

⑦ 錯誤資訊

⑧ 如果某一操作需要的時間比較長， 還應該顯示進度條和程序提示。

2） 狀态條的高度以放置 5 号字為宜。

• 6、 控件的測試

（1） 控件自身的測試

1 控件本身的大小

2 控件本身的位置

3 控件字型

4 字型的大小、 半角、 全角

5 錯别字、 中英混合

• 7、 文本框

1 作用： 接受使用者輸入的資料或顯示資料。

2 狀态： 可編輯（正在編輯、 未編輯） 、 不可編輯。

3 測試點：

7.1 根據文本框作用：

輸入資料的内容

（如輸入空格或與已存在内容相沖突的資料等）輸入資料的長度

（如隻能輸入 8 位， 分别輸入 7、 8、 9 位資料進行測試）

輸入資料的類型

（如隻能輸入數字， 分别輸入漢字、 字母、 特殊符号等）

輸入資料的格式

（如‘yyyy/mm/dd’ ）

7.2 顯示資料

● 顯示内容是否正确？

● 内容太長， 文本框不能完全顯示時， 是否有未完全顯

示的提示？ 如加‘…’

● 顯示内容格式是否正确？

7.3 根據文本框狀态

可編輯文本框與不可編輯文本框是否易于區分？ （一般将不可編輯文本框置灰）

光标選中的可編輯文本框是否有明顯顯示？ （如文本框底色由白色變為藍色）

【注意】 對于在文本框中輸入的錯誤資料， 程式一般有以下 3 種處理方式：

● 不允許輸入， 沒有任何提示。

● 輸入後立即給出提示要求重新輸入。

● 單擊窗體中的‘确定’ 或‘儲存’ 或‘送出’ 按鈕以後， 程式再檢驗資料的正确性， 不正确就給出提示

要求重新輸入。 在設計文檔中沒有特别注明需采用哪種處理方式時， 無論哪種方式， 隻要能正确驗證資料就

可以。

4 舉例說明： 略

• 8、 Up-down 控件文本框

1 作用： 通過控件的上下箭頭， 選擇不同的值。

2 狀态： 可用、 不可用。

3 測試點：

3.1 直接輸入或上下箭頭選擇；

3.2 邊界值

3.3 預設值

3.4 輸入非法資料

3.5 若該控件不可用， 是否有辨別？ 且是否真的不可用？

4 舉例說明： 略

• 9、 組合清單框（下拉清單框）

1 作用： 下拉清單中顯示一組資料， 選中某一條資料， 該資料就傳回到框中。

2 狀态： 可用、 不可用。

3 測試點：

3.1 條目内容是否正确？ （根據需求說明書确定其内容）

3.2 條目功能是否實作？ （有些程式要求在獲得條目内容的同時， 獲得該條目對應的編号， 但是編号在窗

體上不顯示， 此時就要在資料庫中檢視結果是否正确？ ）

3.3 是否能輸入資料？ （一般程式不允許輸入資料。 ）

3.4 若該控件不可用， 是否有辨別？ 且是否真的不可用？

4 舉例說明： 略

• 10、 清單框

1 作用： 清單框中顯示一組資料， 選中某一條/或某幾條資料， 程

序進行某種處理。2 狀态： 可用、 不可用。

3 測試點：

3.1 條目内容是否正确？ （根據需求說明書确定其内容）

3.2 條目功能是否實作？

3.3 滾動條是否可以滾動？ （針對清單框内容較多時）

3.4 條目内容寬度超過清單框的寬度時， 滑鼠指針位于該條目

時是否可以完整顯示？

3.5 是否允許多選？ （若允許， 要分别檢查按 Shift 選中、 按

Ctrl 選中條目和直接用滑鼠選中多項條目時的情況。 ）

3.6 若該控件不可用， 是否有辨別？ 且是否真的不可用？

4 舉例說明： 略

• 11、 指令按鈕

1 作用： 實作規定的功能。

2 狀态： 可用、 不可用。

3 測試點：

3.1 可操作按鈕功能是否實作？

3.2 對可能造成資料無法恢複的操作是否提供确認資訊？ （如

删除等操作）

3.3 對不符合業務要求的輸入資料是否有相應的處理方法？

3.4 對非法的輸入或操作是否給出足夠的提示說明， 讓使用者明白錯誤出處？

3.5 若該按鈕不可用， 是否有辨別？ 且是否真的不可用？

4 舉例說明： 略

• 12、 單選按鈕（單選框）

1 作用： 同一組中隻能選擇一個。

2 狀态： 可選（被選中、 不被選中） 、 不可選。

3 測試點：

3.1 同一組中， 是否隻能選中一個？

3.2 各項功能是否能正确完成？

3.3 是否有預設被選中的選項？

3.4 可選和不可選項是否易于區分？ （一般将不可選項置灰）

3.5 不可選項是否限制不能被選中？

4 舉例說明：

如性别組的單選按鈕， 可選項包括： 男、 女、 未說明， 預設為男。

• 13、 複選框

1 作用： 可同時選中多項。

2 狀态： 可選（選中、 未被選中） 、 不可選。

3 測試點：

3.1 是否可以同時全部選中？

3.2 是否可以同時部分選中？

3.3 是否可以都不選中？

3.4 各種選中情況下功能的實作？

3.5 是否有預設被選中的選項？

3.6 可選和不可選項是否易于區分？ （一般将不可選項置灰）

3.7 不可選項是否限制不能被選中？

4 舉例說明： 略。

• 14、 滾動條

1 作用： 在較多内容情況下， 可以通過拖動顯示内容。2 測試點：

2.1 是否能被拖動？

2.2 拖動滾動條時， 螢幕的重新整理情況？ （是否能及時重新整理？ 是

否有亂碼？ ）

2.3 拖動滾動條時， 資訊的顯示情況？

2.4 滾動條的上下按鈕是否可用？

2.5 滾動條的大小是否會根據顯示資訊的長、 寬度及時變換？

2.6 滾動條的位置是否能根據選中内容的位置及時移動？

2.7 是否能用滑鼠滾輪控制滾動條？

3 舉例說明： 略

• 15、 各種控件混合使用時的測試

1 控件間的互相作用。

2 Tab 鍵的順序。 （一般是從上到下， 從左到右。 ）

3 熱鍵的使用。

4 Enter 鍵和 ESC 鍵的使用。

5 控件組合後功能的實作。

【注意】 測試過程中， 應遵循由簡到繁的原則， 先進行單個控件功能的測試，

確定實作無誤後， 再進行多個控件的功能組合的測試。