Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update article "Emulate and test other browsers" #3210

Merged
merged 8 commits into from
Jul 18, 2024
Merged

Update article "Emulate and test other browsers" #3210

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f3e2c8b
date, add todos
mikehoffms Jun 28, 2024
a1afd32
todo about 404
mikehoffms Jul 2, 2024
0f53266
Merge branch 'main' into user/mikehoffms/update-emulate
mikehoffms Jul 11, 2024
1eba388
remove 2 sections, replace list by link
mikehoffms Jul 16, 2024
c1e31ce
Merge branch 'main' into user/mikehoffms/update-emulate
mikehoffms Jul 16, 2024
343fd0e
Technical edits
captainbrosset Jul 17, 2024
bdc447f
apply own cmts, writer/editor pass
mikehoffms Jul 17, 2024
5e2dc87
polish Summary list items 1&2
mikehoffms Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 35 additions & 26 deletions microsoft-edge/devtools-guide-chromium/device-mode/testing-other-browsers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Emulate and test other browsers
description: Your job doesn't end with making sure your site runs great across Microsoft Edge and Android. Even though Device Emulation (Device Mode) can simulate a range of other devices such as smart phones, we encourage you to check out solutions for emulation provided by other browsers.
description: Learn to test your website on other browsers, to make sure your website works well for all users.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
Expand All @@ -23,56 +23,55 @@ ms.date: 07/16/2024
limitations under the License. -->
# Emulate and test other browsers

<!-- todo: start w/ positive summary -->
Your job doesn't end with making sure your site runs great across Microsoft Edge and Android. Even though the [Device Emulation](index.md) tool can simulate a range of other devices such as smart phones, we encourage you to check out solutions for emulation provided by other browsers.
To make sure your website works for all your users, test your website on other browsers and devices. Not all of your users will be using the browser and device that you used when developing. We encourage you to check out solutions for emulation provided by other browsers, in addition to using the **Device Emulation** tool in Microsoft Edge DevTools.


<!-- ------------------------------ -->
#### Summary

* When you don't have a particular device, or want to do a spot check on something, the best option is to emulate the device right inside your browser.
There are several different levels of testing that you can do to test your site under different conditions:

* Device emulators and simulators enable you to mimic your development site on a range of devices, from your workstation.
* **Browser emulators** help you to quickly test how your website looks and behave at different screen sizes and resolutions, with touch event emulation, and by overriding the user-agent string the browser sends. You use browser emulators from the browser you're developing on. See [Browser emulators](#browser-emulators), below.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

* Cloud-based emulators enable you to automate unit tests for your site across different platforms.
* **Device emulators and simulators** enable you to run other devices from the device you're developing on and test your website on these other devices. See [Device emulators and simulators](#device-emulators-and-simulators), below.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

* **Cloud-based emulators** enable you to run automated tests for your site across different platforms. See [Cloud-based emulators and simulators](#cloud-based-emulators-and-simulators), below.


<!-- ====================================================================== -->
## Browser emulators

Browser emulators are great for testing the responsiveness of a site. But a browser emulator doesn't emulate differences in API, CSS support, and certain behaviors that manifest only on a mobile browser on an actual device. Test your site on browsers running on real devices, to be certain everything behaves as expected.
Browser emulators are great for testing the way your site looks and behaves at different screen sizes and resolutions, or when touch events are enabled, or when the user-agent string is set to another browser's user-agent string.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

You use browser emulators from the browser you're developing on. For example, in Microsoft Edge, you can use the **Device Emulation** tool in DevTools to get an approximation of how your site looks and behaves on different devices. See [Emulate mobile devices (Device Emulation)](./index.md) for more information on how to use the **Device Emulation** tool in Microsoft Edge DevTools.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

<!-- ------------------------------ -->
#### Firefox Responsive Design View
Browser emulators don't emulate differences in web API or CSS support. For example, the **Device Emulation** tool in Microsoft Edge doesn't emulate how the different web APIs or CSS features that your site might be using are supported in Firefox or Safari. Test your site on browsers running on real devices, to be certain everything behaves as expected.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

Here are some browser emulators you can use to test your site on other browsers:

Firefox has a [responsive design view](https://developer.mozilla.org/docs/Tools/Responsive_Design_View) that encourages you to stop thinking in terms of specific devices and instead explore how your design changes at common screen sizes, or on your own screen size by dragging the edges of the window.
* [Firefox Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html).
* [Chrome Device Mode](https://developer.chrome.com/docs/devtools/device-mode).
* [Safari Responsive Design Mode](https://developer.apple.com/documentation/safari-developer-tools/responsive-design-mode).


<!-- ====================================================================== -->
## Device emulators and simulators

Device simulators and emulators simulate not just the browser environment but the entire device. Each simulator is useful to test things that require OS integration, such as form input with virtual keyboards.
Device simulators and emulators simulate not just the browser environment but the entire device. Each simulator is useful to test things that require specific integration with the operating system, such as form input with mobile device keyboards.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

You install device emulators and simulators on your development machine. You can therefore continue to test your website on the same machine where you're developing, while simulating the experience of using a different device.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved


<!-- ------------------------------ -->
#### Android emulator

<!--
![Stock Browser in Android Emulator](../media/device-mode-android-emulator-stock-browser.png)
-->

At the moment, there is no way to install Microsoft Edge on an Android emulator. However, you can use the Android Browser, the Chromium Content Shell, and Firefox for Android, which we review later in this article. Chromium Content Shell runs the same Chromium rendering engine as Microsoft Edge, but comes without browser-specific features.

The Android emulator comes with the Android SDK which you need to download as part of [Android Studio](https://developer.android.com/sdk/installing/studio.html). Then follow the instructions to [set up a virtual device](https://developer.android.com/tools/devices/managing-avds.html) and [start the emulator](https://developer.android.com/tools/devices/emulator.html).
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
After your emulator is booted, select the **Browser** icon, and test your site on the old Stock Browser for Android.

###### Chromium content shell on Android

<!--
![Android Emulator Content Shell](../media/device-mode-android-avd-contentshell.png)
-->

To install the Chromium Content Shell for Android, keep your emulator running and run the following command:

```shell
Expand All @@ -85,10 +84,6 @@ Now you can test your site with the Chromium Content Shell.

###### Firefox on Android

<!--
![Firefox Icon on Android Emulator](../media/device-mode-ff-on-android-emulator.png)
-->

Similar to the Chromium Content Shell, you can get an APK to install Firefox onto the emulator.

[Download the correct .apk file](https://www.mozilla.org/firefox/all/#product-android-beta).
Expand All @@ -107,18 +102,32 @@ The iOS simulator for Mac OS X comes with Xcode, which you [install from the App

When you are done, learn how to work with the simulator through [Apple Developer documentation](https://help.apple.com/simulator/mac/current).

> [!NOTE]
> To avoid having to open Xcode every time you want to use the iOS Simulator, open <!--Xcode, or iOS Simulator?-->it, right-click the iOS Simulator icon in your dock, and then select **Keep in Dock**. Now just click the icon whenever you need it.
To avoid having to open Xcode every time you want to use the iOS Simulator, open the iOS Simulator, right-click the iOS Simulator icon in your dock, and then select **Keep in Dock**. Now just click the icon whenever you need it.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved


<!-- ------------------------------ -->
#### Virtual machines

To test your site on other operating systems, you can run virtual machines on your development device. For example, **Hyper-V** is a virtualization tool that lets you run various versions of Windows and Linux. To learn more, see [Introduction to Hyper-V on Windows 10](/virtualization/hyper-v-on-windows/about/).

For other virtual machines, see [Virtual machines](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#virtual_machines) in _Strategies for carrying out testing_ at MDN.


<!-- ====================================================================== -->
## Cloud-based emulators and simulators

If you aren't able to use the emulators and you don't have access to real devices, then cloud-based emulators are the next-best thing. A big advantage of cloud-based emulators over real devices and local emulators is that you can automate unit tests for your site across different platforms.
Cloud-based emulators and simulators are commercial solutions to test your website on different devices and browsers without installing anything on your development machine. They are useful when you don't have access to real devices or when you can't use local emulators. Cloud-based solutions are also useful for automating tests across different platforms.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

See [Emulators](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#emulators) in _Strategies for carrying out testing_ at MDN.


<!-- ====================================================================== -->
## See also
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved

* [Emulate mobile devices (Device Emulation)](./index.md)
* [Strategies for carrying out testing](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) at MDN.


<!-- ====================================================================== -->
> [!NOTE]
> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
Expand Down