Showing posts with label #DeviceEmulation. Show all posts
Showing posts with label #DeviceEmulation. Show all posts

Thursday, July 30, 2026

Playwright Mobile & Device Emulation Using Java (Complete Guide)

Introduction

Today, users access applications from desktops, laptops, tablets, and smartphones with different screen sizes and operating systems. A page that looks perfect on a desktop can become unusable on a mobile device if responsive design is not implemented correctly.

Testing every physical device is expensive and time-consuming. Playwright solves this challenge through powerful device emulation, allowing automation engineers to simulate mobile devices directly within the browser.

In this guide, you'll learn how to configure mobile testing, emulate devices, validate responsive layouts, and apply enterprise best practices using Playwright with Java.

What is Device Emulation?

Device emulation simulates the behaviour of a mobile or tablet device inside the browser.

Playwright can emulate:

  • Screen resolution
  • Viewport size
  • Touch interactions
  • Mobile user agent
  • Device scale factor
  • Orientation

This enables responsive UI testing without requiring physical devices.

Why Mobile Testing Matters

Mobile users now account for a significant portion of web traffic.

Common issues found during mobile testing include:

  • Overlapping text
  • Hidden buttons
  • Broken navigation menus
  • Horizontal scrolling
  • Incorrect font sizes
  • Touch targets that are too small

Automated mobile testing helps detect these problems early.

Creating a Mobile Browser Context

Create a browser context with a mobile-sized viewport.

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setViewportSize(390, 844)
            .setIsMobile(true)
            .setHasTouch(true)
    );

Page page = context.newPage();

This creates a browser session that behaves like a mobile device.

Setting a Custom Viewport

Different applications may require testing with specific screen sizes.

Example:

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setViewportSize(768, 1024)
    );

Common viewport sizes:

DeviceResolution
iPhone 14390 × 844
Pixel 7412 × 915
iPad768 × 1024
Desktop1920 × 1080

Emulating Touch Support

Touch gestures behave differently from mouse clicks.

Enable touch support:

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setHasTouch(true)
            .setIsMobile(true)
    );

This allows Playwright to simulate touch-based interactions.

Emulating Screen Orientation

Applications should work in both portrait and landscape modes.

Portrait example:

.setViewportSize(390, 844)

Landscape example:

.setViewportSize(844, 390)

Testing both orientations helps identify layout issues.

Responsive Navigation Testing

Many applications replace the desktop navigation bar with a hamburger menu.

Example:

page.locator(".menu-icon").click();

page.getByRole(
        AriaRole.LINK,
        new Page.GetByRoleOptions()
            .setName("Products"))
    .click();

Always verify that mobile navigation remains usable.

Validating Responsive Layout

Use assertions to confirm that important elements remain visible.

assertThat(
    page.locator("#checkoutButton")
).isVisible();

This ensures essential functionality is available on smaller screens.

Capturing Mobile Screenshots

Screenshots are useful for responsive regression testing.

page.screenshot(
    new Page.ScreenshotOptions()
        .setPath(Paths.get("screenshots/mobile-homepage.png"))
);

Store screenshots as part of your regression suite.

Testing Different User Agents

Some websites display different content based on the browser's user agent.

Example:

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setUserAgent(
                "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)"
            )
    );

This helps validate device-specific behaviour.

Combining Device Emulation with Geolocation

Many mobile applications use location services.

Example:

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setGeolocation(12.9716, 77.5946)
            .setPermissions(List.of("geolocation"))
    );

This allows testing of location-aware features.

Testing Mobile Forms

Mobile keyboards and screen sizes can expose usability issues.

Verify:

  • Input fields remain visible.
  • Labels are readable.
  • Buttons are easy to tap.
  • Validation messages display correctly.

Organising Mobile Test Suites

Recommended project structure:

src

└── test

    ├── desktop

    ├── mobile

    └── tablet

This separation improves maintainability.

Best Practices

Test Multiple Viewports

Do not assume one mobile resolution is sufficient.

Include:

  • Small phones
  • Large phones
  • Tablets
  • Desktop

Avoid Pixel-Perfect Assertions

Minor rendering differences are normal.

Validate behaviour and layout rather than exact pixel positions.

Use Accessible Locators

Prefer:

  • getByRole()
  • getByLabel()
  • getByPlaceholder()
  • getByTestId()

These are more stable than long CSS selectors.

Combine with Visual Testing

Capture screenshots on different devices to detect responsive regressions.

Execute in CI/CD

Run mobile tests alongside desktop tests in Jenkins, GitHub Actions, or Azure DevOps to ensure consistent quality across devices.

Common Challenges

Hidden Elements

Some controls appear only on mobile.

Ensure your tests account for responsive UI changes.

Sticky Headers

Sticky navigation bars may hide content during scrolling.

Validate scrolling behaviour carefully.

Touch vs Mouse

Touch interactions can differ from desktop mouse behaviour.

Always enable touch when testing mobile-specific features.

Slow Mobile Networks

Consider combining device emulation with network throttling to evaluate application performance under slower connections.

Real-World Enterprise Example

An online banking application works correctly on desktop.

However, on mobile:

  • The Transfer Funds button is pushed below the visible area.
  • Customers cannot complete transfers without scrolling unexpectedly.

A Playwright mobile test detects the issue before release, preventing customer frustration and production defects.

Common Interview Questions

What is device emulation in Playwright?

Device emulation simulates a mobile or tablet environment by configuring viewport size, touch support, user agent, and other device characteristics.

Does Playwright require physical devices?

No. Most responsive testing can be performed using Playwright's browser-based emulation. Physical devices are still valuable for final validation.

Why enable hasTouch?

It allows Playwright to simulate touch interactions that behave differently from mouse events.

Can Playwright test responsive layouts?

Yes. By changing viewport sizes and validating element visibility, Playwright can verify responsive behaviour across different screen sizes.

Should mobile tests replace desktop tests?

No. Both desktop and mobile experiences should be validated because users access applications from multiple device types.

Conclusion

Responsive design is essential for modern web applications, and Playwright provides an efficient way to automate mobile and tablet testing without relying on physical hardware.

In this guide, you learned how to:

  • Configure mobile browser contexts
  • Set custom viewports
  • Enable touch support
  • Test portrait and landscape orientations
  • Validate responsive layouts
  • Capture mobile screenshots
  • Test with custom user agents
  • Combine mobile testing with geolocation
  • Apply enterprise best practices

By incorporating device emulation into your automation framework, you'll improve application quality across desktops, tablets, and smartphones while reducing the cost and complexity of cross-device testing.

Posted by at No comments:
Labels: , , , , , , , , , , , , ,
Subscribe to: Posts (Atom)