H5如何測試高镐？

它跟安卓APP與IOS APP有什么樣的區(qū)別呢脉课？

我們以往的APP是使用原生系統(tǒng)內(nèi)核的目养，相當(dāng)于直接在系統(tǒng)上操作俩由，是我們傳統(tǒng)意義上的軟件，更加穩(wěn)定

H5的APP先得調(diào)用系統(tǒng)的瀏覽器內(nèi)核癌蚁，相當(dāng)于是在網(wǎng)頁中進(jìn)行操作幻梯，較原生APP穩(wěn)定性稍差兜畸，似乎還沒有百萬級(jí)用戶量的H5 APP

H5最大的優(yōu)點(diǎn)是可以跨平臺(tái)，開發(fā)容易碘梢，APP的話需要用ANDROID的語言和IOS的語言各自寫咬摇，H5只要開發(fā)一套

簡單的說：H5是基于web，native基于客戶端

H5測試應(yīng)該從哪些方面考慮煞躬？

1肛鹏、業(yè)務(wù)邏輯相關(guān)

除基本的功能測試之外，H5頁面的測試恩沛，需要關(guān)注以下幾點(diǎn)：

1.1 登陸

目前H5與native各個(gè)客戶端都做了互通在扰，所以大家在測試的時(shí)候要注意兩點(diǎn)：

A、若客戶端已登錄雷客，那么進(jìn)入H5后仍然是登錄狀態(tài)芒珠。

B、若客戶端未登錄搅裙，進(jìn)入H5皱卓，點(diǎn)擊對(duì)應(yīng)按鈕OR鏈接。

如果需要登錄呈宇，須拉起native登錄好爬；

若取消登錄，是否可再次拉起登錄甥啄，或者停留在的頁面是否有對(duì)應(yīng)的登錄提示存炮。

1.2 翻頁

遇到翻頁加載的頁面，需要注意內(nèi)容為1頁或者多頁的情況蜈漓。

A穆桂、數(shù)據(jù)分頁加載時(shí)，注意后續(xù)頁面請(qǐng)求數(shù)據(jù)的正確融虽。

ps：這個(gè)需要注意在快速操作場景中享完，請(qǐng)求頁數(shù)是不是依次遞增，快速操作

（如第一頁尚未loading出來的時(shí)候仍然繼續(xù)上拉操作）時(shí)是否發(fā)出去對(duì)應(yīng)的請(qǐng)求了有额。

1.3 刷新與返回

A般又、下拉刷新是否仍然處于當(dāng)前頁面

B、用戶主動(dòng)點(diǎn)擊刷新按鈕是否仍然處于當(dāng)前頁面

C巍佑、點(diǎn)擊返回與back鍵茴迁，回退頁面是否是期望頁面

1.4 數(shù)據(jù)的請(qǐng)求與返回：

A：提交了數(shù)據(jù)，數(shù)據(jù)是否正確的整理到后臺(tái)管理系統(tǒng)：結(jié)婚請(qǐng)?zhí)麃韰⒓踊槎Y的用戶萤衰，信息和號(hào)碼以及參與人數(shù)堕义，是否正確的提交后臺(tái)。

B：發(fā)送了請(qǐng)求脆栋，是否正確返回你要求的數(shù)據(jù)：比如我們常見的結(jié)婚請(qǐng)?zhí)肼簦欠裼惺盏交貓?zhí)洒擦？

2、H5適配相關(guān)

H5的適配其實(shí)比客戶端的相對(duì)來說怕膛，要少一些熟嫩，手機(jī)品牌之間的差異不大，所以不用太多關(guān)注嘉竟，最容易出現(xiàn)問題的是android2.3系統(tǒng)邦危，這個(gè)要特別關(guān)注下：

A、大屏（如720*1280舍扰，重點(diǎn)關(guān)注頁面背景是否完全撐開頁面，刷新是否有抖動(dòng)）希坚、小屏手機(jī)（如320*480边苹，重點(diǎn)關(guān)注下彈框樣式和文案折行）

B、android2.3裁僧、android4.X隨機(jī)找一個(gè)即可

C个束、ios5、ios6聊疲、ios7

D茬底、瀏覽器上也要能夠進(jìn)行完美展示

3、安全相關(guān)

3.1 明確投放渠道都有哪些获洲？

如獨(dú)客阱表、主客、wap贡珊，是否對(duì)未投放渠道做了限制最爬，直接通過url請(qǐng)求是否攔截等

3.2 是否需要接入支付寶實(shí)名認(rèn)證涉及到金錢相關(guān)。

如天貓積分门岔，紅包等爱致，為了防刷，一般都需要判斷是否支付寶實(shí)名認(rèn)證寒随。

以前我在的公司糠悯，有一次為了做推廣~發(fā)起了一個(gè)數(shù)錢的活動(dòng)，每次都是一毛一毛的數(shù)妻往，時(shí)間是15秒互艾，出現(xiàn)如下bug：

1)利用腳本數(shù)錢，15秒數(shù)出了100多~~-?最后出于推廣成本的考慮蒲讯，就把時(shí)間限制為5秒忘朝、

2）轉(zhuǎn)發(fā)一次就可以獎(jiǎng)勵(lì)多一次機(jī)會(huì)數(shù)錢，結(jié)果沒有做好限制判帮，朋友的朋友推廣局嘁，還是可以獎(jiǎng)勵(lì)次數(shù)溉箕。

4、體驗(yàn)相關(guān)

4.1 資源相關(guān)

A悦昵、頁面中有圖片的話肴茄，淘寶那邊建議圖片一般不大于50kb，本著一個(gè)原則但指，盡量縮小圖片寡痰。

B、資源是否壓縮棋凳、是否通過CDN加載拦坠。---CDN是什么？---就近地區(qū)訪問剩岳，服務(wù)速度會(huì)更快贞滨。

C、如何保證二次發(fā)布后有效更新拍棕。

D晓铆、對(duì)于類似公司名稱、offer名稱長度的問題绰播，在手機(jī)上最好能根據(jù)屏幕大小自適應(yīng)而不是截?cái)嘟驹耄驗(yàn)槭謾C(jī)上是不會(huì)有tips可以看的。

截?cái)鄬?dǎo)致大屏幕下也只能顯示幾個(gè)字蠢箩，交互不好

4.2 流量

A链蕊、對(duì)于一些不會(huì)變化的圖片，如游戲動(dòng)畫效果相關(guān)圖片忙芒，不需要每次都請(qǐng)求的東西示弓，做本地緩存。

B呵萨、數(shù)據(jù)較多時(shí)是否做了分頁加載奏属。

4.3 頁面展現(xiàn)時(shí)間

A、關(guān)注頁面首屏加載時(shí)間潮峦。

4.4 頁面提示

A囱皿、弱網(wǎng)絡(luò)下，數(shù)據(jù)加載較慢忱嘹，是否有對(duì)應(yīng)的loading提示

B嘱腥、接口獲取異常時(shí)，提示是否友好拘悦。

C齿兔、刷新頁面或者加載新內(nèi)容時(shí)頁面是否有抖動(dòng)。

4.5 手機(jī)操作相關(guān)

A、鎖屏之后展示頁面分苇。

B添诉、回退到后臺(tái)之后，重新呼出在前臺(tái)展示医寿。

C栏赴、手指滑動(dòng)是否流暢，手指點(diǎn)擊時(shí)焦點(diǎn)是否定位正確靖秩，不同機(jī)型會(huì)不一樣须眷。焦點(diǎn)地位后點(diǎn)擊是否靈敏。

4.6 弱網(wǎng)絡(luò)體驗(yàn)

5沟突、埋點(diǎn)數(shù)據(jù)檢查

與前端同學(xué)一起確認(rèn)埋點(diǎn)情況花颗。什么是埋點(diǎn)？

接下來你可能要問惠拭，H5測試的工具是什么捎稚？很簡單。

1：你手上的手機(jī)→直接掃描二維碼打開鏈接求橄，進(jìn)行測試

2：谷歌瀏覽器→調(diào)試成手機(jī)模式來進(jìn)行測試

下載谷歌瀏覽器，點(diǎn)擊瀏覽器右上角“三”圖標(biāo)葡公，在下拉選項(xiàng)中選擇→“更多工具”→“開發(fā)者工具”罐农，或者直接按F2；

這樣子就可以開始測試了催什！是不是超簡單涵亏？

Native App

傳統(tǒng)的原生App開發(fā)模式，android基于Java語言蒲凶，底層調(diào)用Goolge提供的API气筋，IOS基于Objective c或Swift，底層調(diào)用Apple官方提供的Api

優(yōu)點(diǎn)：

直接依托于操作系統(tǒng),交互性最強(qiáng),性能最好

功能最為強(qiáng)大,特別是在與系統(tǒng)交互中,幾乎所有功能都能實(shí)現(xiàn)

缺點(diǎn) :

開發(fā)成本高,無法跨平臺(tái),不同平臺(tái)Android和iOS上都要各自獨(dú)立開發(fā)

門檻較高,原生人員有一定的入門門檻,相比廣大的前端人員而言,較少 更新緩慢,特別是發(fā)布應(yīng)用商店后,需要等到審核周期 維護(hù)成本高

Web App

即移動(dòng)端的網(wǎng)站,將頁面部署在服務(wù)器上,然后用戶使用各大瀏覽器訪問,不是獨(dú)立APP,無法安裝和發(fā)布旋圆，類似于現(xiàn)在所說的輕應(yīng)用

優(yōu)點(diǎn)：

開發(fā)成本低,可以跨平臺(tái),調(diào)試方便

維護(hù)成本低 更新無需通知用戶宠默，不需要手動(dòng)升級(jí) 無需安裝App,不會(huì)占用手機(jī)內(nèi)存

缺點(diǎn)：

無法獲取系統(tǒng)級(jí)別的通知，提醒灵巧，動(dòng)效等等

用戶留存率低 設(shè)計(jì)受限制諸多 體驗(yàn)較差

Hybrid App

(Hybrid)混合應(yīng)用程序搀矫，在應(yīng)用程序中嵌入了webview，通過webview訪問網(wǎng)頁刻肄，嗯瓤球，那webview又是個(gè)啥？ webview是一個(gè)基于webkit引擎敏弃，展現(xiàn)web頁面的控件 作用： 顯示和渲染web界面 直接使用html文件（網(wǎng)絡(luò)或Apk資源包assets中）作布局 可和JavaScript交互調(diào)用

優(yōu)點(diǎn)：

開發(fā)成本較低,可以跨平臺(tái),調(diào)試方便 維護(hù)成本低,功能可復(fù)用

功能更加完善,性能和體驗(yàn)要比起web app好太多 更新較為自由

缺點(diǎn)： 相比原生,性能仍然有較大損耗 不適用于交互性較強(qiáng)的app

tips

如何判斷一個(gè)應(yīng)用界面是native還是web界面

1卦羡、在手機(jī)/模擬器中點(diǎn)擊關(guān)于手機(jī)中的版本號(hào)5下，出來開發(fā)者選項(xiàng)

2、在開發(fā)者選項(xiàng)中勾選上顯示布局邊界再返回到App界面

3绿饵、如果App是Html的界面欠肾，那界面不會(huì)有布局邊界顯示，如有則說明是native的