H5頁面測試app測試

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、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展現；圖片：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中的連接忘了修改）漏發的風險，因此上線後必定要用外網環境再快速回歸下；