Web頁面測試總結—控件類

原文：點選打開連結

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，檢查編輯的物料是否生效。 　 　單選框 　　單選框實作多個中選擇一個的功能，常見測試點如下： 　　· 預設是否有選中 　　· 是否隻能選中一個 　　· 選中後的功能是否正确。 　　· 與接口互動傳遞的值正确性檢查 　　 複選框 　　實作多選功能，常見測試點如下： 　　· 多個複選框一個都不選 　　· 多個複選框全部選中 　　· 多個複選框部分被選中 　　· 當複選框太多時，是否提供全選和全不選的功能 　　· 複選框與其他組合時，比如選中某個複選框，就出現某種效果，檢查不同組合時的展示情況。 　　 左右選擇框 　　一些場景，使用左右選擇框選擇資料，左側是待選擇資料，右側是已經選擇的資料，右側可删除。常見測試點如下： 　　· 左側資料展示區資料是否符合預期 　　· 左側資料為空時是否展示正确 　　· 左側資料過多時是否有滾動條。 　　· 左側能否展開，展開後顯示資料是否正确。首次進入是否展開。 　　· 添加左側資料到右側後，右側資料是否預設展開。 　　· 添加一條左側資料到右側，左側資料置灰檢查，右側資料正确性檢查 　　· 添加全部資料到右側，左側資料置灰檢查，正确性檢查。 　　· 右側删除一條資料，左側對應資料不再置灰，資料正确性檢查 　　· 右側删除全部，左側資料不再置灰，正确性檢查 　　· 兩側資料是否有個數提示，有的話，添加和删除後，個數提示是否正确。 　　· 添加大量資料，确認後，檢查處理的速度。 時間框 　　· 用于選擇時間，有起始時間和結束時間，有的有選擇時間的快捷鍵。 　　· 日期選擇功能是否正确（包括年、月、日的選擇是否正确） 　　· 起、止時間選擇（起始時間不能晚于結束時間） 　　· 年、月、日的時間限制（比如：年-1900至今，月-1~12，日-平月、閏月） 　　· 時間框展示在不同浏覽器下，不同分辨率是否正确。 　　· 時間框快捷操作和左側選擇時間的對應關系檢查，比如選擇昨天，左側的時間是否自動選擇昨天的日期。 　　· 時間框選擇時間後，确定，檢查傳遞的值是否正确，尤其檢查是否包含當天，比如最近一個月，是否包含今天等。 　　· 時間框和篩選框互動，選擇時間框後，再選擇其他的篩選框，時間框選擇的内容應該保持不變。 　　· 截止時間不能早于開始時間。 　　· 時間框為公用控件時，要考慮當某一處修改時，其他地方是否會受到影響。 　　 樹形 　　用于收起和展開功能。檢查點如下： 　　1. 各層級用不同圖示表示，最下層節點無加減号 　　2. 提供全部收起、全部展開功能 　　3. 如有需要提供搜尋與右鍵功能，如提供需有提示資訊 　　4. 展開時，内容重新整理正常 　　5. 顯示資料的個數是否正确，和資料庫中資料做對比。 　 　圖表類檢查 　　曲線圖： 　　· 圖表的次元符合預期。 　　· 圖表有時間軸的，檢查時間軸的間隔是否符合預期。 　　· 某一天無資料，其他天有資料時，圖表展示是否正常。 　　· 對比曲線圖時，一般通過顔色區分不同曲線的意義。 　　· 滑鼠懸浮到曲線上，能展示目前點的資料。 　　· 和時間框組合，選擇不同的時間，折線圖的資料是否自動變化，且顯示正确。 　　· 實時折線圖，檢查實時的資料是否正常展示。 　　圓環圖： 　　環形圖一般顯示為百分占比，測試點如下： 　　1. 圖的百分比值是否顯示正常 　　2. 圖中心顯示的數字長度檢查，過長是不是能正常顯示 　　3. 非0的百分比，環形占比是否符合預期 　　4. 顯示多個項的百分比時，各項的顔色是否與提示一緻。 　　5. 100%占比和0%占比時的顯示情況檢查。 　　6. 滑鼠浮動到對應項上，是否有浮層提示對應的值，同時檢查值是否顯示正确。 　　7. 選擇不同的時間框，圖形内容是否随時間變化，變化值是否正确。 　　樹形圖： 　　· 樹形圖展開和關閉是否正常。 　　· 樹形圖展開多層，一屏放不下時，是否有滾動條。 　　· 樹形圖展開多層，是否能全部展開，上下是否顯示正常。 　　· 樹形圖無資料時顯示情況 　　· 隻有單層時和多層時的顯示情況。 　　· 選擇不同的時間框，圖形内容是否随時間變化，變化值是否正确。 　　地圖： 　　· 地圖中的資料塊的資料是否和存儲的一緻。 　　· 滑鼠移動到某一塊，懸浮層内容顯示檢查。 　　· 選擇不同的時間框，圖形内容是否随時間變化，變化值是否正确。 　　· 地圖一般和其他的表格資料配合使用，檢查各區域的資料是否和圖表中資料一緻。 　　· 沒資料的情況，地域的顔色顯示。 　　柱狀圖： 　　· 資料為空時的顯示 　　· 多個柱狀差異比較大時的顯示，比如一個資料是1000，一個時1，檢查頁面顯示情況。 　　· 柱狀圖的範圍區分是否符合預期 　　· 滑鼠懸浮時，浮層的顯示内容檢查。選擇不同的時間框，圖形内容是否随時間變化，變化值是否正确。 　　 檔案類 　　分為檔案上傳和檔案下載下傳，分别如下： 　　檔案上傳，需要注意以下幾點： 　　· 檔案類型正确、大小合适，是否能正确上傳，互動是否正确。 　　· 檔案類型正确，大小不合适，檔案過大，檢查處理速度，進度條情況是否符合預期。 　　· 上傳空檔案。 　　· 上傳超大檔案，檢查是否能正确處理。 　　· 檔案類型錯誤，提示話術是否正确。 　　· 上傳一個正在使用中的檔案 　　· 檔案名是否可以手工輸入，手動輸入存在/不存在的檔案位址來上傳，輸入檔案名稱來上傳 　　· 連續多次選擇不同的檔案，檢視是否上傳最後一次選擇的檔案 　　· Excel檔案類型時，表格列數符合要求，表格列數多于期望的列數，少于期望的列數等條件檢查。各列的類型符合預期，不符合預期，有空行，有重複字段等檢查。 　　檔案下載下傳，需要注意以下幾點： 　　· 右鍵是否可以正常下載下傳檔案 　　· 使用工具下載下傳檔案，是否可正常下載下傳，儲存到本地是否正常顯示 　　· 對于本機沒有安裝工具的檔案是否能正常打開，能否給出正确提示 　　· 對于直接在頁面内打開的内容是否能正常顯示，頁面美觀性檢查 　　· 下載下傳的次數是否會被記錄 　　· 背景設定了下載下傳權限的檔案，是否可以被正常下載下傳 　　 圖檔類 　　比如上傳，下載下傳圖檔等，測試點如下： 　　· 上傳圖檔，檢查檔案類型适合與不适合校驗。 　　· 上傳圖檔，檔案大小适合于不适合，空檔案校驗。 　　· 上傳正确的符合要求的圖檔。 　　· 上傳一個正在使用中的圖檔（即打開該圖檔，在上傳該圖檔），上傳成功 　　· 手動輸入存在和不存在的圖檔位址，上傳校驗 　　· 上傳成功，縮略圖顯示是否正确，上傳失敗，是否有錯誤原因提示 　　· 二次上傳，是否會覆寫上次結果 　　· 需要多張圖檔的，使用同一張圖檔，是否會提示圖檔重複 　　· 上傳時間檢查，大圖檔檔案，上傳響應時間。 　　· 下載下傳圖檔大小，類型檢查。 　　· 下載下傳圖檔是否能正常打開。 　　 URL檢查類 　　有輸入URL和URL跳轉的，注意以下檢查點： 　　· url是否與主域一緻性的檢查。 　　· URL長度限制檢查 　　· 修改url中的get參數，檢查是否還能抓取成功。 　　· URL的連結是否能到達指定的頁面 　　涉及到一些安全性選擇的登入還要在url中校驗http和https協定請求是否正常； 　　· 涉及到埋點等功能的url測試，還要注意點選的方式，比如單擊，右鍵打開，直接輸入url等方式請求（有些js處理的時候可能僅僅調用onclick事件） 錯誤url請求頁面，校驗出錯頁面是否友好 　　· URL需要拼接的，手動輸入部分URL和系統自動加的字段形成一個URL的，需要檢查系統加的字段是否正确，是否需要加密等。 　　 IP輸入框 　　輸入IP字段的，四個輸入框，共同組成一個IP： 　　· 檢查正确的符合格式的IP 　　· 輸入錯誤格式的IP。 　　· 輸入的條數是否符合預期 　　· 輸入重複的ip 　　· 輸入帶非數字的IP 　　· 一般IP都支援，表示任意字元，輸入四個