?近期接觸了關(guān)于H5頁面和小程序的測試。H5，也就是“HTML5”，指“HTML”的第5個版本，HTML5也是一種網(wǎng)頁技術(shù)，包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，H5本質(zhì)上可以理解為是一個網(wǎng)頁，依賴的外殼主要是瀏覽器；微信小程序，是一種不需要下載安裝即可使用的應(yīng)用。對H5頁面和小程序的一些通用測試方法進(jìn)行總結(jié)，在此分享給大家：

運行環(huán)境區(qū)分1.客戶端運行環(huán)境：

H5是網(wǎng)頁，運行環(huán)境主要依賴于瀏覽器；

而微信小程序運行環(huán)境本身就屬于計算機(jī)程序，再配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，進(jìn)而大幅提升了小程序的流暢度及其性能。


(資料圖片僅供參考)

2.服務(wù)器配置：

由于小程序的性能比H5高些，所以服務(wù)器的配置要求上來說，小程序的要求要比H5更高一些。

H5優(yōu)勢與劣勢：

優(yōu)勢

劣勢

H5可以跨平臺，開發(fā)成本相對較低

H5可隨時上線，只需更新版本，適合快速迭代

但H5目前基本無法將數(shù)據(jù)存儲在本地，依賴實時性數(shù)據(jù)，網(wǎng)絡(luò)狀態(tài)不好的時候卡到哭

H5可以輕量的觸達(dá)用戶，提供更快捷的服務(wù)

但性能相對較低，影響用戶體驗

在微信入口或者瀏覽器上，用戶只需點開鏈接就可以獲取我們所提供的服務(wù)

但H5->的轉(zhuǎn)化強依賴于瀏覽器

H5功能驗證

（1）對于頁面中的返回，以及瀏覽器自帶的返回的測試。頁面中的返回要考慮業(yè)務(wù)邏輯，返回到相應(yīng)層次，需要從用戶角度返回的轉(zhuǎn)跳邏輯，不能出現(xiàn)死循環(huán)；并要注意返回后是否需要刷新頁面請求通過H5頁面（非手機(jī)自帶返回鍵）的返回功能鍵返回，可以返回到正確的頁面（上一級/退出H5）點擊返回與back鍵，回退頁面是否是期望頁面。

（2）橫豎屏切換后頁面能自適應(yīng)，不會出現(xiàn)布局散亂問題；或頁面是否限制了只支持橫或豎屏。

（3）在手機(jī)上從list列表點擊進(jìn)入detail詳情頁面是在原窗口打開。目的是這樣可以通過頁頭的返回按鈕返回，而不需要通過手機(jī)的返回鍵返回，交互表現(xiàn)更友好。

（4）關(guān)注頁面請求是否會有多余的請求，或者請求后有多余的數(shù)據(jù)返回。目的是精簡的內(nèi)容減少了流量的浪費。

（5）圖片適配測試。根據(jù)不同屏幕和分辨率做適配，以及適配后的清晰度，高端機(jī)取雙倍尺寸的圖--app兼容測試。H5的測試點可 詳見：接口測試、業(yè)務(wù)測試（功能測試）、UI界面測試、兼容性測試、權(quán)限測試、安全測試、性能測試、數(shù)據(jù)埋點測試（???你對 “數(shù)據(jù)埋點測試” 知曉多少？??）

小程序測試技術(shù)

小程序的有這種特點：（1）類似WEB，但非HTML5；（2）即用即得；（3）擁有離線能力；（4）基于微信跨平臺；（5）媲美原生操作體驗

小程序的架構(gòu)：微信小程序的框架包含兩部分：一部分是View視圖層（為了渲染頁面結(jié)構(gòu)，一般用WebView渲染），另一部分是AppSerive 邏輯層（用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用，該層是使用JSCore運行），這兩部分是分別在2個線程里進(jìn)行運行，是通過系統(tǒng)層的JSBrigdage進(jìn)行通信，AppSerive邏輯層把數(shù)據(jù)變化通知到WebView渲染，觸發(fā)WebView渲染頁面更新，WebView渲染把觸發(fā)的事件通知到App Serive邏輯層進(jìn)行業(yè)務(wù)處理。

小程序的測試點

小程序的測試點可 詳見：??微信小程序測試點??

除此上面列出的小程序測試點，還補充一下幾點：

性能測試：除了（1）頁面的白屏?xí)r間；（2）首屏?xí)r間；（3）資源占用；（4）頁面渲染時間；還需要考慮耗電量、滑動幀率的測試

安全測試：危險賬號授權(quán)、與小程序的app賬號關(guān)聯(lián)，以及接口測試中涉及傳遞的數(shù)據(jù)的安全性；

其他補充事項：（1）小程序目前不支持分享至朋友圈，但是可以用圖片的方式分享至朋友圈；（2）小程序的添加刪除功能；（3）微信端取消授權(quán)登錄；（4）小程序升級更新（一般情況是強制升級更新）；（5）是否支持離線操作；

本文轉(zhuǎn)載自微信公眾號「BeeTester視野」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系聯(lián)系【BeeTester視野】公眾號作者。

標(biāo)簽： HTML