H5介紹與測試設計
近期的項目中接觸的基本都爲H5的測試工做，從項目初期評審到測試工做的完成過程當中，遇到了不少問題是與APP測試方法不太相同的地方，在此但願總結測試過程遇到的問題及新思路給以後會接觸到H5測試的同窗。html
這篇文章會講解如下幾個內容：前端
1.移動端開發模式android
2.HTML5概念ios
3.H五、APP、小程序對比web
4.H5測試設計chrome
5.測試工具數據庫
1、移動端開發模式json
開篇先講解一下目前移動端經常使用的三種開發模式，主要有原生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，咱們經常使用的淘寶、京東、微信都是這種開發模式。小程序
2、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及以上)
3、H五、APP、小程序對比
簡單用表格羅列了移動端主要技術類型的介紹與優劣：
針對其優劣勢以及適用的範圍，咱們須要針對不一樣類型來定製不一樣的測試方案。
4、H5測試設計
從上面的不一樣點表格中，針對H5方案來說，咱們能夠從APP的測試方案借鑑，但也有不一樣之處，咱們來看一下APP的測試要點：
APP測試要點基本爲上圖的十個，大體講下每一個要點是怎麼保障APP的測試的完整性。
安裝卸載測試：確認系統能正常安裝應用及使用，不須要時卸載及數據清除；
安全測試：防範隱私泄露、密碼加密及傳輸安全、權限的合理開放、數據庫安全、通訊安全以及安裝包反編譯；
接口測試：先後端數據一致校驗、接口異常狀態及前端展現、數據的加密傳輸、業務功能覆蓋；
交互與異常測試：同級/上下級頁面的頁面交互及數據加載、網絡異常、數據異常先後端展現及狀態；
性能測試、耗電量&流量測試：內存、CPU、流量消耗、耗電量、冷熱啓動速度、圖片資源大小；
界面易用性測試：符合用戶習慣；
UI測試：頁面顏色搭配、控件擺放位置及兼容性；
功能測試：需求文檔已有及隱含的需求功能可正常使用；
兼容性測試：網絡、機型、系統、分辨率、硬件、同類軟件、新舊數據；
在上面的各項測試內容中，H5頁面大部分測試用例設計與APP一致，因其不用安裝與卸載，這方面的測試不須要關注。在這裏，須要講一下我在項目中對H5頁面測試踩過的坑和總結內容。
1、交互與異常測試，須要特別關注頁面的跳轉、返回鍵的問題，由於H5的設計與APP不一樣，沒法指定特定要跳轉的頁面，好比在一個購買理財產品的場景中，通常會從產品詳情頁-購買頁面-收銀臺-支付結果頁完成整個支付流程，APP中在收銀臺頁面點擊返回的操做可設置跳轉回到產品詳情頁如1-2-3-1，而H5沒法指定，必須按照本來1-2-3-2-1的順序跳轉，致使了在返回購買頁面時，訂單數據沒法加載頁面一直處於loading的狀態，因此在涉及到在這塊的測試用例須要補充場景中間部分的數據走向及頁面加載問題。另還須要梳理H5頁面佈局的控件關係。
2、兼容性測試，除了系統、機型、分辨率之外，還須要測試瀏覽器（qq、uc、safari、chrome等）以及微信不一樣版本，系統這一塊，在我本身測試的項目中瞭解到的是，IOS系統低於8.3或Android版本低於4.3的條件下，H5頁面佈局是亂的，具體緣由是由於框架不支持，沒法針對性的去作適配，因此在開發輸出技術開發文檔時，就應該確認好使用框架最低支持的系統版本。這裏提一下微信版本的問題，6.6版本發佈後，頁面新增了前進與後退，對於定製輸入框會出現沒法拉起的狀況。
（微信6.6） （微信6.6如下 ）
（某金融產品持有頁UI） （交易密碼框沒法展現）
3、性能測試，最最讓人頭大的是H5的性能，每次打開頁面加載時間會很長，致使空白時間較長，出現白屏的現象，其緣由是在打開H5頁面時實現啓動瀏覽器內核→加載完基礎框架→加載數據後才完成整個頁面的展現，這個過程比native長了不少，解決性能問題的思路大體上有幾點：1.初始化同時先請求數據 2.預加載與預緩存 3.腳本執行順序 4.性能數據打點 5.頁面圖片資源壓縮或部分採用本地存儲
另外關於H5的渲染優化問題，能夠參考https://mp.weixin.qq.com/s/0OR4HJQSDq7nEFUAaX1x5A 這篇文章，其餘星標的測試內容大體可參考APP的測試設計方案。
5、測試使用工具
在接口測試及單功能測試時，爲了造測試數據，咱們須要用到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 ，這個還未開放，開放後使用了再和你們分享~
- 1. H5介紹與測試設計
- 2. VTS測試介紹
- 3. API測試介紹
- 4. ETL測試－介紹
- 5. 測試計劃以及ACC介紹
- 6. 【單元測試】Mockito與PowerMock介紹
- 7. PCIe信號簡單介紹與測試
- 8. nodejs的介紹與安裝測試
- 9. 慢DOS-slowhttp介紹與測試
- 10. UI設計介紹
- 更多相關文章...
- • Web 創建設計 - 網站建設指南
- • Maven 構建 & 項目測試 - Maven教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • IntelliJ IDEA代碼格式化設置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. H5介紹與測試設計
- 2. VTS測試介紹
- 3. API測試介紹
- 4. ETL測試－介紹
- 5. 測試計劃以及ACC介紹
- 6. 【單元測試】Mockito與PowerMock介紹
- 7. PCIe信號簡單介紹與測試
- 8. nodejs的介紹與安裝測試
- 9. 慢DOS-slowhttp介紹與測試
- 10. UI設計介紹