如何在 PC 机上测试移动端的网页？

随着技术发展，手机的普及化大众化，人们更喜欢在移动设备浏览网页。17年第二季度开始，从国际视野来看，移动端流量开始超过PC端流量（见下图）。同时根据国际数据公司预计，到 2025 年智能手机出货量将超过 15 亿部。这意味着移动端流量占比将进一步提升，移动端测试的重要性也进一步提升。

如何在 PC 机上测试移动端的网页？为了将这个问题阐述清楚，文章结构将分为2个部分：

1、PC机上测试移动端网页的6种办法
2、补充PC端测试移动端需要着重关注的几个点
3、PC测试移动端时，给予的建议+学习视频推荐

一、PC机上测试移动端网页的6种办法

1、使用桌面端浏览开发者工具测试

这是大部分前端开发人员，在开发过程中快速调试UI的方法之一。同时这也是成本最小的方法之一。

我们可以使用 Chrome、Firefox、Safari、Edge 等流行桌面浏览器的开发人员工具来测试网站的移动视图，以进行移动端测试的仿真。同时它们均可供开发及测试人员运行移动端测试。

以Windows下的Chrome为例：

同类工具还有Firefox、Edge

1. 打开 Chrome 并访问我们要测试的网站。

2. 从左上角的自定义和 Google 控制按钮，转到更多工具 > 开发人员工具（F12）。

3. 单击下面屏幕截图中突出显示的设备切换栏图标。
   
   4 ) 从下拉列表中，选择任何 Android 或 iOS 设备
   
   5 ) 选择设备后，输入的网站将在所选设备上打开。可以在 Chrome 上进行移动端测试，也可以使用检查工具随时随地调试移动端
   
   再以苹果产品下的Safari开发工具为例

4. 打开 Safari 在偏好设置中【高级】>勾选“在菜单栏中显示开发此单”，选择并访问我们要测试的网站。

5. 从 Safari 菜单栏中，转到“开发”>“进入响应式设计模式”。

6. 将出现一个移动设备。我们可以从下拉列表或设备菜单中选择设备以在 Safari 上进行测试。

7. 选择设备后，输入的网站将在所选设备上打开。
   总结：以上就是使用浏览器测试Web应用程序最普遍的方法之一。这是被广泛认为是测试门户网站最经济有效的方法。

优点：使用它将显着减少的负载和时间。

缺点：

1）此方法需要不时清除整个模拟器并重新开始。

2）此方法需要为新的测试套件清理缓存，以便不依赖先前的测试用例结果。这可能变得既费力又费时。

3）此方法缺少移动操作系统，以及无法在各种浏览器版本之间切换，而缺失了移动端操作的一些特性。

所以对于测试人员来讲，使用PC桌面浏览器测试的着重点放在：浏览器响应测试或只是视觉 UI 等兼容测试。

2、DevTools远程调试

DevTools远程调试移动端，就像在电脑chrome调试一样方便。
1）首先发现Android 设备：

将手机调成开发者模式，并使用 USB 电缆将我们的 Android 设备直接连接到我们的开发机器。我们的 Android 设备可能会要求我们确认我们信任这台计算机。第一次执行此操作时，我们通常会看看到 DevTools 检测到脱机设备。如果我们看到 Android 设备的型号名称，则 DevTools 已成功建立与我们设备的连接。

2）在 DevTools 中打开一个 WebView

chrome://inspect页面显示设备上启用调试的 WebView 列表。

要开始调试，请单击要调试的 WebView 下方的检查。像使用远程浏览器选项卡一样使用 DevTools。

找到你准备调试的那个，并且确保手机上的那个页面也是处于激活状态的的，然后点击蓝色的 inspect 链接，会弹出一个新的窗口；

总结：该方法面向于web应用或混合应用程序，并不支持原生应用程序。总体看较为轻量快捷，一般可用作调试测试使用。

3、抓包工具：Charles

同类的工具还有: Fiddler，httpwatch，firebug，wireshark。
以Charles为例，通过 HTTP 代理/HTTP 监视器/反向代理，开发人员能够查看他们的机器和 Internet 之间的所有 HTTP 和 SSL/HTTPS 流量，包括请求、响应和 HTTP 标头（其中包含 cookie 和缓存信息）。Charles会记录浏览器和互联网之间的所有流量，显示所有请求、响应、cookie 和标头的内容，支持 SSL和HTTPS。

Charles还可以模拟弱网连接，包括延迟。通过以树或文本的形式查看XML和JSON 请求和响应。以树的形式查看 Flash Remoting / Flex Remoting 消息的内容，可重复请求以测试后端的更改，编辑请求以测试不同的输入，拦截和编辑请求或响应的断点，使用 W3C 验证器验证记录的 HTML、CSS 和 RSS/atom 响应

使用Charles可以用来应对客户端和服务器之间发送和接收的内容。可以很容易地看到正在发生的事情，可以准确地确定故障在哪里，从而使我们快速诊断并解决问题，节省宝贵的时间。

总结：

Charles通常用来看接口请求和响应，定位Sever端的问题。同DevTools的全平台使用相比，Charles在安卓7以上系统，各品牌厂商的手机系统机制，如何安装证书，如何连接手机等等都是考验。

4、在模拟器上进行测试

在移动测试中，通过在模拟器上安装应用程序也可以进行测试，从而无需实际使用真机。

模拟器是一种可行的选择。因为它易于安装、随时可用且维护为零。

模拟器可以实现诸如网络节流以改变带宽、支持设备硬件（如相机）、通过通知提示 Web 应用程序等功能。使用模拟器可以帮助我们快速了解移动 Web 应用程序的行为。

但模拟器的问题是——模拟的系统版本较老，且它们根本不是真正的设备。这会让我们对设备只有一个粗略的了解，所以无法提供准确的分析，也无法取代真机硬件呈现不可预测的问题。

例如：需求场景中希望通过GPS定位周边场馆，通知相关圈子里的人根据喜好，就近参加活动。而模拟器无法根据真实场景模拟所在位置，及其模拟真实过程中面临的其它真实情况。再比如：无法模拟 2G、4G 、5G之间快速切换，导致的断网。而这正是一种用户在旅行中遇到实际情况。

总结：

模拟器最好进行UI 测试，以了解 Web 应用程序。但不建议依赖它们来测试其他功能。

5、基于云的测试

终极解决方案来了，再测试移动 Web 应用程序的另一种更可靠的方法是使用真实的设备云，可能有些小贵但是值得。

之前本人在某云工作的时候，也用过类似的云测平台，使用它可远程连接真机进行测试。通常在一些较大的公司都有类似的云机平台，可供测试人员使用。

目前云测平台可提供的能力较以往来说可谓非常丰富，除了真机外还提供以下等功能：

1）自动功能测试

大部分的云测，会提供一些特色的功能。比如自动化功能测试，自定义脚本和脚本组在大量真机上快速执行，用来帮助企业在短时间内执行大量的重复性测试任务和多终端测试任务。这种应用不仅

提高了测试效率和产能，也确保了企业在迭代过程中大量历史版本在功能方面的可靠性。

2）标准兼容测试

通过云测试技术，在远程真机实验室的海量终端中，选取机型，将移动应用自动部署至云端真机上，通过录制自动化执行脚本，覆盖APP的核心功能，支持遍历（智能探索）、monkey、自动登录、性能数据采集、错误日志捕获等功能，提高测试效率和产能，确保企业在迭代过程中大量历史版本在兼容性方面的可靠性。

3）移动应用安全扫描服务

云测安全移动应用扫描系统，采用业内领先的静态分析、动态分析以及行为分析技术，提供覆盖 APP基本信息、配置安全、代码安全、组件安全、数据安全、加密安全、通信安全等维度。全面检测移动应用的安全风险与漏洞，并提供详细的修复方案。

而使用云测平台的问题在于，很可能使用者根本没有那么专业，所以你也许需要更多的学习…

6、Appium

Appium通常也是移动端测试工作种的首选。

它的好处：

1）由于在所有平台上都使用标准的移动自动化 API，我们无需以任何方式修改或重新编译我们的应用程序；

2）支持ios和安卓；

3） 可以使用任何与 Web 驱动程序兼容的语言（Java、Objective-C、JavaScript）来编写测试用例；

4）可以使用任何测试框架；

5）易于在不同平台上设置；

6）Appium移动自动化测试工具支持Ruby、Java、PHP、Node、Python等多种语言；

7）它不需要在设备上安装任何东西；

8） 你不必在不同的平台上重新编译移动应用程序；

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

二、补充PC端测试移动端需要着重关注的几个点

1、关注移动端操作平台

目前主流的移动设备市场只有三种操作系统——Android 、iOS、鸿蒙OS。

2、关注移动端产品类型
不同的品牌，为了打开销售市场，会根据用户的喜好、市场定位不同，会有众多大小不一，形状各异的设备。

有的用户习惯升级到最新系统，而剩下一些用户则没有尝鲜的需求，尽可能避免升级到最新系统。新老用户使用设备的版本不同，会出这种零散的配置存在，我们将其称为系统碎片化。

系统碎片化不仅仅存在安卓端，在iOS端也不少。为了更好的服务于这些用用户，应用也可以分为：原生、Web、混合应用三种：

原生应用：指的是能直接运行于当前操作系统的应用程序；
Web应用：在浏览器中运行的网页应用，由于界面、功能都更加强大，可以媲美原生应用；
混合应用：原生和web两者的结合，通常是一个原生应用内嵌浏览器。

3、关注移动端屏幕尺寸

为了满足不同用户的需求，各个制造商提供不同屏幕尺寸的移动设备。这是增加销售额和覆盖更多受众的好策略。

对于软件测试而言，要做屏幕适配，UI兼容是着重点。

4、关注移动端解析度

设备的分辨率越高，其屏幕就越精致，最终为用户提供更好的体验。

网页对分辨率的最严重影响是前端开发人员为其元素定义绝对值。

例如，定义 div 元素的宽度如下 ：

div {width: 150px;}

在 300 像素宽度的显示器上，该元素可能占据 50% 的空间，而在 450 像素分辨率上，它会占据宽度的 1/3。这种无法确定的元素呈现会在网页上产生复杂的问题。

5、总结

通过我们的分析我们不难得出一个结论，用户界面是用户与移动应用程序的首次交互。除了美观之外，还要附加用户应用程序体验。

所以UI测试是一项强制性测试，且兼容性测试必须包含在测试计划中，以识别用户界面的缺陷

三、PC测试移动端时，给予的建议+学习视频推荐

结合前面两部分的撰写，我们整理了如下建议，分享给你：

1、定目标

确保实现所有既定业务目标（客户期望），以优化测试过程。

要评估网站的可扩展性和适应性，在各种网络速度和互联网连接上测试其性能。
要在不同的网络条件下测试移动网站，以针对使用不同带宽的每个用户优化其性能。

2、定方法

根据用户模式、最大流量和可访问性列出测试优先级。

• 创建一种测试方法，让大家能够遵守规则并遵守标准以确保质量和一致性。

通过扩展或收缩浏览器窗口，我们可以根据 Web 应用程序的内容和设计来定义断点。

3、定条件

• 确定用于测试网站响应能力的设备和移动网络。

• 考虑在所有设备上测试所有应用程序组件需要多长时间。

• 每个屏幕尺寸和操作流程都要经过彻底验证。

在具有最流行屏幕尺寸的设备上测试网站。

• 需要在真机上测试网站以获得准确的测试结果。

当然要做“ PC 机上测试移动端的网页”，最重要的还是要保持学习，学习一些移动端测试知识。

最后感谢每一个认真阅读我文章的人，下面这个网盘链接也是我费了几天时间整理的非常全面的，希望也能帮助到有需要的你！

这些资料，对于想转行做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。希望对大家有所帮助……

如果你不想一个人野蛮生长，找不到系统的资料，问题得不到帮助，坚持几天便放弃的感受的话，可以点击下方小卡片加入我们群，大家可以一起讨论交流，里面会有各种软件测试资料和技术交流。

敲字不易，如果此文章对你有帮助的话，点个赞收个藏来个关注，给作者一个鼓励。也方便你下次能够快速查找。

自学推荐B站视频：

零基础转行软件测试：38天自学完软件测试，拿到了字节的测试岗offer，堪称B站最好的视频！

自动化测试进阶：已上岸华为，涨薪20K，2022最适合自学的python自动化测试教程，自己花16800买的,无偿分享