前言
在最近幾個項目中,小編接觸了較多關於H5頁面的測試,H5頁面的測試除了業務邏輯功能測試外,其他部分的測試方法基本是可以通用的,在此對H5頁面的一些通用測試方法進行總結分享給大家。
H5頁面介紹
1. H5頁面H5即 HTML5,是最新的 Web 端開發語言版本,大多數手機 APP 頁面會用 H5 實現,包括 PC Web 站點也會用它開發實現。所以 Web 的通用測試點和方法基本都可以適用於它。H5其實就是:移動端Web頁面。H5應用在很多地方,如APP的活動專題頁面、新聞頁面、微信公眾號文章頁面等都屬於H5頁面,在PC或者手機瀏覽器都可以直接訪問H5頁面。H5作為移動端的web頁面,有它自身的優勢,如它可以跨平台使用,開發成本相對較低;可隨時上線就更新版本,適合快速迭代;可以輕量的觸達用戶,提供更便捷的服務。因此在項目中,對於上線后迭代更新較快的頁面,通常利用H5頁面來實現。
2. 技術實現從廣義上來講,HTML5是包括HTML、CSS和JavaScript在內的一套技術組合。
HTML:網頁的具體內容和結構;
CSS:網頁的樣式(美化網頁最重要的一塊);
JavaScript:網頁的交互效果,比如對用戶鼠標事件作出響應;它希望能夠減少瀏覽器對於需要插件的豐富性網絡應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網絡應用的標准集。
3. 如何識別H5從視覺效果上看,H5頁面與APP native頁面是一樣的,因此測試時經常會問到一個問題,這個頁面是不是H5頁面?如何識別呢?在此提供以下幾個方法:
1)基本上只要對那個view長按,然后看是不是有反應,比如手機震動(Android)、或者出現文字選擇粘貼(Android/iOS),那么就是H5頁面;
2)橫屏豎屏相互切換,能自適應,並且布局不會亂掉,通常情況也屬於H5頁面;
3)H5頁面在PC端也是能訪問的,chrome對H5支持最好,功能的測試可以在PC端chrome下先測試,也可以在手機上直接測試。
H5頁面測試
1. 環境配置一般的測試流程是H5頁面開發完成后,先在測試環境進行測試,測試通過再部署到線上環境,所以測試階段要先進行測試環境配置。
2. 測試關注點
2.1 業務邏輯測試業務邏輯相關的測試,視具體業務的需求而定;
2.2 頁面元素UI測試頁面UI主要包括文字、圖片以及頁面布局等方面測試;
文字:風格一致、錯別字、標點符號統一、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展示;
圖片:1)靜態:大小、風格;2)動態:大小、風格、准確性動態圖、轉場動畫,loading動畫,點擊動畫等;3)刷新頁面圖片是否正常展示;4)
圖片適配:根據不同屏幕和分辨率進行適配;頁面布局:頁面文字圖片是否能自適應屏幕、整體布局是否合理等;
內嵌鏈接:空鏈接、刷新鏈接數據是否展示;鏈接跳轉是否正確;
2.3 頁面操作
1)刷新與返回頁面刷新是否仍然處於當前頁面;用戶主動點擊刷新按鈕是否仍然處於當前頁面;點擊返回與back鍵,回退頁面是否是期望頁面(安卓物理按鍵返回;iOS左滑返回,考慮左滑一半松手,自動回到H5頁面是否正常加載的情況);
2)翻頁遇到翻頁加載的頁面,需要注意內容為一頁或者多頁的情況;數據分頁加載時,注意后續頁面請求數據的正確;ps:注意在快速操作場景中,請求頁數是不是依次遞增,快速操作(如第一頁尚未loading出來的時候仍然繼續上拉操作)時是否發出去對應的請求了。
3)彈窗出現/關閉手機測試要特別關注交互是否友好,可能會導致一些體驗的問題,比如:彈出層的點擊,是否會穿透,影響到彈出層下面的頁面;
4)浮層頁面對於一些浮層做的頁面,例如地圖、產品分類等浮層,注意拖動后是否可以看到它下面的頁面,拖動后邊緣是否有留白;
5)頁面提示弱網絡下,數據加載較慢,是否有對應的loading提示;接口獲取異常時,提示是否合理;刷新頁面或者加載新內容時頁面是否有抖動;
6)手機操作相關鎖屏之后展示頁面;退到后台,再重新呼出在前台展示;
2.4 接口測試
1)接口返回處理:請求成功,且返回有數據,測試接口返回數據的各種場景-接口返回的數據期望的是否一致;接口入參的邊界值校驗;檢查接口的容錯性,如對於傳輸數據類型錯誤能否處理等,整型的輸入小數、中英文等;請求成功,但data內容為空;請求接口異常時,頁面處理;
2)接口性能測試:
頁面加載時間:關注頁面首屏加載時間;調用接口數據返回的時間,速度過慢會影響用戶體驗;
資源相關:頁面中有圖片的話,盡量縮小圖片;資源是否壓縮、是否通過CDN加載。
服務端並發性能:用戶量過多時,服務器性能是否受到影響;
內存:反復訪問,檢查是否占用大量內存;
流量消耗:對於一些不會變化的圖片,如游戲動畫效果相關圖片,不需要每次都請求的東西,做本地緩存;數據較多時是否做了分頁加載。
2.5 網絡測試
網絡環境:WiFi、4G、3G、2G;
網絡異常:弱網、斷網;網絡切換;
2.6 適配測試H5頁面需要適配的內容主要有:
圖片高清適配;字體大小適配;頁面布局寬度適配;
橫豎屏適配;考慮適配因素:對不同屏幕尺寸和分辨率的機型進行適配;
不同平台iOS和安卓進行適配;
屏幕橫豎屏適配;
日夜間模式適配;深色淺色模式適配(iOS13系統);
2.7 安全測試明確投放渠道都有哪些,是否對未投放渠道做了限制,直接通過url請求是否攔截等;接口部分敏感信息是否加密傳輸等;直接URL是否能打開;防止惡意攻擊;
2.8 埋點測試埋點數據檢查;
2.9 上線后驗證測試上線后:H5涉及到的各種資源文件,在測試環境(包括預發環境),一般都是內域,正式上線,RD童鞋有把資源文件(或者說url中的鏈接忘了修改)漏發的風險,所以上線后一定要用外網環境再快速回歸下;如何保證二次發布后有效更新;