+91 7387620624

Mobile Emulation

Introduction

With users accessing websites from smartphones, tablets, laptops, and desktop computers, responsive web design has become an essential part of modern web development. A responsive website automatically adjusts its layout and content based on the device’s screen size.

Testing a website on multiple physical mobile devices can be expensive and time-consuming. Chrome provides Mobile Emulation, which allows Selenium to simulate a mobile device directly within the desktop browser.

Using ChromeOptions, Selenium can launch Chrome with a mobile viewport, mobile user agent, and touch capabilities, making it easy to verify responsive web applications without requiring an actual mobile device.

In this tutorial, you’ll learn how to configure Mobile Emulation using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is Mobile Emulation?

Mobile Emulation is a feature of Google Chrome that simulates a mobile device inside the desktop browser.

Instead of opening Chrome in its normal desktop mode, Selenium launches the browser using a mobile configuration that includes:

  • Screen width

  • Screen height

  • Device Pixel Ratio (DPR)

  • Mobile user agent

  • Touch support

This allows automation scripts to verify how a webpage behaves on a mobile device without using a physical smartphone.

Example

Desktop Browser

┌─────────────────────────────┐
│ Navigation Bar              │
│ Sidebar                     │
│ Main Content                │
│ Footer                      │
└─────────────────────────────┘

              │

              ▼

Mobile Emulation

┌───────────────┐
│ ☰ Menu        │
│ Main Content  │
│ Main Content  │
│ Footer        │
└───────────────┘

Why Use Mobile Emulation?

Mobile Emulation helps you:

  • Test responsive web pages.

  • Verify mobile layouts.

  • Validate hamburger menus.

  • Test touch-friendly interfaces.

  • Simulate different screen sizes.

  • Reduce dependency on physical devices.

  • Improve automation efficiency.

How Selenium Performs Mobile Emulation

Selenium configures Mobile Emulation using ChromeOptions.

A mobile profile contains:

  • Device width

  • Device height

  • Pixel ratio

  • Mobile user agent

Example:

mobile_emulation = {
    "deviceMetrics": {
        "width": 390,
        "height": 844,
        "pixelRatio": 3.0
    },
    "userAgent": "Mobile User Agent"
}

options = webdriver.ChromeOptions()

options.add_experimental_option(
    "mobileEmulation",
    mobile_emulation
)

driver = webdriver.Chrome(
    options=options
)

When Chrome starts, it behaves like a mobile browser using the supplied configuration.

Example

from selenium import webdriver


# Topic: 37. Chrome DevTools Protocol (CDP) - Mobile Emulation
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 37_examples/test_05_mobile_emulation.py
#
# Chrome mobile emulation simulates a mobile device viewport, user agent, and
# touch capabilities for responsive testing.


def test_mobile_emulation():
    mobile_emulation = {
        "deviceMetrics": {"width": 390, "height": 844, "pixelRatio": 3.0},
        "userAgent": (
            "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) "
            "AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 "
            "Mobile/15E148 Safari/604.1"
        ),
    }

    options = webdriver.ChromeOptions()
    options.add_experimental_option("mobileEmulation", mobile_emulation)

    driver = webdriver.Chrome(options=options)

    try:
        driver.get("https://www.testmuai.com/selenium-playground/")

        width = driver.execute_script("return window.innerWidth;")
        assert width <= 450
    finally:
        driver.quit()

Understanding the Code

Import Required Library

from selenium import webdriver

Imports the Selenium WebDriver module required to launch and control the Chrome browser.

Create the Mobile Emulation Configuration

mobile_emulation = {
    "deviceMetrics": {
        "width": 390,
        "height": 844,
        "pixelRatio": 3.0
    },
    "userAgent": (
        "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)..."
    )
}

This dictionary defines the characteristics of the simulated mobile device.

  • width specifies the screen width in CSS pixels.

  • height specifies the screen height.

  • pixelRatio represents the device’s pixel density.

  • userAgent identifies the browser as a mobile device.

Many responsive websites use the user agent to determine whether to display the mobile or desktop version.

Create Chrome Options

options = webdriver.ChromeOptions()

Creates a ChromeOptions object that allows browser-specific settings to be configured before launching Chrome.

Enable Mobile Emulation

options.add_experimental_option(
    "mobileEmulation",
    mobile_emulation
)

The add_experimental_option() method enables Mobile Emulation using the configuration defined earlier.

Chrome will launch using the specified mobile viewport and user agent.

Launch the Chrome Browser

driver = webdriver.Chrome(
    options=options
)

Starts a new Chrome browser session using the configured mobile settings.

Open the Practice Website

driver.get(
    "https://www.testmuai.com/selenium-playground/"
)

Opens the practice website.

The webpage is rendered using the simulated mobile viewport.

Retrieve the Viewport Width

width = driver.execute_script(
    "return window.innerWidth;"
)

The execute_script() method executes JavaScript inside the browser.

It returns the current width of the browser’s viewport.

Verify the Mobile Viewport

assert width <= 450

Verifies that Chrome is running with a mobile-sized viewport.

If the viewport width is greater than 450 pixels, the test fails.

Close the Browser

driver.quit()

Closes all browser windows and ends the WebDriver session.

Practical Example

Suppose your website displays a hamburger menu on mobile devices and a full navigation bar on desktop browsers.

The automation script:

  • Launches Chrome in Mobile Emulation mode.

  • Opens the website.

  • Verifies that the hamburger menu is displayed.

  • Confirms that the responsive layout works correctly.

Automation Testing Example

Consider an online shopping application.

The automation script:

  • Opens Chrome using Mobile Emulation.

  • Navigates to the product page.

  • Verifies that product cards resize correctly.

  • Confirms that mobile navigation and checkout forms are displayed properly.

Real-World Example

Mobile Emulation is commonly used in:

  • Responsive web testing

  • E-commerce websites

  • Banking applications

  • Healthcare portals

  • Progressive Web Apps (PWAs)

  • Enterprise web applications

It helps QA teams validate responsive layouts before testing on real mobile devices.

Advantages of Mobile Emulation

  • Simulates mobile devices without physical hardware.

  • Supports responsive web testing.

  • Reduces testing costs.

  • Tests multiple screen sizes quickly.

  • Improves automation efficiency.

  • Integrates seamlessly with Selenium.

Common Mistakes Beginners Make

Configuring Mobile Emulation After Launching Chrome

Always configure ChromeOptions before creating the WebDriver instance.

Using Incorrect Device Dimensions

Use realistic screen sizes and pixel ratios that match actual mobile devices.

Forgetting the Mobile User Agent

Some websites rely on the user agent to display mobile-specific layouts.

Always configure an appropriate mobile user agent when required.

Assuming Mobile Emulation Replaces Real Device Testing

Mobile Emulation is excellent for responsive testing, but it cannot completely reproduce hardware-specific behavior such as sensors, camera access, or real network conditions.

Best Practices

  • Configure Mobile Emulation before launching Chrome.

  • Use realistic device dimensions.

  • Test multiple screen sizes.

  • Verify responsive layouts after UI changes.

  • Combine Mobile Emulation with real device testing for production releases.

Conclusion

Mobile Emulation allows Selenium to simulate a mobile browser directly inside Google Chrome using ChromeOptions. By configuring device metrics and a mobile user agent, automation engineers can efficiently validate responsive layouts, mobile navigation, and touch-friendly interfaces without requiring physical devices. It is an essential feature for responsive web testing and modern Selenium automation.

Frequently Asked Questions (FAQs)

What is Mobile Emulation?

Mobile Emulation simulates a mobile device inside the Chrome browser by configuring the viewport, device metrics, and user agent.

Which Selenium class is used to configure Mobile Emulation?

Use ChromeOptions.

Which method enables Mobile Emulation?

Use:

options.add_experimental_option(
    "mobileEmulation",
    mobile_emulation
)

Can Selenium test responsive websites using Mobile Emulation?

Yes. Mobile Emulation allows Selenium to verify responsive layouts and mobile-specific user interfaces without requiring a physical device.

Does Mobile Emulation replace real device testing?

No. It is ideal for responsive testing and early validation, but real device testing is still recommended before production deployment.

Key Takeaways

  • Mobile Emulation simulates a mobile device inside Google Chrome.

  • Selenium configures Mobile Emulation using ChromeOptions.

  • Use add_experimental_option() to apply a mobile emulation profile.

  • execute_script() can be used to verify the simulated viewport size.

  • Mobile Emulation is widely used for responsive web testing and cross-device validation.

  • Combine Mobile Emulation with real device testing for complete coverage.