H5測試：H5 移動端 測試方法

一.H5功能測試

1、關(guān)注頁面請求。對于每個頁面，要查看發(fā)送的請求是否正確，請求的接口是否有重復(fù)，接口請求是否正確返回等。可通過chrome中自帶的開發(fā)工具查看網(wǎng)絡(luò)請求。

關(guān)注是否有冗余接口請求，是否有不必要的重復(fù)接口刷新請求。 冗余和重復(fù)的接口請求會導(dǎo)致流量浪費(fèi)和響應(yīng)速度變慢。

2、關(guān)注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存放數(shù)據(jù)。清除這些數(shù)據(jù)后功能是否正確，獲取數(shù)據(jù)失敗后是否有重試機(jī)制。（可以用下圖Chrome開發(fā)工具，進(jìn)行查看和清除，也可用postman,soupUi等）。 注意：老版chrome開發(fā)者模式下在resource下查看cache，新版chrome在application下查看。

3、session失效機(jī)制。對于要登錄的，需要用到session的地方，要注意模擬session失效時，功能業(yè)務(wù)邏輯是否正常。

4、返回邏輯：對于頁面中的返回，以及瀏覽器自帶的返回的測試。 頁面中的返回要考慮業(yè)務(wù)邏輯，友好返回到相應(yīng)層次，需要從用戶角度考慮返回的轉(zhuǎn)跳邏輯，不能出現(xiàn)死循環(huán)。并要注意返回后是否需要刷新頁面請求，比如支付完后返回訂單列表，最好刷新

展示上一步購買的訂單。

5、頁面刷新，刷新時的請求鏈接是否正確。

（1）下拉刷新是否仍然處于當(dāng)前頁面

（2）用戶主動點(diǎn)擊刷新按鈕是否仍然處于當(dāng)前頁面

（3）刷新頁面或者加載新內(nèi)容時頁面是否有抖動。

6、圖片適配，是否根據(jù)不同屏幕和分辨率做適配，高端機(jī)取雙倍尺寸的圖；是否對于2G網(wǎng)絡(luò)，或低端機(jī)單獨(dú)處理，不取高清圖或減少一些特效動畫效果；最好加上webp圖片的支持，可減少流量；在中低端機(jī)上考慮是否需要讓前端單獨(dú)處理，去掉復(fù)雜處理。并

對中低端機(jī)只取原圖，不取高清圖。注意：webp格式只對android有效，放在IOS上反而會起反作用。

7、是否要增加轉(zhuǎn)場動畫，loading動畫，點(diǎn)擊動畫等。以提升體驗(yàn)。需要在動畫效果和卡頓上衡量。

8、對于隱私模式，不存cookie，不開javascript執(zhí)行等，測試是否功能正常，或給出提示。

9、接口降級，接口異常時如何處理，前端要給出友好提示。

10、對于請求比較慢時，要有l(wèi)oading圖案，圖案在數(shù)據(jù)出來后要消失，且不能與轉(zhuǎn)場動畫等其它有沖突。

11、輸入框的校驗(yàn)：特殊字符顯示，過濾黑詞，js是否會執(zhí)行，一連串長字母是否會換行等。 比如只輸入空字符的處理。

12、弱網(wǎng)絡(luò)降級：處于2G/3G網(wǎng)絡(luò)省流量模式的一些特殊處理，比如2G網(wǎng)絡(luò)下測試，圖片多時是否要懶加載等。網(wǎng)絡(luò)狀況差的場景，可提示文案，但不能閃退。

13、網(wǎng)絡(luò)切換：從wifi切換到2G/3G網(wǎng)絡(luò)、從2G/3G網(wǎng)絡(luò)切換到wifi等

14、H5與Native切換：切換時登錄信息是否記錄、流程是否順暢、是否出現(xiàn)中斷閃退等問題。 注意驗(yàn)證 登錄信息是否能互通。 不能出現(xiàn)native已經(jīng)登錄，進(jìn)入h5后繼續(xù)讓登錄，實(shí)在技術(shù)實(shí)現(xiàn)不了的可toast提示用戶繼續(xù)登錄。

（1）若客戶端已登錄，那么進(jìn)入H5后仍然是登錄狀態(tài)。

（2）若客戶端未登錄，進(jìn)入H5，點(diǎn)擊對應(yīng)按鈕OR鏈接，如果需要登錄，須拉起native登錄。若取消登錄，是否可再次拉起登錄，或者停留在的頁面是否有對應(yīng)的登錄提示。 （注：本次測試過程中就發(fā)現(xiàn)，第一次點(diǎn)擊鏈接，可以拉起登錄，第二次卻不能）

15、Pad上測試需要注意：橫屏和豎屏下的顯示效果可能不同，還有橫屏換成豎屏、豎屏換成橫屏。注意橫豎屏切換時輸入框的不同。

16.返回功能

通過H5頁面（非手機(jī)自帶返回鍵）的返回功能鍵返回，可以返回到正確的頁面（上一級/退出h5）

點(diǎn)擊返回與back鍵，回退頁面是否是期望頁面

17.屏幕切換

橫屏豎屏相互切換，能適應(yīng)，布局不亂，或頁面只支持橫或豎屏限制

18.分辨率適配更好

建議采用響應(yīng)式設(shè)計（如：offerlist頁面大屏顯示3行，小屏顯示2行）

1）分辨率高（如720*1280，重點(diǎn)關(guān)注頁面背景是否完全撐開頁面，刷新是否有抖動）、分辨率低（如320*480，重點(diǎn)關(guān)注下彈框樣式和文案折行）

2）android4.2版本以上的設(shè)備隨便測試一兩臺即可

3）蘋果近幾年常用的系統(tǒng)版本手機(jī)

19.頁面打開形式

建議頁面在手機(jī)上從list點(diǎn)擊進(jìn)入detail頁面，要在原窗口打開，通過頁面頁頭返回按鈕返回，不需要通過手機(jī)返回鍵返回，交互體驗(yàn)好

20.頁面請求驗(yàn)證

關(guān)注頁面請求，是否會有多余的請求，或者請求后有多余的數(shù)據(jù)返回，盡量精簡，否則會浪費(fèi)流量。

21.圖片適配

圖片適配測試，根據(jù)不同屏幕和分辨率做適配，以及適配后的清晰度，高端機(jī)取雙倍尺寸的圖

22.用瀏覽器chrome f12進(jìn)行測試

H5的頁面在PC端也是能訪問的，chrome對H5支持最好，功能的測試可以在PC端chrome下先測試，也可以在手機(jī)上直接測試，這個看個人習(xí)慣。（ie系列**ie8,及以下都支持的不好，這個可以與PD確認(rèn)H5頁面在這些PC瀏覽器上不支持）

23、滑動、定位

手指滑動是否流暢，手指點(diǎn)擊時焦點(diǎn)是否定位正確，不同機(jī)型會不一樣。焦點(diǎn)定位點(diǎn)擊是靈敏。

24、對于類似公司名稱、offer名稱長度的問題，在手機(jī)上最好能根據(jù)屏幕大小自適應(yīng)而不是截斷，因?yàn)槭謾C(jī)上是不會有tips可以看的。截斷導(dǎo)致大屏幕下也只能顯示幾個字，交互不好

25、手機(jī)測試要特別關(guān)注交互是否友好，與PC機(jī)的事件模型不一樣，可能會導(dǎo)致一些體驗(yàn)的問題，比如：彈出層的點(diǎn)擊，是否會穿透，影響到彈出層下面的頁面。

26、對于一些浮層做的頁面，例如地圖、產(chǎn)品分類等浮層，注意拖動后是否可以看到它下面的頁面，拖動后邊緣是否有留白

27、手機(jī)端的瀏覽器測試的時候也要清除一下緩存，因?yàn)閳D片和文件會被緩存下來，所以首次訪問和二次訪問體驗(yàn)不一樣。例如UC瀏覽器的清楚緩存在設(shè)置-》系統(tǒng)設(shè)置-》基本設(shè)置--》清除記錄中。

28.關(guān)注頁面首屏加載時間。

29、文件導(dǎo)入導(dǎo)出：

1、模板下載功能：

　　一般導(dǎo)出導(dǎo)出功能會有一個模板下載功能，此功能需要檢查模板是否可以正常下載，正常打開，檢查Excel模板文件和網(wǎng)站中的數(shù)據(jù)字段是否一致即可。

2、文件導(dǎo)入功能

1) 錯誤提示，

　　如果導(dǎo)入的excel表格中中某一行或者某一字段格式不對或者數(shù)據(jù)為空，是否可以正常導(dǎo)入正確部分的數(shù)據(jù)，對錯誤的數(shù)據(jù)進(jìn)行提示。

2）導(dǎo)入其他格式的文件

　　當(dāng)導(dǎo)入的文件格式不正確時，系統(tǒng)是否做出正確的判斷，并給出對應(yīng)的錯誤提示。

3）重復(fù)導(dǎo)入相同的文件

　　重復(fù)導(dǎo)入相同的文件是否可以導(dǎo)入成功，如果可以導(dǎo)入成功，數(shù)據(jù)將如何處理，比如覆蓋或者忽略？

4）不使用下載的模板，自己新建excel導(dǎo)入

　　自己手動新建excel或者對其他excel進(jìn)行修改，使excel格式和模板一致，這種情況下數(shù)據(jù)填寫正確的話，應(yīng)可以正確的導(dǎo)入系統(tǒng)。

5）表頭檢查：包括去掉、修改、新增列、列之間切換等

3、文件導(dǎo)出功能

1）導(dǎo)出的excel表格的格式檢查，主要檢查導(dǎo)出的excel格式是否符合預(yù)期，各字段是否正確。另外導(dǎo)出的excel文件名是否有要求。如果有要求，是否正確。

2）數(shù)據(jù)檢查，導(dǎo)出全部數(shù)據(jù)功能是否正確，到處部分?jǐn)?shù)據(jù)功能是否正確，選擇數(shù)據(jù)為空時是否可以導(dǎo)出。導(dǎo)出的數(shù)據(jù)內(nèi)容是否與網(wǎng)頁中的內(nèi)容一致。

二.適配測試

1）H5機(jī)型適配

在項(xiàng)目測試計劃給出時，確認(rèn)是否要確定測試機(jī)基線，即是否要以幾款機(jī)型作為最低適配需求。可參考目前應(yīng)用市場占有分布。

操作系統(tǒng)適配范圍：ios 8-10固件版本的iphone必須覆蓋，ios7可選覆蓋，android 4.4-6.x必須覆蓋，4.0-4.3可選覆蓋，4.0以下可以不care。像小米，魅族這種自定義os版本的機(jī)子，其實(shí)底層也對應(yīng)著標(biāo)準(zhǔn)的谷歌os系統(tǒng)版本。

對于ios, android大版本一定要覆蓋，對于系統(tǒng)版本，先看大版本占用情況，再選擇大版本中占用率較高的小版本。如4.3, 5.0大版本中選幾個占用率較高的小版本測試。常用的有：ios：8.x.x, 9.3.5；android: 4.3.1, 4.4.2 等。

機(jī)型品牌適配范圍：參考集團(tuán)內(nèi)后端統(tǒng)計的top機(jī)型。對于ios，要覆蓋iphone 6/6s/6p, iphone 7,iphone5等。

對于android,如三星、小米、華為，htc, lenovo，中興，魅族，阿里云等。屌絲機(jī)型 華為，中興，vivo，oppo,魅族占有率很高，所以這幾個屌絲機(jī)型一定要覆蓋到。三星上的H5問題防不勝防，相當(dāng)極品。小米近一兩年的機(jī)型適配問題不想2s那么多了。

三星常見的H5適配問題：css加載不出來，控件操作無響應(yīng)。小米常見的H5適配問題是UI，比如button會把這個按鈕四個角冗余顯示，tab切換異常。 實(shí)時滾動信息時卡死等。

對于有些手機(jī)廠商有自已定制操作系統(tǒng)，要單獨(dú)適配，如小米，魅族。注意三星的假系統(tǒng)版本。

在選擇機(jī)子時，要兼顧屏幕尺寸和分辨率。覆蓋到主流的屏幕尺寸和分辨率，并組合一下，現(xiàn)在主流是1920大屏，但一定要找?guī)卓钚∑潦謾C(jī)覆蓋。注意三星的

適配時不能光選性能好的機(jī)子，一定要適配幾款中低端機(jī)。華為和中興的國產(chǎn)機(jī)，可選擇適配一下。

2）手機(jī)瀏覽器適配

需要覆蓋：自帶瀏覽器（默認(rèn)的瀏覽器內(nèi)核）為主，有足夠時間時再覆蓋chrome,UC瀏覽器（最新版）和QQ瀏覽器（最新版）。

3）容易出現(xiàn)適配問題的機(jī)型：

三星i9100G，對于按鈕樣式，輸入框的區(qū)域要重點(diǎn)關(guān)注。

android 5.X 谷歌原生的nenux系列。

大屏高分辨率手機(jī)要適配一款，如三星galaxy note4

對于支持webp的機(jī)子要測試。如三星galaxy note2,或三星s3

4）工具

1.市面上各種云測平臺，一般都可以單獨(dú)測試H5適配。

2.可借助瀏覽器的開發(fā)者模式。

三.性能測試

1) 需要關(guān)注的性能指標(biāo)：

頁面加載時間/頁面大小/頁面請求數(shù)/ DomReady時間/圖片等資源文件大小/請求錯誤數(shù)

2) 各種云測平臺

3) 其他性能測試工具：dyna trace，yslow，page speed，firebug等等

4）免費(fèi)公共測試web：

http://www.webpagetest.org/ 免費(fèi)測試。

2）翻頁測試：

當(dāng)遇到翻頁加載的頁面，需要注意內(nèi)容為1頁或者多頁的情況。

（1）數(shù)據(jù)分頁加載時，注意后續(xù)頁面請求數(shù)據(jù)的正確。

注：這個需要注意在快速操作場景中，請求頁數(shù)是不是依次遞增，快速操作（如第一頁尚未loading出來的時候仍然繼續(xù)上拉操作）時是否發(fā)出去對應(yīng)的請求了。

四.安全測試

1）明確投放渠道都有哪些 ：

如獨(dú)客、主客、wap，是否對未投放渠道做了限制，直接通過url請求是否攔截等

2）評估是否需要接入集團(tuán)安全，如mtee黑白名單等

3）是否需要接入支付寶實(shí)名認(rèn)證：

涉及到金錢相關(guān)，如天貓積分，紅包等，為了防刷，一般都需要判斷是否支付寶實(shí)名認(rèn)證

4）是否接入windvane，所有請求通過native發(fā)出

1)、從代碼層級分析html5新特性帶來的安全漏洞。常見的：

通過formaction屬性進(jìn)行XSS

通過autofocus屬性執(zhí)行本身的focus事件

多個autofocus競爭焦點(diǎn)來觸發(fā)blur事件

通過的poster屬性執(zhí)行Javascript

通過autofocus觸發(fā)的onscroll執(zhí)行Javascript

具體原理和其他漏洞可見http://html5sec.org/#html5

2)、從手機(jī)用戶角度列舉手機(jī)網(wǎng)頁存在的一些安全問題（非測試角度）,大致有以下：

惡意url。包括html鏈接、短鏈接、短信中的url、掃二維碼產(chǎn)生的url

通過XSS竊取數(shù)據(jù)庫內(nèi)容。各種XSS可參見http://html5sec.org/#html5

自BeEF的攻擊（BeEF有點(diǎn)類似fiddler，具體可見

https://github.com/beefproject/beef）。包括cookie竊取、披露設(shè)備地理位置、打騷擾電話、不需要的下載

訪問不安全的web服務(wù)。

竊聽移動網(wǎng)站流量。

五. H5上線后回歸

H5涉及到的各種資源文件，在測試環(huán)境（包括預(yù)發(fā)環(huán)境），一般都是內(nèi)域，正式上線，RD童鞋有把資源文件（或者說url中的鏈接忘了修改）漏發(fā)的風(fēng)險，所以上線后一定要用外網(wǎng)環(huán)境再快速回歸下。最簡單的就是用自己的4G網(wǎng)絡(luò)回歸跟蹤線上。

六.H5測試與PC端測試不同的點(diǎn)

1、通過H5網(wǎng)頁（非手機(jī)的返回功能）的返回功能可以返回，不會出現(xiàn)無法返回的情況。

2、橫屏豎屏相互切換，能自適應(yīng)，并且布局不會亂掉；

3、為能在不同分辨率的手機(jī)上能更好的展示，建議采用響應(yīng)式設(shè)計（如：offerlist頁面在大屏?xí)r顯示3行，小屏?xí)r顯示2行）

4、在手機(jī)上從list點(diǎn)擊進(jìn)入detail頁面，要在原窗口打開，這樣可以通過頁頭的返回按鈕返回，而不需要通過手機(jī)的返回鍵返回，這樣交互上更友好。

5、關(guān)注頁面請求，是否會有多余的請求，或者請求后有多余的數(shù)據(jù)返回，盡量精簡，否則會浪費(fèi)流量。

6、圖片適配測試，根據(jù)不同屏幕和分辨率做適配，以及適配后的清晰度，高端機(jī)取雙倍尺寸的圖

7、H5的頁面在PC端也是能訪問的，chrome對H5支持最好，功能的測試可以在PC端chrome下先測試，也可以在手機(jī)上直接測試，這個看個人習(xí)慣。（ie系列包括ie8,及以下都支持的不好）

8、手指滑動是否流暢，手指點(diǎn)擊時焦點(diǎn)是否定位正確，不同機(jī)型會不一樣。焦點(diǎn)點(diǎn)擊是否靈敏。

9、對于類似公司名稱、offer名稱長度的問題，在手機(jī)上最好能根據(jù)屏幕大小自適應(yīng)而不是截斷，因?yàn)槭謾C(jī)上是不會有tips可以看的。截斷導(dǎo)致大屏幕下也只能顯示幾個字，交互不好

10、手機(jī)測試要特別關(guān)注交互是否友好，與PC機(jī)的事件模型不一樣，可能會導(dǎo)致一些體驗(yàn)的問題，比如：彈出層的點(diǎn)擊，是否會穿透，影響到彈出層下面的頁面。

11、對于一些浮層做的頁面，例如地圖、產(chǎn)品分類等浮層，注意拖動后是否可以看到它下面的頁面，拖動后邊緣是否有留白

12、手機(jī)端的瀏覽器測試的時候也要清除一下緩存，因?yàn)閳D片和文件會被緩存下來，所以首次訪問和二次訪問體驗(yàn)不一樣。例如UC瀏覽器的清楚緩存在設(shè)置-》系統(tǒng)設(shè)置-》基本設(shè)置–》清除記錄中。

七、H5各種測試總結(jié)：

（1）需求設(shè)計測試：

盡早的了解需求熟悉需求、參與需求評審與設(shè)計，通過原型圖以及真實(shí)用戶體驗(yàn)和用戶習(xí)慣來檢查需求的合理性以及是否有更好地實(shí)現(xiàn)方法等。

這樣能把問題發(fā)現(xiàn)在源頭，減少后期因需求變更引起開發(fā)和測試的迭代成本。

在需求階段即介入測試功能點(diǎn)的編寫和記錄，也符合盡早介入測試的原則。

（2）接口測試

根據(jù)開發(fā)同學(xué)提供的接口文檔，可以通過Jmeter 等工具進(jìn)行測試。

主要關(guān)注點(diǎn)為：

接口返回的數(shù)據(jù)期望的是否一致；

接口入?yún)⒌倪吔缰敌ｒ?yàn) ；

檢查接口的容錯性 比如對于傳輸數(shù)據(jù)類型錯誤能否處理等，整型的輸入小數(shù)、中英文等；

接口的性能情況，調(diào)用接口數(shù)據(jù)返回的時間，接口反應(yīng)慢肯定影響用戶體驗(yàn)。

接口的安全性：接口部分敏感信息是否加密傳輸?shù)?/span>

mtop接口返回處理：

發(fā)現(xiàn)這個出現(xiàn)問題的地方有很多，但是只要有意識的去處理，就很容易避免，主要是有以下幾種情況：

（1）請求成功，且返回有數(shù)據(jù)，測試mtop接口返回數(shù)據(jù)的各種場景。

（2）請求成功，但data內(nèi)容為空。

（3）請求接口異常，出現(xiàn)ERR_SID_INVALID::SESSION過期，拉起登錄。

（4）請求接口發(fā)生除C中提到的異常之外的異常，通常可歸結(jié)為一類進(jìn)行處理。

（3）功能測試

測試重點(diǎn)，根據(jù)業(yè)務(wù)邏輯和功能進(jìn)行測試，主要是可用性。

（4）用戶界面測試

根據(jù)測試和評審修改過的UED（用戶體驗(yàn)設(shè)計），測試開發(fā)遞交的測試包。

風(fēng)格、樣式、顏色是否協(xié)調(diào)，不僅包括HTML5本身，因?yàn)镠TML5會嵌入App里面，所以要考慮 H5 的風(fēng)格、樣式、顏色是否與app本身協(xié)同，不至于格格不入，包括用戶習(xí)慣等也最好保持一致或相近，最好在設(shè)計初期就有顏色、按鈕、圖片、背景、邊框等詳細(xì)規(guī)劃和統(tǒng)一。

但是正是由于H5的可移植性，同一服務(wù)會嵌入到N家客戶的產(chǎn)品中，難以與各家都完全統(tǒng)一，所以在設(shè)計中就應(yīng)該考慮這些問題。

（5） 兼容性測試

手機(jī)HTML5主要應(yīng)用是嵌入在app或者微信公眾號里面，所以兼容性主要是iOS、Android 2個系統(tǒng)各種主流機(jī)型的適配。

A、手機(jī)屏幕大小

B、主流手機(jī)機(jī)型

C、手機(jī)操作系統(tǒng)，iOS和Android各版本

D、瀏覽器：系統(tǒng)自帶瀏覽器和主流瀏覽器

（6）網(wǎng)絡(luò)測試

由于H5系統(tǒng)很多是云服務(wù)，所有響應(yīng)速度普遍較慢。我們測試的時候一般會用Wifi，速度會相對可觀點(diǎn)。

我們應(yīng)該觀察在4G、3G、甚至2G的網(wǎng)下，弱網(wǎng)測試，看響應(yīng)時間是否在忍受范圍內(nèi)。

時間過長的話，需要提示優(yōu)化代碼做改善。

（7） 安全測試

由于我們對應(yīng)的產(chǎn)品部利用HTML5把一些通用功能做成了云服務(wù)，可以嵌入多家客戶的App，根據(jù)渠道劃分，所以安全性顯得尤為重要。

（8） 性能測試

隨著對接客戶的增加，對服務(wù)的性能方面的要求也會增加。對于云服務(wù)的模塊需要做性能測試。

原文鏈接：https://blog.csdn.net/weixin_42359436/article/details/82733078

關(guān)于我們：

Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū)    為您提供：H5開發(fā)，小程序開發(fā)，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設(shè)計、APP開發(fā)外包，UI設(shè)計，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)