一、概述
1.1 什么是H5
H5 即 HTML5，是最新的 Web 端開發語言版本，現如今，大多數手機 APP 頁面會用 H5 實現，包括 PC Web 站點也會用它開發實現。所以 Web 的通用測試點和方法基本都可以適用於它。H5其實就是：移動端Web頁面。
在PC或者手機瀏覽器都可以直接訪問H5頁面
1.2 怎么識別是H5？
- 基本上只要對那個view長按，然后看是不是有反應，比如手機震動（Android）、或者出現文字選擇粘貼（Android/iOS），那么就是WebView！
- 橫屏豎屏相互切換，能自適應，並且布局不會亂掉；
- H5的頁面在PC端也是能訪問的，chrome對H5支持最好，功能的測試可以在PC端chrome下先測試，也可以在手機上直接測試，這個看個人習慣。（ie系列包括ie8,及以下都支持的不好，這個可以與PD確認H5頁面在這些PC瀏覽器上不支持
1.3 H5系統架構
H5是移動端web頁面，也就是Web App，B/S 架構
1.4 H5測試工具？
Fiddler、Selenium、JMeter、LoadRunner 等等。
二、測試點
2.1 UI測試
風格、樣式、顏色是否協調，不僅包括HTML5本身，因為HTML5會嵌入App里面，所以要考慮 H5 的風格、樣式、顏色是否與app本身協同，不至於格格不入，包括用戶習慣等也最好保持一致或相近，最好在設計初期就有顏色、按鈕、圖片、背景、邊框等詳細規划和統一。 但是正是由於H5的可移植性，同一服務會嵌入到N家客戶的產品中，難以與各家都完全統一，所以在設計中就應該考慮這些問題。
文字：風格一致、錯別字、標點符號統一、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展示
圖片：靜態：大小、風格；動態：大小、風格、准確性動態圖；刷新頁面圖片是否展示
圖片適配：是否根據不同屏幕和分辨率做適配，高端機取雙倍尺寸的圖；
是否對於2G網絡，或低端機單獨處理，不取高清圖或減少一些特效動畫效果；
最好加上webp圖片的支持，可減少流量；
在中低端機上考慮是否需要讓前端單獨處理，去掉復雜處理。並 對中低端機只取原圖，不取高清圖。
注意：webp格式只對android有效，放在IOS上反而會起反作用。
是否要增加轉場動畫，loading動畫，點擊動畫等。以提升體驗。需要在動畫效果和卡頓上衡量。
連接：空連接、刷新連接數據是否展示、
輸入框：暗紋提示文案顏色是否正確？
2.2 功能測試
2.2.1 輸入框
1、字符型輸入框：
（1）字符型輸入框：英文全角、英文半角、數字、空或者空格、特殊字符“~！@#￥%……&*？[]{}”特別要注意單引號和&符號。禁止直接輸入特殊字符時，使用“粘貼、拷貝”功能嘗試輸入。
（2）長度檢查：最小長度、最大長度、最小長度-1、最大長度+1、輸入超工字符比如把整個文章拷貝過去。
（3）空格檢查：輸入的字符間有空格、字符前有空格、字符后有空格、字符前后有空格
（4）多行文本框輸入：允許回車換行、保存后再顯示能夠保存輸入的格式、僅輸入回車換行，檢查能否正確保存（若能，檢查保存結果，若不能，查看是否有正常提示）、
（5）安全性檢查：輸入特殊字符串（null,NULL, ,javascript,)、doucment.write(“abc”)、hello）
（6）表情符號輸入檢查：有些表情格式不是utf-8
（7）輸入內容超限后，是否有彈窗，是否截取？是否可繼續輸入？
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,看系統有沒有處理,會否報錯,重名包括是否區分大小寫,以及在輸入內容的前后輸入空格,系統是否作出正確處理.
輸入框提交很長的純英文字母或者數字(不帶任何全角字符和中文)，並且不換行，則提交數據后，頁面可能被此相關字符拉伸的特別長。
2.2.2 搜索功能
若查詢條件為輸入框，則參考輸入框對應類型的測試方法
1、功能實現：
（1）如果支持模糊查詢，搜索名稱中任意一個字符是否能搜索到
（2）比較長的名稱是否能查到
（3）輸入系統中不存在的與之匹配的條件
（4）用戶進行查詢操作時，一般情況是不進行查詢條件的清空，除非需求特殊說明。
2、組合測試：
（1）不同查詢條件之間來回選擇，是否出現頁面錯誤（單選框和多選框最容易出錯）
（2）測試多個查詢條件時，要注意查詢條件的組合測試，可能不同組合的測試會報錯。
3.搜索后返回頁面
4.搜索操作后，返回頁面
2.2.3
添加、修改功能
1、特殊鍵：
（1）是否支持Tab鍵
（2）是否支持回車鍵
2、提示信息：
（1）不符合要求的地方是否有錯誤提示
3、唯一性：
（1）字段唯一的，是否可以重復添加，添加后是否能修改為已存在的字段（字段包括區分大小寫以及在輸入的內容前后輸入空格，保存后，數據是否真的插入到數據庫中，注意保存后數據的正確性）
4、數據 正確性：
（1）對編輯頁的每個編輯項進行修改，點擊保存，是否可以保存成功，檢查想關聯的數據是否得到更新。
（2）進行必填項檢查（即是否給出提示以及提示后是否依然把數據存到數據庫中；是否提示后出現頁碼錯亂等）
（3）是否能夠連續添加（針對特殊情況）
（4）在編輯的時候，注意編輯項的長度限制，有時在添加的時候有，在編輯的時候卻沒有（注意要添加和修改規則是否一致）
（5）對於有圖片上傳功能的編輯框，若不上傳圖片，查看編輯頁面時是否顯示有默認的圖片，若上傳圖片，查看是否顯示為上傳圖片
（6）修改后增加數據后，特別要注意查詢頁面的數據是否及時更新，特別是在首頁時要注意數據的更新。
（7）提交數據時，連續多次點擊，查看系統會不會連續增加幾條相同的數據或報錯。
（8）若結果列表中沒有記錄或者沒選擇某條記錄，點擊修改按鈕，系統會拋異常。
2.2.4 刪除功能
1、特殊鍵：
（1）是否支持Tab鍵
（2）是否支持回車鍵
2、提示信息：
（1）不選擇任何信息，直接點擊刪除按鈕，是否有提示
（2）刪除某條信息時，應該有確認提示
3、數據 實現：
（1）是否能連續刪除多個產品
（2）當只有一條數據時，是否可以刪除成功
（3）刪除一條數據后，是否可以添加相同的數據
（4）如系統支持批量刪除，注意刪除的信息是否正確
（5）如有全選，注意是否把所有的數據刪除
（6）刪除數據時，要注意相應查詢頁面的數據是否及時更新
（7）如刪除的數據與其他業務數據關聯，要注意其關聯性（如刪除部門信息時，部門下游員工，則應該給出提示）
（8）如果結果列表中沒有記錄或沒有選擇任何一條記錄，點擊刪除按鈕系統會報錯。
2.2.5 翻頁功能
遇到翻頁加載的頁面，需要注意內容為1頁或者多頁的情況。
A、數據分頁加載時，注意后續頁面請求數據的正確。
ps：這個需要注意在快速操作場景中，請求頁數是不是依次遞增，快速操作（如第一頁尚未loading出來的時候仍然繼續上拉操作）時是否發出去對應的請求了。
1、有無數據時控件的顯示情況。
2、在首頁時，首頁和上一頁是否能點擊。
3、在尾頁時，下一頁和尾頁是否能點擊。
4、在非首頁和非尾頁時，四個按鈕功能是否正確。
5、翻頁后，列表中的記錄是否仍按照指定的排序列進行了排序。
6、是否有默認的指定每頁顯示條數。
7、指定每頁的條數后，列表顯示的記錄數，頁數是否正確。
8、輸入的每頁條數非法時的處理。
2.2.6 前進、后退和刷新
A、下拉刷新是否仍然處於當前頁面，數據是否都是正確的
B、用戶主動點擊刷新按鈕是否仍然處於當前頁面。
C、點擊返回與back鍵，回退頁面是否是期望頁面
ps：本次測試過程中就發現，mtop接口請求成功，但是data內無數據時，返回到的就是個空白頁面，無法正常發送請求。
對於頁面中的返回，以及瀏覽器自帶的返回的測試。 頁面中的返回要考慮業務邏輯，友好返回到相應層次，需要從用戶角度考慮返回的轉跳邏輯，不能出現死循環。並要注意返回后是否需要刷新頁面請求，比如支付完后返回訂單列表，最好刷新
展示上一步購買的訂單
IE 有一個特性：就是允許前進、后退到某一個頁面或在當前頁面刷新，在某些特殊業務場景的要求下，用戶進行前進、后退和刷新當前頁面的操作，會造成數據不完整、校驗失敗或者重復提交的情況。
2.2.7 向下滑動數據，展示翻頁
1.每頁數據展示多少
2.向下翻是否有重復數據
3.每一頁截止，底部提示是否正確
4.最底部是否有提示文案
5.進入詳細也后，返回是否定位在之前位置？
2.2.8 返回鍵檢查
2.2.8.1 普通檢查
1、一條已經成功提交的記錄，返回后再提交，是否做了處理
2、檢查多次使用返回鍵的情況，在有返回鍵的地方，返回到原來的頁面多次，查看是否會出錯
2.2.8.2 mtop接口返回處理
發現這個出現問題的地方有很多，但是只要有意識的去處理，就很容易避免，主要是以下幾種情況：
A、請求成功，且返回有數據，測試mtop接口返回數據的各種場景。
B、請求成功，但data內容為空。
C、請求接口異常，出現ERR_SID_INVALID::SESSION過期，拉起登錄。
D、請求接口發生除C中提到的異常之外的異常，通常可歸結為一類進行處理。
2.2.9 關注application
cache （
http://www.html5rocks.com/zh/tutorials/appcache/beginner/）, local storage（
http://www.html5china.com/HTML5features/LocalStorage/20120519_3711.html）, cookie中值是否正確，頁面是否有使用application cache, local storage存放數據。清除這些數據后功能是否正確，獲取數據失敗后是否有重試機制。（可以用下圖Chrome開發工具，進行查看和清除，也可用postman,soupUi等）。 注意：老版chrome開發者模式下在resource下查看cache，新版chrome在application下查看。
session失效機制。對於要登錄的，需要用到session的地方，要注意模擬session失效時，功能業務邏輯是否正常。
2.2.10 注冊、登陸模塊
目前H5與native各個客戶端都做了互通，所以大家在測試的時候要注意兩點：
A、若客戶端已登錄，那么進入H5后仍然是登錄狀態。
B、若客戶端未登錄，進入H5，點擊對應按鈕OR鏈接，如果需要登錄，須拉起native登錄。若取消登錄，是否可再次拉起登錄，或者停留在的頁面是否有對應的登錄提示。
ps：本次測試過程中就發現，第一次點擊鏈接，可以拉起登錄，第二次卻不能。
1、注冊功能：
（1）注冊時，設置密碼為特殊版本號，檢查登錄時是否會報錯
（2）注冊成功后，頁面應該以登陸狀態跳轉到首頁或指定頁面
（3）在注冊信息中刪除已輸入的信息，檢查是否可以注冊成功。
2、登陸 功能：
（1）輸入正確的用戶名和正確的密碼
（2）輸入正確的用戶名和錯誤的密碼
（3）輸入錯誤的用戶名和正確的密碼
（4）輸入錯誤的用戶名和錯誤的密碼
（5）不輸入用戶名和密碼（均為空格）
（6）只輸入用戶名，密碼為空
（7）用戶名為空，只輸入密碼
（8）輸入正確的用戶名和密碼，但是不區分大小寫
（9）用戶名和密碼包括特殊字符
（10）用戶名和密碼輸入超長值
（11）已刪除的用戶名和密碼
（12）登錄時，當頁面刷新或重新輸入數據時，驗證碼是否更新
2.2.11 上傳功能
1、功能 實現：
（1）文件類型正確、大小合適
（2）文件類型正確，大小不合適
（3）文件類型錯誤，大小合適
（4）文件類型和大小都合適，上傳一個正在使用中的圖片
（5）文件類型大小都合適，手動輸入存在的圖片地址來上傳
（6）文件類型和大小都合適，輸入不存在的圖片地址來上傳
（7）文件類型和大小都合適，輸入圖片名稱來上傳
（8）不選擇文件直接點擊上傳，查看是否給出提示
（9）連續多次選擇不同的文件，查看是否上傳最后一次選擇的文件
2.2.12 回車鍵檢查
1、在輸入結果后，直接按回車鍵，看系統如何處理，是否會報錯
2.2.13 刷新鍵檢查
1、在Web系統中，使用刷新鍵，看系統如何處理，是否會報錯
2.3 兼容性測試
2.3.1 H5機型適配
在項目測試計划給出時，確認是否要確定測試機基線，即是否要以幾款機型作為最低適配需求。可參考目前應用市場占有分布。
1.操作系統適配范圍：ios 8-10固件版本的iphone必須覆蓋，ios7可選覆蓋，android 4.4-6.x必須覆蓋，4.0-4.3可選覆蓋，4.0以下可以不care。像小米，魅族這種自定義os版本的機子，其實底層也對應着標准的谷歌os系統版本。
對於ios, android大版本一定要覆蓋，對於系統版本，先看大版本占用情況，再選擇大版本中占用率較高的小版本。如4.3, 5.0大版本中選幾個占用率較高的小版本測試。常用的有：ios：8.x.x, 9.3.5；android: 4.3.1, 4.4.2 等。
2.機型品牌適配范圍：參考集團內后端統計的top機型。對於ios，要覆蓋iphone 6/6s/6p, iphone 7,iphone5等。
對於android,如三星、小米、華為，htc, lenovo，中興，魅族，阿里雲等。屌絲機型 華為，中興，vivo，oppo,魅族占有率很高，所以這幾個屌絲機型一定要覆蓋到。三星上的H5問題防不勝防，相當極品。小米近一兩年的機型適配問題不想2s那么多了。
三星常見的H5適配問題：css加載不出來，控件操作無響應。小米常見的H5適配問題是UI，比如button會把這個按鈕四個角冗余顯示，tab切換異常。 實時滾動信息時卡死等。
對於有些手機廠商有自已定制操作系統，要單獨適配，如小米，魅族。注意三星的假系統版本。
3.在選擇機子時，要兼顧屏幕尺寸和分辨率。覆蓋到主流的屏幕尺寸和分辨率，並組合一下，現在主流是1920大屏，但一定要找幾款小屏手機覆蓋。注意三星的
適配時不能光選性能好的機子，一定要適配幾款中低端機。華為和中興的國產機，可選擇適配一下。
a、大屏（如720*1280，重點關注頁面背景是否完全撐開頁面，刷新是否有抖動）、小屏手機（如320*480，重點關注下彈框樣式和文案折行）
b、android4.X 及以上隨機找幾個即可。
c、ios8,IOS9,IOS10。
2.3.2 手機瀏覽器適配
需要覆蓋：自帶瀏覽器（默認的瀏覽器內核）為主，有足夠時間時再覆蓋chrome,UC瀏覽器（最新版）和QQ瀏覽器（最新版）。
注意：
容易出現適配問題的機型：
①三星i9100G，對於按鈕樣式，輸入框的區域要重點關注。
②android 5.X 谷歌原生的nenux系列。
③大屏高分辨率手機要適配一款，如三星galaxy note4
④對於支持webp的機子要測試。如三星galaxy note2,或三星s3
⑤Pad上測試需要注意：橫屏和豎屏下的顯示效果可能不同，還有橫屏換成豎屏、豎屏換成橫屏。注意橫豎屏切換時輸入框的不同。
2.3.3 工具
1.市面上各種雲測平台，一般都可以單獨測試H5適配。
2.可借助瀏覽器的開發者模式。
2.3.4 H5與Native切換
切換時登錄信息是否記錄、流程是否順暢、是否出現中斷閃退等問題。 注意驗證 登錄信息是否能互通。 不能出現native已經登錄，進入h5后繼續讓登錄，實在技術實現不了的可toast提示用戶繼續登錄。
2.4 體驗相關
2.4.1 資源相關
A、頁面中有圖片的話，淘寶那邊建議圖片一般不大於50kb，本着一個原則，盡量縮小圖片。
B、資源是否壓縮、是否通過CDN加載。
C、如何保證二次發布后有效更新。
D、 反復訪問，檢查是否占用大量內存；
E、 緩存檢查；
F、 流量消耗檢查；
2.4.2 流量
A、對於一些不會變化的圖片，如游戲動畫效果相關圖片，不需要每次都請求的東西，做本地緩存。
B、數據較多時是否做了分頁加載。
2.4.3 頁面展現時間
A、關注頁面首屏加載時間。
2.4.4 頁面提示
A、弱網絡下，數據加載較慢，是否有對應的loading提示。
B、接口獲取異常時，提示是否友好。
C、刷新頁面或者加載新內容時頁面是否有抖動。
2.4.5 手機操作相關
A、鎖屏之后展示頁面。
B、回退到后台之后，重新呼出在前台展示。
C、滑動、定位：手指滑動是否流暢，手指點擊時焦點是否定位正確，不同機型會不一樣。焦點定位點擊是靈敏。
D、對於類似公司名稱、offer名稱長度的問題，在手機上最好能根據屏幕大小自適應而不是截斷，因為手機上是不會有tips可以看的。截斷導致大屏幕下也只能顯示幾個字，交互不好
E、手機測試要特別關注交互是否友好，與PC機的事件模型不一樣，可能會導致一些體驗的問題，比如：彈出層的點擊，是否會穿透，影響到彈出層下面的頁面。
F、對於一些浮層做的頁面，例如地圖、產品分類等浮層，注意拖動后是否可以看到它下面的頁面，拖動后邊緣是否有留白
G、手機端的瀏覽器測試的時候也要清除一下緩存，因為圖片和文件會被緩存下來，所以首次訪問和二次訪問體驗不一樣。例如UC瀏覽器的清楚緩存在設置-》系統設置-》基本設置--》清除記錄中。
2.4.16弱網測試
網絡相關：不同網絡類型測試
a)考慮2G\3G\4G\wifi網絡
b)考慮移動網絡2G\3G\4G基站的變化的影響
c)無連接、關閉連接狀態
d)弱網絡信號狀態
e)有網絡信號但網絡不可達狀態
測試注意點
a)從wifi切換到2G/3G網絡、從2G/3G網絡切換到wifi等
b)弱網絡降級：處於2G/3G網絡省流量模式的一些特殊處理，比如2G網絡下測試，圖片多時是否要懶加載等
c)無網絡時，執行需要網絡的操作，給予友好提示，並確保不會導致應用crash；
d)內網測試時，要注意選擇到外網操作是的異常情況處理；
e)弱網絡下，檢查功能狀態是否正常，確保不因提交數據失敗而造成異常甚至應用crash；
f)弱網絡下，檢查數據是否一直處於提交中的狀態，如遇數據交換失敗要給予提示；
g)弱網絡下，執行操作后，在回調沒有完成的情況下，退出本webview或者其他操作，有無異常
弱網絡降級：處於2G/3G網絡省流量模式的一些特殊處理，比如2G網絡下測試，圖片多時是否要懶加載等。網絡狀況差的場景，可提示文案，但不能閃退。
網絡切換：從wifi切換到2G/3G網絡、從2G/3G網絡切換到wifi等
2.5 安全性測試
2.5.1 明確投放渠道都有哪些
如獨客、主客、wap，是否對未投放渠道做了限制，直接通過url請求是否攔截等
2.5.2 評估是否需要接入集團安全，如mtee黑白名單等。
2.5.3 是否需要接入支付寶實名認證
涉及到金錢相關，如天貓積分，紅包等，為了防刷，一般都需要判斷是否支付寶實名認證。
2.5.4 是否接入windvane，所有請求通過native發出。
2.5.5從代碼層級分析html5新特性帶來的安全漏洞。常見的：
通過formaction屬性進行XSS
通過autofocus屬性執行本身的focus事件
多個autofocus競爭焦點來觸發blur事件
通過的poster屬性執行Javascript
通過autofocus觸發的onscroll執行Javascript
具體原理和其他漏洞可見
http://html5sec.org/#html5
2.5.6從手機用戶角度列舉手機網頁存在的一些安全問題（非測試角度）
大致有以下：
惡意url。包括html鏈接、短鏈接、短信中的url、掃二維碼產生的url
通過XSS竊取數據庫內容。各種XSS可參見
http://html5sec.org/#html5
自BeEF的攻擊（BeEF有點類似fiddler，具體可見
https://github.com/beefproject/beef）。包括cookie竊取、披露設備地理位置、打騷擾電話、不需要的下載
訪問不安全的web服務。
竊聽移動網站流量。
2.6 性能測試
1 壓力測試；
2 並發測試；
1) 需要關注的性能指標：
頁面加載時間/頁面大小/頁面請求數/ DomReady時間/圖片等資源文件大小/請求錯誤數
2) 各種雲測平台
3) 其他性能測試工具：dyna trace，yslow，page speed，firebug等等
4）免費公共測試web：
三. H5上線后回歸
H5涉及到的各種資源文件，在測試環境（包括預發環境），一般都是內域，正式上線，RD童鞋有把資源文件（或者說url中的鏈接忘了修改）漏發的風險，所以上線后一定要用外網環境再快速回歸下。最簡單的就是用自己的4G網絡回歸跟蹤線上。
總結：對於安全、性能方法，涉及很少，需要后期再補充