查漏 - web功能測試方法大全

文通過六個部分為大家梳理了web功能測試過程中，容易出現的遺漏的部分，用以發掘自己工作中的疏漏。（純干貨，建議收藏哦~）

一、輸入框

1、字符型輸入框

（1）字符型輸入框：英文全角、英文半角、數字、空或者空格、特殊字符“~！@#￥%……&*？[]{}”特別要注意單引號和&符號。禁止直接輸入特殊字符時，使用“粘貼、拷貝”功能嘗試輸入；

（2）長度檢查：最小長度、最大長度、最小長度-1、最大長度+1、輸入超工字符比如把整個文章拷貝過去；

（3）空格檢查：輸入的字符間有空格、字符前有空格、字符后有空格、字符前后有空格；

（4）多行文本框輸入：允許回車換行、保存后再顯示能夠保存輸入的格式、僅輸入回車換行，檢查能否正確保存（若能，檢查保存結果，若不能，查看是否有正常提示）；

（5）安全性檢查：輸入特殊字符串（null,NULL, ,javascript,<script>,</script>,<title>,<html>,<td>），輸入腳本函數(<script>alert("abc")</script>)、doucment.write("abc")、<b>hello</b>）。

2、數值型輸入框

（1）邊界值：最大值、最小值、最大值+1、最小值-1；

（2）位數：最小位數、最大位數、最小位數-1、最大位數+1、輸入超長值、輸入整數；

（3）異常值、特殊字符：輸入空白（NULL）、空格或"~!@#$%^&*()_+{}|[]:"<>?;',./?;:'-=等可能導致系統錯誤的字符。禁止直接輸入特殊字符時，嘗試使用粘貼拷貝，查看是否能正常提交word中的特殊功能。通過剪貼板拷貝到輸入框，包括分頁符、分節符類似公式的上下標等、數值的特殊符號如：∑、㏒、㏑、∏、+、- 等。

輸入負整數、負小數、分數、輸入字母或漢字、小數（小數前0點舍去的情況，多個小數點的情況）；首位為0的數字如：01、02，科學計數法是否支持1.0E2；全角數字與半角數字、數字與字母混合、16進制，8進制數值、貨幣型輸入（允許小數點后面幾位）；

（4）安全性檢查：不能直接輸入就copy。

3、日期型輸入框

（1）合法性檢查：(輸入0日、1日、32日)、月輸入[1、3、5、7、8、10、12]、日輸入[31]、月輸入[4、6、9、11]、日輸入[30][31]、輸入非閏年，月輸入[2]，日期輸入[28、29]、輸入閏年，月輸入[2]、日期輸入[29、30]、月輸入[0、1、12、13]

（2）異常值、特殊字符：輸入空白或NULL、輸入~！@#￥%……&*（）{}[]等可能導致系統錯誤的字符

（3）安全性檢查：不能直接輸入，就copy，是否數據檢驗出錯？

4、信息重復

在一些需要命名，且名字應該唯一信息輸入的，需要關注重復的名字或ID，查看系統有沒有處理，會否報錯。重名包括：是否區分大小寫，以及在輸入內容的前后輸入空格，系統是否作出正確處理。

二、搜索功能

若查詢條件為輸入框，則參考輸入框對應類型的測試方法。

1、功能實現

（1）如果支持模糊查詢，輸入任意一個字符能否搜到；

（2）輸入比較長的名稱是否能查到；

（3）輸入系統中不存在的與之匹配的條件；

（4）用戶進行查詢操作時，一般情況是不進行查詢條件的清空，除非需求特殊說明。

2、組合測試

（1）不同查詢條件之間來回選擇，是否出現頁面錯誤（單選框和多選框最容易出錯）；

（2）測試多個查詢條件時，要注意查詢條件的組合測試，可能不同組合的測試會報錯。

三、添加、修改功能

1、特殊鍵

（1）是否支持Tab鍵；

（2）是否支持回車鍵。

2、提示信息

不符合要求的地方是否有錯誤提示？

3、唯一性

（1）字段唯一的，是否可以重復添加；

（2）添加后，是否能修改為已存在的字段（字段包括區分大小寫以及在輸入的內容前后輸入空格，保存后，數據是否真的插入到數據庫中，注意保存后數據的正確性）。

4、數據正確性

（1）對編輯頁的每個編輯項進行修改，點擊保存，是否可以保存成功，檢查想關聯的數據是否得到更新；

（2）進行必填項檢查（即是否給出提示；以及提示后是否依然把數據存到數據庫中；是否提示后出現頁碼錯亂等）；

（3）是否能夠連續添加（針對特殊情況）；

（4）在編輯的時候，注意編輯項的長度限制。有時在添加的時候顯示有，在編輯的時候卻顯示沒有（注意要添加和修改規則是否一致）；

（5）對于有圖片上傳功能的編輯框，若不上傳圖片，查看編輯頁面時是否顯示有默認的圖片；若上傳圖片，查看是否顯示為上傳圖片；

（6）修改后增加數據后，要注意查詢頁面的數據是否及時更新，特別是在首頁的數據更新；

（7）提交數據時，連續多次點擊，查看系統會不會連續增加幾條相同的數據或報錯；

（8）若結果列表中沒有記錄，或者沒選擇某條記錄，點擊修改按鈕后，系統是否會報異常。

四、刪除功能

1、特殊鍵

（1）是否支持Tab鍵；

（2）是否支持回車鍵。

2、提示信息

（1）不選擇任何信息，直接點擊刪除按鈕，是否有提示；

（2）刪除某條信息時，應該有確認提示。

3、數據實現

（1）是否能連續刪除多個產品；

（2）當只有一條數據時，是否可以刪除成功；

（3）刪除一條數據后，是否可以添加相同的數據；

（4）如系統支持批量刪除，注意刪除的信息是否正確；

（5）如有全選，注意是否把所有的數據刪除；

（6）刪除數據時，要注意相應查詢頁面的數據是否及時更新；

（7）如刪除的數據與其他業務數據關聯，要注意其關聯性（如刪除部門信息時，部門下游員工，則應該給出提示）；

（8）如果結果列表中沒有記錄或沒有選擇任何一條記錄，點擊刪除按鈕系統會報錯。

如：某一功能模塊具有最基本的增刪改查功能，則需要進行以下測試：

單項功能測試（增加、修改、查詢、刪除）

增加——>增加——>增加（連續增加測試）

增加——>刪除

增加——>刪除——>增加（新增加的內容與刪除內容一致）

增加——>修改——>刪除

修改——>修改——>修改（連續修改測試）

修改——>增加（新增加的內容與修改前內容一致）

修改——>刪除

修改——>刪除——>增加（新增加的內容與刪除內容一致）

刪除——>刪除——>刪除（連續刪除測試）

五、注冊、登陸模塊

（1）注冊時，設置密碼為特殊版本號，檢查登錄時是否會報錯；

（2）注冊成功后，頁面應該以登陸狀態跳轉到首頁或指定頁面；

（3）在注冊信息中刪除已輸入的信息，檢查是否可以注冊成功。

六、鏈接測試

主要是保證鏈接的可用性和正確性，它也是網站測試中比較重要的一個方面。可以使用特定的工具如XENU來進行鏈接測試。

1、導航測試

導航描述了用戶在一個頁面內操作的方式，在不同的用戶接口控制之間，例如按鈕、對話框、列表和窗口等；或在不同的連接頁面之間。通過考慮下列問題，可以決定一個Web應用系統是否易于導航：導航是否直觀？Web系統的主要部分是否可通過主頁存取？Web系統是否需要站點地圖、搜索引擎或其他的導航幫助？

在一個頁面上放太多的信息往往起到與預期相反的效果。Web應用系統的用戶趨向于目的驅動，很快地掃描一個Web應用系統，看是否有滿足自己需要的信息，如果沒有，就會很快地離開。很少有用戶愿意花時間去熟悉Web應用系統的結構，因此，Web應用系統導航幫助要盡可能地準確。

導航的另一個重要方面是Web應用系統的頁面結構、導航、菜單、連接的風格是否一致。確保用戶憑直覺就知道Web應用系統里面是否還有內容，內容在什么地方。

Web應用系統的層次一旦決定，就要著手測試用戶導航功能，讓最終用戶參與這種測試，效果將更加明顯。

2、圖形測試

在Web應用系統中，適當的圖片和動畫既能起到廣告宣傳的作用，又能起到美化頁面的功能。一個Web應用系統的圖形可以包括圖片、動畫、邊框、顏色、字體、背景、按鈕等。圖形測試的內容有：

（1）要確保圖形有明確的用途，圖片或動畫不要胡亂地堆在一起，以免浪費傳輸時間。Web應用系統的圖片尺寸要盡量地小，并且要能清楚地說明某件事情，一般都鏈接到某個具體的頁面；

（2）驗證所有頁面字體的風格是否一致；

（3）背景顏色應該與字體顏色和前景顏色相搭配；

（4）圖片的大小和質量也是一個很重要的因素，一般采用JPG或GIF壓縮，最好能使圖片的大小減小到30k以下；

（5）最后，需要驗證的是文字回繞是否正確。如果說明文字指向右邊的圖片，應該確保該圖片出現在右邊。不要因為使用圖片而使窗口和段落排列古怪或者出現孤行。

通常來說，使用少許或盡量不使用背景是個不錯的選擇。如果您想用背景，那么最好使用單色的，和導航條一起放在頁面的左邊。另外，圖案和圖片可能會轉移用戶的注意力。

SS3 加入的 @media 媒體查詢使得無需修改內容，便可使樣式應用于某些特定的設備范圍。媒體查詢像是樣式表的 if 語句，通過判斷表達式的真假來執行特定的分支（加載特定的樣式）。

@media 直接寫在 CSS 樣式中，或者針對不同的媒體設備從外部鏈入不同的 stylesheets（外部樣式表）。兩種使用語法：

1. 直接寫在 CSS 樣式中

定義語法如下：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

一個完整的媒體查詢由以下五部分組成：

必須是以 @media 開頭。
使用 mediatype 指定媒體（設備）類型。
使用 and | not | only 邏輯操作符構建復雜的媒體查詢。
使用 media feature 指定媒體特性。
CSS-Code 位置是要設置的 CSS 樣式。

mediatype （媒體類型）取值范圍如下：

值	描述
all	適用于所有設備
print	用于打印機和打印預覽
screen	用于電腦屏幕，平板電腦，智能手機等
speech	用于屏幕閱讀器等發聲設備

被廢棄的媒體類型： CSS2.1 和 Media Queries 3 定義了一些額外的媒體類型( tty, tv, projection, handheld, braille, embossed, 以及 aural )，但是它們在 Media Queries 4 中已經被廢棄，并且不應該被使用。aural 類型被替換為具有相似效果的 speech 。

邏輯操作符取值范圍如下：

值	描述
and	用于將多個媒體查詢規則組合成單條媒體查詢，當每個查詢規則都為真時則該條媒體查詢為真
not	用來排除某種設備
only	用以指定某特定媒體設備

media feature （媒體特性）常用取值如下：

值	描述
max-width	定義輸出設備中的頁面最大可見區域寬度
max-height	定義輸出設備中的頁面最大可見區域高度
min-width	定義輸出設備中的頁面最小可見區域寬度
min-height	定義輸出設備中的頁面最小可見區域高度
orientation	視口（viewport）的旋轉方向。portrait ：表示 viewport 處于縱向，即高度大于等于寬度； landscape ：表示 viewport 處于橫向，即寬度大于高度

如果你還想了解更多完整 media feature 取值，請訪問：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries。

2. 針對不同的媒體設備，從外部鏈入不同的 stylesheets（外部樣式表）

用 media 屬性為 <link> 指定特定的媒體類型。定義語法如下：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">

其中，mediatype、邏輯操作符、media feature 的取值與第一種直接寫在 CSS 樣式中的取值相同，這里不再進行贅述。

二者區別在于，第一種寫在 CSS 樣式中是當條件成立后，執行 CSS Code , 第二種則是條件成立后，加載對應的外部樣式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width: 800px){
            body{
                background-color: red;
            }
        }
        @media screen and (min-width:800px){
            body{
                background-color:green;
            }
        }
        @media screen and (min-width:1024px){
            body{
                background-color:blue;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

上述代碼做了如下操作：

定義媒體查詢規則，當設備類型為 screen 并且設備中的頁面最大可見區域寬度為 800px 的時候，頁面背景顏色為紅色。
定義媒體查詢規則，當設備類型為 screen 并且設備中的頁面最小可見區域寬度為 800px 的時候，頁面背景顏色為綠色。
定義媒體查詢規則，當設備類型為 screen 并且設備中的頁面最小可見區域寬度為 1024px 的時候，頁面背景顏色為藍色。

啟動 8080 端口，打開 Web 服務，在瀏覽器中訪問即可看到如下效果。

手動縮小瀏覽器寬度，當寬度大于 800px 且小于 1024px 時，頁面顯示綠色。

繼續縮小瀏覽器寬度，當寬度小于 800px 時，頁面顯示紅色。

TML 簡介

地址欄打開網易云網頁，https://music.163.com。按F12打開“開發者工具”面板，選擇“Element”，即可自由查看。

另一個方法：在當前的網站界面，Ctrl+U直接打開“查看網頁源代碼”。或點擊鼠標右鍵選擇“查看網頁源代碼”。

注意事項：

<!DOCTYPE html> 必須首行固定。

<title> 為文檔標題。

在線咨詢

上一篇：用DevExpress實現基于HTML&am
下一篇：word插入圖片快速排版技巧，對齊設置快捷操作，小技

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商