PS：本文轉(zhuǎn)載自黑馬測(cè)試高贊知乎文章

鏈接：https://www.zhihu.com/question/20322475/answer/2588617586

隨著技術(shù)發(fā)展，手機(jī)的普及化大眾化，人們更喜歡在移動(dòng)設(shè)備瀏覽網(wǎng)頁(yè)。17年第二季度開(kāi)始，從國(guó)際視野來(lái)看，移動(dòng)端流量開(kāi)始超過(guò)PC端流量（見(jiàn)下圖）。同時(shí)根據(jù)國(guó)際數(shù)據(jù)公司預(yù)計(jì)，到 2025 年智能手機(jī)出貨量將超過(guò) 15 億部。這意味著移動(dòng)端流量占比將進(jìn)一步提升，移動(dòng)端測(cè)試的重要性也進(jìn)一步提升。

如何在 PC 機(jī)上測(cè)試移動(dòng)端的網(wǎng)頁(yè)？為了將這個(gè)問(wèn)題闡述清楚，文章結(jié)構(gòu)將分為2個(gè)部分：

1、PC機(jī)上測(cè)試移動(dòng)端網(wǎng)頁(yè)的6種辦法
2、補(bǔ)充PC端測(cè)試移動(dòng)端需要著重關(guān)注的幾個(gè)點(diǎn)
3、PC測(cè)試移動(dòng)端時(shí)，給予的建議+學(xué)習(xí)視頻推薦

一、PC機(jī)上測(cè)試移動(dòng)端網(wǎng)頁(yè)的6種辦法

1、使用桌面端瀏覽開(kāi)發(fā)者工具測(cè)試

這是大部分前端開(kāi)發(fā)人員，在開(kāi)發(fā)過(guò)程中快速調(diào)試UI的方法之一。同時(shí)這也是成本最小的方法之一。

我們可以使用 Chrome、Firefox、Safari、Edge 等流行桌面瀏覽器的開(kāi)發(fā)人員工具來(lái)測(cè)試網(wǎng)站的移動(dòng)視圖，以進(jìn)行移動(dòng)端測(cè)試的仿真。同時(shí)它們均可供開(kāi)發(fā)及測(cè)試人員運(yùn)行移動(dòng)端測(cè)試。

以Windows下的Chrome為例：

同類工具還有Firefox、Edge

1) 打開(kāi) Chrome 并訪問(wèn)我們要測(cè)試的網(wǎng)站。

2) 從左上角的自定義和 Google 控制按鈕，轉(zhuǎn)到更多工具 > 開(kāi)發(fā)人員工具（F12）。

3) 單擊下面屏幕截圖中突出顯示的設(shè)備切換欄圖標(biāo)。

4 ) 從下拉列表中，選擇任何 Android 或 iOS 設(shè)備

5 ) 選擇設(shè)備后，輸入的網(wǎng)站將在所選設(shè)備上打開(kāi)?？梢栽?Chrome 上進(jìn)行移動(dòng)端測(cè)試，也可以使用檢查工具隨時(shí)隨地調(diào)試移動(dòng)端。

再以蘋(píng)果產(chǎn)品下的Safari開(kāi)發(fā)工具為例

1) 打開(kāi) Safari 在偏好設(shè)置中【高級(jí)】>勾選“在菜單欄中顯示開(kāi)發(fā)此單”，選擇并訪問(wèn)我們要測(cè)試的網(wǎng)站。

2) 從 Safari 菜單欄中，轉(zhuǎn)到“開(kāi)發(fā)”>“進(jìn)入響應(yīng)式設(shè)計(jì)模式”。

3) 將出現(xiàn)一個(gè)移動(dòng)設(shè)備。我們可以從下拉列表或設(shè)備菜單中選擇設(shè)備以在 Safari 上進(jìn)行測(cè)試。

4) 選擇設(shè)備后，輸入的網(wǎng)站將在所選設(shè)備上打開(kāi)。

總結(jié)：以上就是使用瀏覽器測(cè)試Web應(yīng)用程序最普遍的方法之一。這是被廣泛認(rèn)為是測(cè)試門戶網(wǎng)站最經(jīng)濟(jì)有效的方法。

優(yōu)點(diǎn)：使用它將顯著減少的負(fù)載和時(shí)間。

缺點(diǎn)：

1）此方法需要不時(shí)清除整個(gè)模擬器并重新開(kāi)始。

2）此方法需要為新的測(cè)試套件清理緩存，以便不依賴先前的測(cè)試用例結(jié)果。這可能變得既費(fèi)力又費(fèi)時(shí)。

3）此方法缺少移動(dòng)操作系統(tǒng)，以及無(wú)法在各種瀏覽器版本之間切換，而缺失了移動(dòng)端操作的一些特性。

所以對(duì)于測(cè)試人員來(lái)講，使用PC桌面瀏覽器測(cè)試的著重點(diǎn)放在：瀏覽器響應(yīng)測(cè)試或只是視覺(jué) UI 等兼容測(cè)試。

2、DevTools遠(yuǎn)程調(diào)試

DevTools遠(yuǎn)程調(diào)試移動(dòng)端，就像在電腦chrome調(diào)試一樣方便。

1）首先發(fā)現(xiàn)Android 設(shè)備：

將手機(jī)調(diào)成開(kāi)發(fā)者模式，并使用 USB 電纜將我們的 Android 設(shè)備直接連接到我們的開(kāi)發(fā)機(jī)器。我們的 Android 設(shè)備可能會(huì)要求我們確認(rèn)我們信任這臺(tái)計(jì)算機(jī)。第一次執(zhí)行此操作時(shí)，我們通常會(huì)看到 DevTools 檢測(cè)到脫機(jī)設(shè)備。如果我們看到 Android 設(shè)備的型號(hào)名稱，則 DevTools 已成功建立與我們?cè)O(shè)備的連接。

2）在 DevTools 中打開(kāi)一個(gè) WebView

chrome://inspect頁(yè)面顯示設(shè)備上啟用調(diào)試的 WebView 列表。

要開(kāi)始調(diào)試，請(qǐng)單擊要調(diào)試的 WebView 下方的檢查。像使用遠(yuǎn)程瀏覽器選項(xiàng)卡一樣使用 DevTools。

找到你準(zhǔn)備調(diào)試的那個(gè)，并且確保手機(jī)上的那個(gè)頁(yè)面也是處于激活狀態(tài)的的，然后點(diǎn)擊藍(lán)色的?inspect?鏈接，會(huì)彈出一個(gè)新的窗口；

總結(jié)：該方法面向于web應(yīng)用或混合應(yīng)用程序，并不支持原生應(yīng)用程序?？傮w看較為輕量快捷，一般可用作調(diào)試測(cè)試使用。

3、抓包工具：Charles

同類的工具還有: Fiddler，httpwatch，firebug，wireshark。

以Charles為例，通過(guò) HTTP 代理/HTTP 監(jiān)視器/反向代理，開(kāi)發(fā)人員能夠查看他們的機(jī)器和 Internet 之間的所有 HTTP 和 SSL/HTTPS 流量，包括請(qǐng)求、響應(yīng)和 HTTP 標(biāo)頭（其中包含 cookie 和緩存信息）。Charles會(huì)記錄瀏覽器和互聯(lián)網(wǎng)之間的所有流量，顯示所有請(qǐng)求、響應(yīng)、cookie 和標(biāo)頭的內(nèi)容，支持 SSL和HTTPS。

Charles還可以模擬弱網(wǎng)連接，包括延遲。通過(guò)以樹(shù)或文本的形式查看XML和JSON 請(qǐng)求和響應(yīng)。以樹(shù)的形式查看 Flash Remoting / Flex Remoting 消息的內(nèi)容，可重復(fù)請(qǐng)求以測(cè)試后端的更改，編輯請(qǐng)求以測(cè)試不同的輸入，攔截和編輯請(qǐng)求或響應(yīng)的斷點(diǎn)，使用 W3C 驗(yàn)證器驗(yàn)證記錄的 HTML、CSS 和 RSS/atom 響應(yīng)。

使用Charles可以用來(lái)應(yīng)對(duì)客戶端和服務(wù)器之間發(fā)送和接收的內(nèi)容?？梢院苋菀椎乜吹秸诎l(fā)生的事情，可以準(zhǔn)確地確定故障在哪里，從而使我們快速診斷并解決問(wèn)題，節(jié)省寶貴的時(shí)間。

總結(jié)：

Charles通常用來(lái)看接口請(qǐng)求和響應(yīng)，定位Sever端的問(wèn)題。同DevTools的全平臺(tái)使用相比，Charles在安卓7以上系統(tǒng)，各品牌廠商的手機(jī)系統(tǒng)機(jī)制，如何安裝證書(shū)，如何連接手機(jī)等等都是考驗(yàn)。

4、在模擬器上進(jìn)行測(cè)試

在移動(dòng)測(cè)試中，通過(guò)在模擬器上安裝應(yīng)用程序也可以進(jìn)行測(cè)試，從而無(wú)需實(shí)際使用真機(jī)。

模擬器是一種可行的選擇。因?yàn)樗子诎惭b、隨時(shí)可用且維護(hù)為零。

模擬器可以實(shí)現(xiàn)諸如網(wǎng)絡(luò)節(jié)流以改變帶寬、支持設(shè)備硬件（如相機(jī)）、通過(guò)通知提示 Web 應(yīng)用程序等功能。使用模擬器可以幫助我們快速了解移動(dòng) Web 應(yīng)用程序的行為。

但模擬器的問(wèn)題是——模擬的系統(tǒng)版本較老，且它們根本不是真正的設(shè)備。這會(huì)讓我們對(duì)設(shè)備只有一個(gè)粗略的了解，所以無(wú)法提供準(zhǔn)確的分析，也無(wú)法取代真機(jī)硬件呈現(xiàn)不可預(yù)測(cè)的問(wèn)題。

例如：需求場(chǎng)景中希望通過(guò)GPS定位周邊場(chǎng)館，通知相關(guān)圈子里的人根據(jù)喜好，就近參加活動(dòng)。而模擬器無(wú)法根據(jù)真實(shí)場(chǎng)景模擬所在位置，及其模擬真實(shí)過(guò)程中面臨的其它真實(shí)情況。再比如：無(wú)法模擬 2G、4G 、5G之間快速切換，導(dǎo)致的斷網(wǎng)。而這正是一種用戶在旅行中遇到實(shí)際情況。

總結(jié)：

模擬器最好進(jìn)行UI 測(cè)試，以了解 Web 應(yīng)用程序。但不建議依賴它們來(lái)測(cè)試其他功能。

5、基于云的測(cè)試

終極解決方案來(lái)了，再測(cè)試移動(dòng) Web 應(yīng)用程序的另一種更可靠的方法是使用真實(shí)的設(shè)備云，可能有些小貴但是值得。

之前本人在某云工作的時(shí)候，也用過(guò)類似的云測(cè)平臺(tái)，使用它可遠(yuǎn)程連接真機(jī)進(jìn)行測(cè)試。通常在一些較大的公司都有類似的云機(jī)平臺(tái)，可供測(cè)試人員使用。

目前云測(cè)平臺(tái)可提供的能力較以往來(lái)說(shuō)可謂非常豐富，除了真機(jī)外還提供以下等功能：

1）自動(dòng)功能測(cè)試

大部分的云測(cè)，會(huì)提供一些特色的功能。比如自動(dòng)化功能測(cè)試，自定義腳本和腳本組在大量真機(jī)上快速執(zhí)行，用來(lái)幫助企業(yè)在短時(shí)間內(nèi)執(zhí)行大量的重復(fù)性測(cè)試任務(wù)和多終端測(cè)試任務(wù)。這種應(yīng)用不僅提高了測(cè)試效率和產(chǎn)能，也確保了企業(yè)在迭代過(guò)程中大量歷史版本在功能方面的可靠性。

2）標(biāo)準(zhǔn)兼容測(cè)試

通過(guò)云測(cè)試技術(shù)，在遠(yuǎn)程真機(jī)實(shí)驗(yàn)室的海量終端中，選取機(jī)型，將移動(dòng)應(yīng)用自動(dòng)部署至云端真機(jī)上，通過(guò)錄制自動(dòng)化執(zhí)行腳本，覆蓋APP的核心功能，支持遍歷（智能探索）、monkey、自動(dòng)登錄、性能數(shù)據(jù)采集、錯(cuò)誤日志捕獲等功能，提高測(cè)試效率和產(chǎn)能，確保企業(yè)在迭代過(guò)程中大量歷史版本在兼容性方面的可靠性。

3）移動(dòng)應(yīng)用安全掃描服務(wù)

云測(cè)安全移動(dòng)應(yīng)用掃描系統(tǒng)，采用業(yè)內(nèi)領(lǐng)先的靜態(tài)分析、動(dòng)態(tài)分析以及行為分析技術(shù)，提供覆蓋 APP基本信息、配置安全、代碼安全、組件安全、數(shù)據(jù)安全、加密安全、通信安全等維度。全面檢測(cè)移動(dòng)應(yīng)用的安全風(fēng)險(xiǎn)與漏洞，并提供詳細(xì)的修復(fù)方案。

而使用云測(cè)平臺(tái)的問(wèn)題在于，很可能使用者根本沒(méi)有那么專業(yè)，所以你也許需要更多的學(xué)習(xí)....

6、Appium

Appium通常也是移動(dòng)端測(cè)試工作種的首選。

它的好處：

1）由于在所有平臺(tái)上都使用標(biāo)準(zhǔn)的移動(dòng)自動(dòng)化 API，我們無(wú)需以任何方式修改或重新編譯我們的應(yīng)用程序；

2）支持ios和安卓；

3） 可以使用任何與 Web 驅(qū)動(dòng)程序兼容的語(yǔ)言（Java、Objective-C、JavaScript）來(lái)編寫(xiě)測(cè)試用例；

4）可以使用任何測(cè)試框架；

5）易于在不同平臺(tái)上設(shè)置；

6）Appium移動(dòng)自動(dòng)化測(cè)試工具支持Ruby、Java、PHP、Node、Python等多種語(yǔ)言；

7）它不需要在設(shè)備上安裝任何東西；

8） 你不必在不同的平臺(tái)上重新編譯移動(dòng)應(yīng)用程序；

9）在Java的幫助下，它可以與其他工具集成。

二、補(bǔ)充PC端測(cè)試移動(dòng)端需要著重關(guān)注的幾個(gè)點(diǎn)

1、關(guān)注移動(dòng)端操作平臺(tái)

目前主流的移動(dòng)設(shè)備市場(chǎng)只有三種操作系統(tǒng)——Android 、iOS、鴻蒙OS。

2、關(guān)注移動(dòng)端產(chǎn)品類型

不同的品牌，為了打開(kāi)銷售市場(chǎng)，會(huì)根據(jù)用戶的喜好、市場(chǎng)定位不同，會(huì)有眾多大小不一，形狀各異的設(shè)備。

有的用戶習(xí)慣升級(jí)到最新系統(tǒng)，而剩下一些用戶則沒(méi)有嘗鮮的需求，盡可能避免升級(jí)到最新系統(tǒng)。新老用戶使用設(shè)備的版本不同，會(huì)出這種零散的配置存在，我們將其稱為系統(tǒng)碎片化。

系統(tǒng)碎片化不僅僅存在安卓端，在iOS端也不少。為了更好的服務(wù)于這些用用戶，應(yīng)用也可以分為：原生、Web、混合應(yīng)用三種：

原生應(yīng)用：指的是能直接運(yùn)行于當(dāng)前操作系統(tǒng)的應(yīng)用程序；
Web應(yīng)用：在瀏覽器中運(yùn)行的網(wǎng)頁(yè)應(yīng)用，由于界面、功能都更加強(qiáng)大，可以媲美原生應(yīng)用；
混合應(yīng)用：原生和web兩者的結(jié)合，通常是一個(gè)原生應(yīng)用內(nèi)嵌瀏覽器。

3、關(guān)注移動(dòng)端屏幕尺寸

為了滿足不同用戶的需求，各個(gè)制造商提供不同屏幕尺寸的移動(dòng)設(shè)備。這是增加銷售額和覆蓋更多受眾的好策略。

對(duì)于軟件測(cè)試而言，要做屏幕適配，UI兼容是著重點(diǎn)。

4、關(guān)注移動(dòng)端解析度

設(shè)備的分辨率越高，其屏幕就越精致，最終為用戶提供更好的體驗(yàn)。

網(wǎng)頁(yè)對(duì)分辨率的最嚴(yán)重影響是前端開(kāi)發(fā)人員為其元素定義絕對(duì)值。

例如，定義 div 元素的寬度如下 ：

div {width: 150px;}

在 300 像素寬度的顯示器上，該元素可能占據(jù) 50% 的空間，而在 450 像素分辨率上，它會(huì)占據(jù)寬度的 1/3。這種無(wú)法確定的元素呈現(xiàn)會(huì)在網(wǎng)頁(yè)上產(chǎn)生復(fù)雜的問(wèn)題。

5、總結(jié)

通過(guò)我們的分析我們不難得出一個(gè)結(jié)論，用戶界面是用戶與移動(dòng)應(yīng)用程序的首次交互。除了美觀之外，還要附加用戶應(yīng)用程序體驗(yàn)。

所以UI測(cè)試是一項(xiàng)強(qiáng)制性測(cè)試，且兼容性測(cè)試必須包含在測(cè)試計(jì)劃中，以識(shí)別用戶界面的缺陷

三、PC測(cè)試移動(dòng)端時(shí)，給予的建議+學(xué)習(xí)視頻推薦

結(jié)合前面兩部分的撰寫(xiě)，我們整理了如下建議，分享給你：

1、定目標(biāo)

? 確保實(shí)現(xiàn)所有既定業(yè)務(wù)目標(biāo)（客戶期望），以優(yōu)化測(cè)試過(guò)程。

• 要評(píng)估網(wǎng)站的可擴(kuò)展性和適應(yīng)性，在各種網(wǎng)絡(luò)速度和互聯(lián)網(wǎng)連接上測(cè)試其性能。
  

• 要在不同的網(wǎng)絡(luò)條件下測(cè)試移動(dòng)網(wǎng)站，以針對(duì)使用不同帶寬的每個(gè)用戶優(yōu)化其性能。

2、定方法

? 根據(jù)用戶模式、最大流量和可訪問(wèn)性列出測(cè)試優(yōu)先級(jí)。

? 創(chuàng)建一種測(cè)試方法，讓大家能夠遵守規(guī)則并遵守標(biāo)準(zhǔn)以確保質(zhì)量和一致性。

• 通過(guò)擴(kuò)展或收縮瀏覽器窗口，我們可以根據(jù) Web 應(yīng)用程序的內(nèi)容和設(shè)計(jì)來(lái)定義斷點(diǎn)。

3、定條件

? 確定用于測(cè)試網(wǎng)站響應(yīng)能力的設(shè)備和移動(dòng)網(wǎng)絡(luò)。

? 考慮在所有設(shè)備上測(cè)試所有應(yīng)用程序組件需要多長(zhǎng)時(shí)間。

? 每個(gè)屏幕尺寸和操作流程都要經(jīng)過(guò)徹底驗(yàn)證。

? 在具有最流行屏幕尺寸的設(shè)備上測(cè)試網(wǎng)站。

? 需要在真機(jī)上測(cè)試網(wǎng)站以獲得準(zhǔn)確的測(cè)試結(jié)果。

當(dāng)然要做“ PC 機(jī)上測(cè)試移動(dòng)端的網(wǎng)頁(yè)”，最重要的還是要保持學(xué)習(xí)，學(xué)習(xí)一些移動(dòng)端測(cè)試知識(shí)。特意整理了一些移動(dòng)端測(cè)試，以供大家學(xué)習(xí)。

若你是對(duì)測(cè)試不太了解的測(cè)試小萌新，有太多太多對(duì)測(cè)試的疑惑（前途、薪資、技術(shù)含量、男生是否可以干.....），強(qiáng)烈推薦你觀看《測(cè)試小白必看：學(xué)習(xí)軟件測(cè)試必問(wèn)的100個(gè)問(wèn)題，從此貼開(kāi)始》，相信能掃除掉你心目中90%以上的常見(jiàn)問(wèn)題。

《100個(gè)常見(jiàn)問(wèn)題鏈接》：http://bbs.itheima.com/thread-507947-1-1.html

最后，為方便大家自學(xué)軟件測(cè)試，特意給大家準(zhǔn)備了一份13G的超實(shí)用干貨學(xué)習(xí)資源，涉及的內(nèi)容非常全面。

包括軟件學(xué)習(xí)路線圖，黑馬50多天的上課視頻、16個(gè)突擊實(shí)戰(zhàn)項(xiàng)目，80余個(gè)軟件測(cè)試用軟件，37份測(cè)試文檔，70個(gè)軟件測(cè)試相關(guān)問(wèn)題，40篇測(cè)試經(jīng)驗(yàn)級(jí)文章，上千份測(cè)試真題分享,還有2020軟件測(cè)試面試寶典，還有軟件測(cè)試求職的各類精選簡(jiǎn)歷，希望對(duì)大家有所幫助…..?

《2022黑馬測(cè)試學(xué)習(xí)路線圖鏈接》：http://bbs.itheima.com/thread-405757-1-1.html