Learn Selenium - Mobile Web & Hybrid Testing

#Introduction

Most of today's web users come from mobile devices. If your test suite only runs at desktop viewport sizes, there's a big risk that never gets tested. Episode 17 covers mobile web and hybrid testing — automating mobile browsers, validating responsive design, and reaching hybrid applications through Appium.

There are two paths we'll take: the first is purely web — testing sites at mobile screen sizes with fast, cheap emulation mode; the second is native/hybrid — testing applications that wrap web content in a container like WebView, which requires Appium.

#Automating Mobile Browsers

#Chrome DevTools Mobile Emulation

Chrome DevTools can mimic a specific mobile device — screen size, pixel ratio, and user agent. The fastest way to test mobile appearance without physical hardware:

Mobile device emulation

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
 
opsi = Options()
opsi.add_experimental_option(
    "mobileEmulation",
    {"deviceName": "iPhone 12"},
)
driver = webdriver.Chrome(options=opsi)

mobileEmulation with a deviceName makes Chrome mimic that device. Once active, all commands run like a mobile browser — viewport, touch, and user agent all adjust accordingly.

#Emulating Without a Device Name

For precise control, specify the dimensions manually instead of a device name:

Emulation with manual dimensions

opsi.add_experimental_option(
    "mobileEmulation",
    {
        "deviceMetrics": {"width": 375, "height": 812, "pixelRatio": 3.0},
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) ...",
    },
)

deviceMetrics and userAgent give you full control over the simulated device. This is useful for testing screen sizes not present in the preset list.

#Responsive Design Testing

#Validating Across Many Viewports

Responsive design tests run the same flow at several screen sizes and validate that key elements remain accessible:

Responsive validation across sizes

def cek_navigasi(driver):
    driver.set_window_size(1440, 900)
    assert driver.find_element("id", "nav-desktop").is_displayed()
 
    driver.set_window_size(375, 812)
    driver.find_element("id", "tombol-menu").click()
    assert driver.find_element("id", "nav-mobile").is_displayed()

set_window_size(375, 812) simulates a phone screen. The key principle: every size must be asserted for the main user paths — menu, search, checkout — remaining accessible, not merely that the page "doesn't error".

#Determining Breakpoints

Know the application's breakpoints from the CSS (for example 768px, 1024px) and test slightly above and below them. Responsive regressions most often appear right at breakpoint boundaries, so these areas are the most valuable to test.

#Real Device and Emulation Mode

#When to Use Real Devices

Emulation mode is cheap and fast, but not a perfect reproduction: real performance, touch, and rendering differ. Use real devices when:

• The application depends on gestures or screen orientation.
• Real mobile browser behavior matters, like scroll inertia.
• Validation is needed on a specific device your users own.

#Cloud Device Farms

Real devices can be accessed through cloud services like BrowserStack and Sauce Labs — combined with the strategies from episode 14. Real devices are billed, so allocate them to critical suites and release matrices.

#Appium for Hybrid Apps

#Appium Desired Capabilities

Hybrid applications wrap web content in a WebView. Appium extends WebDriver to mobile devices and can switch to the WebView context to automate the web pages inside:

Connecting to Appium

caps = {
    "platformName": "Android",
    "appium:deviceName": "Pixel 7",
    "appium:app": "/app/build.apk",
    "appium:automationName": "UiAutomator2",
}
 
driver = webdriver.Remote(
    command_executor="http://localhost:4723/wd/hub",
    desired_capabilities=caps,
)

Appium's desired_capabilities targets the device and application. Once the session opens, switch to the WebView context to automate the web content:

Switching to the WebView context

for ctx in driver.contexts:
    if "WEBVIEW" in ctx:
        driver.switch_to.context(ctx)
        break

driver.switch_to.context(ctx) moves control into the WebView, where ordinary web elements are found. This ability to automate hybrid apps is what makes Selenium and Appium complementary.

#Mobile-specific Locators and Gestures

Touch screens introduce gestures that don't exist on desktop. Appium handles swipe and tap through an action chain:

Swipe with W3C actions

from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.actions.pointer_input import PointerInput
from selenium.webdriver.common.actions import interaction
 
tindakan = ActionChains(driver)
gesek = tindakan.w3c_actions.pointer_inputs[0]
gesek.create_pointer_move(duration=200, origin="viewport", x=200, y=800)
gesek.create_pointer_down()
gesek.create_pointer_move(duration=300, origin="viewport", x=200, y=300)
gesek.create_pointer_up()
tindakan.perform()

The sequence above performs a bottom-to-top swipe — a common pattern for mobile feeds and menus. For simple applications, mobile emulation in Chrome is enough; gesture-level work only becomes relevant when you move into Appium.

#Conclusion

Episode 17 extends your test coverage to small screens: fast mobile emulation for responsive web, real devices for genuine validation, Appium for hybrid applications, plus locators and gestures typical of touch devices.

Key takeaways:

• Chrome DevTools mobile emulation is the cheapest way to test mobile appearance.
• Test the main user paths at every breakpoint, not just "no errors".
• Real devices are needed for gestures and genuine behavior; cloud farms as a source.
• Appium opens WebDriver to Android and iOS, including WebView.
• Swipes and gestures are handled with the W3C actions chain.

In episode 18 next, we'll cover custom utilities and tooling — creating reusable test utilities and wrappers, custom logs, screenshots, and reporting utilities, integration with test frameworks like pytest, and sharing utilities across test suites.