近期的項目中接觸的基本都為H5的測試工作，從項目初期評審到測試工作的完成過程中，遇到了很多問題是與APP測試方法不太相同的地方，在此希望總結測試過程遇到的問題及新思路給之后會接觸到H5測試的同學。
這篇文章會講解以下幾個內容：
1.移動端開發模式
2.HTML5概念
3.H5、APP、小程序對比
4.H5測試設計
5.測試工具
一、移動端開發模式
開篇先講解一下目前移動端常用的三種開發模式，主要有原生APP（Native App）、混合APP（Hybrid App）、WEB APP三種。原生APP是針對IOS、Android等不同的手機操作系統要采用不同的語言和框架進行開發，下載一般通過應用商城，如ios的app store或android的google play。WEB APP由”HTML5雲網站+APP應用客戶端”兩部分構成，APP客戶端只需安裝應用的框架部份，數據從雲端通過網絡展現給用戶。而混合APP是介於web-app、native-app這兩者之間的app，以JS+Native兩者相互調用為主，從開發層面實現“一次開發，多處運行”的代碼復用，減少開發成本，目前市場上主流為混合APP，我們常用的淘寶、京東、微信都是這種開發模式。
二、HTML5概念
1.HTML5介紹
相信很多人都有看過企業招聘的易企秀，簡單的頁面帶着動畫和音樂，頁面架構簡單，這就是H5頁面，展現的位置可以在瀏覽器打開或是APP的某個入口，可以理解成是適用於移動設備上展示網頁的一種新形式，如果說要做推廣和活動，那么H5頁面是最經濟便捷的。當H5頁面植入app中的某個模塊，我們要怎么去分辨頁面是H5頁面的呢？我們以蝦米音樂為例，來看下最明顯有兩大特征：1）頂部有加載進度條 2）頁面布局沒有控件，呈一體展示（安卓設備-設置-開發者選項-顯示布局邊界）
2.H5與HTML5？
因H5適用范圍越來越廣泛，我們很容易將H5與HTML5混淆，H5是一個產品名詞，作為一種解決方案，包含HTML5的新標簽特性， 實現拖拽塗抹等功能以及前端開發的內容的一個集合，而HTML5則是一個技術名詞，是一種標准，用來描述網頁的一種語言 ，通過標簽、富文本等內容展示在瀏覽器中，HTML5是下一代標准，一般開發模式為HTML+CSS+JavaScript，HTML負責描述頁面結構，CSS調整頁面樣式，JavaScript則負責頁面事件處理。
3.HTML5進化階段
從1989年出現的HTML開始一直到目前流行的HTML5標准，共有幾個階段，如下圖所示：
HTML5在原來的HTML4上有什么新的改變呢？主要從以下幾個方面來講：
1.語法：①doctype聲明 直接<!doctype html>
②具有boolean值的屬性
③指定字符編碼 <meta charset="UTF-8"/>
④省略引號
2.元素：
新增：①結構元素：section、article、aside、header、hgroup、footer、nav、figure
②類型元素：input
③其他
廢除：①只有部分瀏覽器支持的元素
②不再使用frame框架
3.屬性：
新增： 表單屬性、鏈接屬性、其他屬性
具體的內容可看官方文檔，這里只是羅列最主要的新特性。
4.H5加載與調用
APP中如何展現H5頁面呢？主要是通過Webview控件來加載URL，具體的加載方法及調用可以看表格的內容：
安卓Webview控件的兩個版本：
①Webkit內核（android<4.4系統）
②chromium內核（android≥4.4系統）
*亮點：支持遠程調試、支持WebAudio、WebGL、WebRTC(android5.0及以上)
三、H5、APP、小程序對比
簡單用表格羅列了移動端主要技術類型的介紹與優劣：
針對其優劣勢以及適用的范圍，我們需要針對不同類型來定制不同的測試方案。
四、H5測試設計
從上面的不同點表格中，針對H5方案來講，我們可以從APP的測試方案借鑒，但也有不同之處，我們來看一下APP的測試要點：
APP測試要點基本為上圖的十個，大致講下每個要點是怎么保障APP的測試的完整性。
安裝卸載測試：確認系統能正常安裝應用及使用，不需要時卸載及數據清除；
安全測試：防范隱私泄露、密碼加密及傳輸安全、權限的合理開放、數據庫安全、通信安全以及安裝包反編譯；
接口測試：前后端數據一致校驗、接口異常狀態及前端展示、數據的加密傳輸、業務功能覆蓋；
交互與異常測試：同級/上下級頁面的頁面交互及數據加載、網絡異常、數據異常前后端展示及狀態；
性能測試、耗電量&流量測試：內存、CPU、流量消耗、耗電量、冷熱啟動速度、圖片資源大小；
界面易用性測試：符合用戶習慣；
UI測試：頁面顏色搭配、控件擺放位置及兼容性；
功能測試：需求文檔已有及隱含的需求功能可正常使用；
兼容性測試：網絡、機型、系統、分辨率、硬件、同類軟件、新舊數據；
在上面的各項測試內容中，H5頁面大部分測試用例設計與APP一致，因其不用安裝與卸載，這方面的測試不需要關注。在這里，需要講一下我在項目中對H5頁面測試踩過的坑和總結內容。
一、交互與異常測試，需要特別關注頁面的跳轉、返回鍵的問題，因為H5的設計與APP不同，無法指定特定要跳轉的頁面，比如在一個購買理財產品的場景中，一般會從產品詳情頁-購買頁面-收銀台-支付結果頁完成整個支付流程，APP中在收銀台頁面點擊返回的操作可設置跳轉回到產品詳情頁如1-2-3-1，而H5無法指定，必須按照原本1-2-3-2-1的順序跳轉，導致了在返回購買頁面時，訂單數據無法加載頁面一直處於loading的狀態，所以在涉及到在這塊的測試用例需要補充場景中間部分的數據走向及頁面加載問題。另還需要梳理H5頁面布局的控件關系。
二、兼容性測試，除了系統、機型、分辨率以外，還需要測試瀏覽器（qq、uc、safari、chrome等）以及微信不同版本，系統這一塊，在我自己測試的項目中了解到的是，IOS系統低於8.3或Android版本低於4.3的條件下，H5頁面布局是亂的，具體原因是因為框架不支持，無法針對性的去做適配，所以在開發輸出技術開發文檔時，就應該確認好使用框架最低支持的系統版本。這里提一下微信版本的問題，6.6版本發布后，頁面新增了前進與后退，對於定制輸入框會出現無法拉起的情況。
（微信6.6） （微信6.6以下 ）
（某金融產品持有頁UI） （交易密碼框無法展示）
三、性能測試，最最讓人頭大的是H5的性能，每次打開頁面加載時間會很長，導致空白時間較長，出現白屏的現象，其原因是在打開H5頁面時實現啟動瀏覽器內核→加載完基礎框架→加載數據后才完成整個頁面的展示，這個過程比native長了很多，解決性能問題的思路大致上有幾點：1.初始化同時先請求數據 2.預加載與預緩存 3.腳本執行順序 4.性能數據打點 5.頁面圖片資源壓縮或部分采用本地存儲
另外關於H5的渲染優化問題，可以參考https://mp.weixin.qq.com/s/0OR4HJQSDq7nEFUAaX1x5A 這篇文章，其他星標的測試內容大致可參考APP的測試設計方案。
五、測試使用工具
在接口測試及單功能測試時，為了造測試數據，我們需要用到charles來mock數據和檢查返回的數據，具體mock方法可網上搜索。除了這個以外，在接入客戶端測試之前，我們可以先使用chrome自帶的開發者工具（視圖-開發者-開發者工具）來進行測試，效果是一樣的，將H5鏈接放到瀏覽器中，打開開發者工具，我們就能看到所有接口和頁面的顯示。
以登錄接口為例，我們只需要點擊login接口，就會展示json code及message返回的內容，這里看以看到傳輸的重要內容是否有做加密，前端內容展示是否與服務端返回的一致。
這個工具還可以用來做兼容性的測試，在頁面左上角可調出，可以選擇手機、分辨率等，內置的設備還有很多可以編輯，這點上降低了我們手工去測試兼容性關於機型的測試。
我們都知道APP測試埋點在Android平台用androidsdk，iOS平台用xcode，那么H5頁面的埋點怎么做呢？這個工具依然可以實現，而且非常方便，只需要根據開發給到埋點的關鍵字段，點擊對應events.svc（不同H5頁面可能不一樣）便可看到埋點的信息，如下圖紅框的內容。
除了這個以外，我們可以在這個工具里面查找到H5頁面的元素，然后做自動化，光標移動到“登錄”按鈕，我們可以看到對應的div信息，然后通過appium去完成控件查找及一系列操作。
如果說是嵌入在微信中的H5，我們要做獲取元素的話,需要經過以下幾個步驟：
1.手機調試模式打開
2.用usb連接電腦
3.手機微信內發送debugx5.qq.com，點擊進入鏈接【該網址是微信提供X5真機調試，新版微信不支持x5調試】
4.設置信息，勾選“打開TBS內核Inspector調試功能”
5.打開chrome瀏覽器，url輸入： chrome://inspect/#devices ，打開我們的被測H5頁面，點擊inspect，之后打開的頁面查找元素與前面一致。
這里要補充說一下，就是打開這個頁面是需要代理的，如果沒有的話，頁面是會顯示空白的。
另騰訊TQM准備開放FAT的測試工具，具體介紹可看 https://mp.weixin.qq.com/s/zJJpwcqz2O_-OXGTBQJEjA ，這個還未開放，開放后使用了再和大家分享~