H5頁面測試總結

• 2019 年 10 月 28 日
• 筆記

前言

在最近幾個項目中，小編接觸了較多關於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鍵，回退頁面是否是期望頁面（Android物理按鍵返回；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和Android進行適配；螢幕橫豎屏適配；日夜間模式適配；深色淺色模式適配（iOS13系統）； 2.7 安全測試 明確投放渠道都有哪些，是否對未投放渠道做了限制，直接通過url請求是否攔截等； 介面部分敏感資訊是否加密傳輸等； 直接URL是否能打開； 防止惡意攻擊； 2.8 埋點測試 埋點數據檢查； 2.9 上線後驗證測試 上線後：H5涉及到的各種資源文件，在測試環境（包括預發環境），一般都是內域，正式上線，RD童鞋有把資源文件（或者說url中的鏈接忘了修改）漏發的風險，所以上線後一定要用外網環境再快速回歸下； 如何保證二次發布後有效更新； 以上是對項目中遇到的H5頁面的測試關注點的總結，基本都可以應用到移動端APP常見的H5頁面測試上，除此之外，如果有其他未考慮到的地方，歡迎大家留言補充~