模拟和测试其他浏览器

您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行。即使 Device Mode 可以模拟 iPhone 等多种其他设备，我们仍鼓励您查看其他浏览器模拟解决方案。

摘要

  • 如果您没有特定设备，或者想要执行抽检，最佳方式就是直接在浏览器中模拟设备。
  • 利用设备模拟器，您可以从工作站在一系列设备上模拟开发网站。
  • 基于云的模拟器让您可以在不同平台之间对网站进行自动化单元测试。

浏览器模拟器

浏览器模拟器非常适合测试网站的自适应能力，但它们无法模拟 API 差异、CSS 支持，以及您可以在移动设备浏览器中看到的某些行为。在真实设备中运行的浏览器上测试您的网站，可以确保一切网站行为合乎预期。

Firefox 的自适应设计视图

Firefox 拥有一个自适应设计视图，让您可以探索您的设计在常见屏幕尺寸上的变化或者通过拖动边缘的方式确定自己的大小，而不用考虑具体设备。

Edge 的 F12 模拟

如需模拟 Windows Phone，请使用 Microsoft Edge 的内置模拟。

由于 Edge 不具备旧版兼容性，请使用 IE 11 的模拟来模拟您的页面在较旧版本 Internet Explorer 中的外观。

设备模拟器

设备模拟器不仅可以模拟浏览器环境，也能模拟整个设备。它们可以用于测试需要操作系统集成的内容，例如带虚拟键盘的表单输入。

Android 模拟器

Android 模拟器 Stock Browser

Android Emulator 中的 Stock Browser

目前，无法在 Android 模拟器上安装 Chrome。不过，您可以使用 Android Browser、Chromium Content Shell 和 Firefox for Android，我们将在本指南的稍后部分进行介绍。Chromium Content Shell 与 Chrome 使用相同的渲染引擎，但没有任何浏览器特定的功能。

Android Emulator 标配 Android SDK，您需要点击此处下载。然后，按照说明设置虚拟设备并启动模拟器。

模拟器启动后，点击 Browser 图标，即可在旧版 Stock Browser for Android 上测试网站。

Android 上的 Chromium Content Shell

Android 模拟器内容 Shell

Android 模拟器内容 Shell

如需安装 Chromium Content Shell for Android，请让模拟器保持运行状态，然后在命令提示符处运行以下命令：

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

现在，您可以使用 Chromium Content Shell 测试您的网站。

Android 版 Firefox

Android 模拟器上的 Firefox 图标

Android 模拟器上的 Firefox 图标

与 Chromium 的 Content Shell 类似，您可以获取一个 APK 以将 Firefox 安装到模拟器上。

从 https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ 下载合适的 .apk 文件。

从这里，您可以使用以下命令将文件安装到打开的模拟器或连接的 Android 设备上：

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

iOS 模拟器

适用于 Mac OS X 的 iOS 模拟器配有 Xcode，您可以从 App Store 安装。

完成后，您可以通过 Apple 的文档学习如何使用模拟器。

Modern.IE

Modern IE VM

Modern IE VM

利用 Modern.IE 虚拟机，您可以在自己的计算机上通过 VirtualBox（或 VMWare）访问不同版本的 IE。在此处的下载页面上选择一款虚拟机。

基于云的模拟器

如果您无法使用模拟器并且没有真实设备，那么基于云的模拟器是您的最佳选择。基于云的模拟器相对于真实设备和本地模拟器的一大优势是，您可以在不同平台上对网站进行自动化单元测试。

  • BrowserStack（商用）是最便于进行手动测试的云模拟器。您可以选择操作系统、浏览器版本与设备类型，以及要浏览的网址，模拟器将启动一个您可以与之交互的托管式虚拟机。您还可以在相同屏幕中启动多个模拟器，这样，您能够同时测试应用在多个设备上的外观。
  • SauceLabs（商用）允许您在模拟器内部运行单元测试，这对于将网站流脚本化和稍后在各种设备上观看视频记录非常有用。您也可以对网站进行手动测试。
  • Device Anywhere（商用）不使用模拟器，而是使用您可以远程控制的真实设备。如果您需要在特定设备上重现问题并且在本指南之前的任何选项上都无法看到错误，远程控制真实设备将非常有用。
  • LambdaTest（商用）可帮助您在 2,000 多种浏览器和操作系统的组合上执行手动跨浏览器测试。用户将能够录制复杂 bug 的视频，并通过 MS Teams、Slack 等集成工具分享视频。用户可以通过并行运行测试来加快测试速度。