web端頁面測試，最常見的是基本控件的測試，只有了解常見的控件和其測試方法，才能掌握測試要點，避免漏測情況發生。根據日常工作總結，將控件和常見邏輯集合在一起，總結了幾個控件類測試查場景如下。
導航條
導航描述了用戶在一個頁面內操作的方式，在不同的用戶接口控制之間，例如按鈕、對話框、列表和窗口等；或在不同的連接頁面之間。導航測試經?？紤]如下幾點。
· 導航是否直觀，簡單明了，直接反應系統的主要功能。
· 導航的風格與其他菜單，展示等風格是否一致
· 導航的鏈接跳轉是否正確
· 導航條tab間的來回跳轉，是否正確。
· 鏈接如果帶參數，跳轉到不同頁面，傳遞的參數是否正確
· 導航條之外的公共內容，在導航條不同tab內的展示應該保持一致，且功能正確性檢查。
· 不同的導航條達到同樣的目的，檢查不同導航條跳轉過來時內容是否一致。
· 導航條各級之間有上下級關系時，進入下級頁面，再返回，是否能正常返回上級頁面。
導航條常見和URL跳轉檢查一起組成一定的功能。除了考慮導航條基本的功能外，還需要檢查：
· 各個導航之間的相互影響，如果兩個導航連接使用的js模塊不一致，涉及到頁面加載，頁面展示等的檢查。
· 導航條與其他控件組合在一起時，在不同的頁面上，看到的導航條是否一致等檢查。
輸入框
輸入框分為文本輸入框，數字輸入框。一般使用在填寫輸入的內容上，比如名稱，屬性等，有新建和編輯類兩種。在檢查的時候需要關注一些輸入框的特性：
· 輸入的字符長度是否符合要求，輸入最小長度，最小長度-1，最大長度，最大長度+1，以及超長的字符檢查是否符合預期
· 輸入特殊字符，特別是&、單引號’、空格檢查是否能保存。
· 輸入內容前后帶空格的，能否自動過濾處理。
· 不輸入內容，保存，是否有錯誤提醒
· 輸入注入的字符串，比如null，js代碼，html代碼等，是否能保存。
· 數字輸入框還要檢查邊界值，負數，分數，非數字，0，科學計數法，字母與數字結合，16進制，8進制，貨幣性輸入，小數點位數檢查等情況等情況
另外，輸入框在邏輯上需要關注以下幾點：
· 信息的唯一性，比如一些名稱的檢查要求唯一性。
· 編輯類的輸入框，要檢查鼠標移出后點擊，能否從輸入框移出焦點。
· 有自動帶入功能的輸入框，要檢查自動帶入數據的正確性。
按鈕
按鈕一般用戶功能的確認，涉及到功能與db等的存儲情況是否符合預期。常見測試場景如下：
· 按鈕是否可點，有彈出框的彈出框是否符合預期。
· 自然狀態、鼠標懸浮和按鈕按下狀態下，按鈕的狀態
· 按鈕的功能實現是否正常（存儲db，與其他模塊交互等是否正常）
· 按enter鍵操作按鈕，功能是否正常。
· 按tab鍵，能否在不同的按鈕或其他控件間切換。
· 一些按鈕只能點擊一次的情況，點擊一次后，再操作，是否仍能點擊。
· 錯誤信息提醒是在前端js判斷，還是后臺判斷，點擊按鈕后，提示話術顯示正確。
· 取消功能的按鈕，是否能正常關閉頁面，取消后回到的頁面是否符合預期。
下拉框
下拉框一般多個一起出現，實現篩選功能。需要注意篩選后是否立即生效，以及組合篩選的情況結果是否符合預期。常見測試點如下：
· 默認顯示是否正確，比如有的顯示全部，有的默認選中某一項，有的顯示“請選擇”
· 切換item，下拉框顯示項內容和排序是否正確，不同瀏覽器，下拉框顯示是否有變形等。
· 下拉框中選項超出設定值的，是否有滑動條，上下滑動，還是左右滑動等。
· 下拉框彈出時，鼠標點擊控件外區域/選項/下拉框，下拉框能否收回
· 當下拉框選項很多時，是否有被底層覆蓋的情況，
· 下拉框數據被存儲后，其他地方顯示時，傳遞的數據正確性檢查。比如下拉框選項按數字傳遞，而其他頁面顯示時應該顯示對應的文字。
· 組合篩選的情況，有級聯操作的，只有選擇了前一個數據后，才能進行下一個的選擇。比如省市之間，只有選擇了省份，才能繼續選擇市，否則市不可選。
· 組合下拉框實現的篩選功能正確性檢查。
下拉框，列表，篩選框等經常一起組成篩選的功能。需要關注以下幾點：
1. 選擇不同的選項，列表中展示篩選的結果，內容，默認排序等檢查。
2. 組合條件時，列表中內容檢查。
列表
列表是列表框，主要是較多的同類型數據的展現。列表需要注意數據的全面性，條數，內容正確性等，常見測試點如下：
· 列表長度，寬度是否合理，如果太長，太寬，有沒有豎向和橫向滾動條。
· 列表表頭幫助信息是否完整，比如title旁邊是否有小問號支持。
· 列表每行每個字段可顯示內容多樣性檢查是否正確。
· 列表數據為空時，顯示是否正確。
· 列表翻頁功能是否正確。
· 列表列排序功能是否正常。
· 列表其他附加功能（比如：刪除、新增，編輯，下載等）是否正常。
· 是否有全選功能，全選功能檢查
· 列表和翻頁，篩選的組合檢查，翻頁后，再做篩選，是否會自動跳到第一頁。
· 列表和翻頁，排序的組合檢查，翻頁后，篩選，是否仍是對全部數據的排序。
· 列表 和翻頁的組合檢查，翻頁后，對頁面數據做編輯，是否能保存成功，是否仍停留在當前頁。
· 列表切換的功能檢查，比如在列表1和列表2在同一區域展示，展示1時不展示里2.當在列表1編輯物料后，切換到列表2，再切換回列表1，檢查編輯的物料是否生效。
單選框
單選框實現多個中選擇一個的功能，常見測試點如下：
· 默認是否有選中
· 是否只能選中一個
· 選中后的功能是否正確。
· 與接口交互傳遞的值正確性檢查
復選框
實現多選功能，常見測試點如下：
· 多個復選框一個都不選
· 多個復選框全部選中
· 多個復選框部分被選中
· 當復選框太多時，是否提供全選和全不選的功能
· 復選框與其他組合時，比如選中某個復選框，就出現某種效果，檢查不同組合時的展示情況。
左右選擇框
一些場景，使用左右選擇框選擇數據，左側是待選擇數據，右側是已經選擇的數據，右側可刪除。常見測試點如下：
· 左側數據展示區數據是否符合預期
· 左側數據為空時是否展示正確
· 左側數據過多時是否有滾動條。
· 左側能否展開，展開后顯示數據是否正確。首次進入是否展開。
· 添加左側數據到右側后，右側數據是否默認展開。
· 添加一條左側數據到右側，左側數據置灰檢查，右側數據正確性檢查
· 添加全部數據到右側，左側數據置灰檢查，正確性檢查。
· 右側刪除一條數據，左側對應數據不再置灰，數據正確性檢查
· 右側刪除全部，左側數據不再置灰，正確性檢查
· 兩側數據是否有個數提示，有的話，添加和刪除后，個數提示是否正確。
· 添加大量數據，確認后，檢查處理的速度。
