Using Playwright for Mobile Web Testing

June 17, 2025

Using Playwright for Mobile Web Testing

Playwright is a powerful open-source automation tool developed by Microsoft that supports browser automation for Chromium, Firefox, and WebKit. It’s great for testing web applications across different devices, including mobile web testing by emulating mobile browsers and devices.

What is Mobile Web Testing with Playwright?

Mobile web testing involves testing how a website behaves on mobile browsers. Playwright lets you simulate mobile devices — including screen size, touch events, user agent, and network conditions — without needing physical devices or emulators.

Steps to Use Playwright for Mobile Web Testing

1. Install Playwright

First, install Playwright and its dependencies using npm:

bash

Copy

Edit

npm install playwright

Or if you’re using Python:

bash

Copy

Edit

pip install playwright

playwright install

2. Choose a Mobile Device to Emulate

Playwright provides built-in device descriptors, such as:

iPhone 12

Pixel 5

iPad Mini

These descriptors include viewport size, device scale factor, user agent string, and more.

3. Write a Simple Script to Test on Mobile

Here’s an example in JavaScript that launches a browser emulating an iPhone 12, navigates to a website, and takes a screenshot:

javascript

Copy

Edit

const { chromium, devices } = require('playwright');

(async () => {

const iPhone = devices['iPhone 12'];

const browser = await chromium.launch();

const context = await browser.newContext({

...iPhone, // Emulate iPhone 12 device

});

const page = await context.newPage();

await page.goto('https://example.com');

// Perform actions or assertions

await page.screenshot({ path: 'iphone12_screenshot.png' });

await browser.close();

})();

For Python:

python

Copy

Edit

from playwright.sync_api import sync_playwright

with sync_playwright() as p:

iphone_12 = p.devices['iPhone 12']

browser = p.chromium.launch()

context = browser.new_context(**iphone_12)

page = context.new_page()

page.goto('https://example.com')

page.screenshot(path='iphone12_screenshot.png')

browser.close()

4. Simulate Touch and Other Mobile Features

Playwright automatically enables touch events when emulating mobile devices. You can simulate gestures like tap, swipe, and pinch using Playwright’s API.

Example of a tap:

javascript

Copy

Edit

await page.tap('selector-for-button');

5. Test Network Conditions

You can simulate slower mobile networks like 3G:

javascript

Copy

Edit

await context.setOffline(false);

await context.setDefaultNavigationTimeout(60000);

await context.route('**/*', route => {

route.continue();

});

await context.setNetworkConditions({

downloadThroughput: 500 * 1024 / 8,

uploadThroughput: 500 * 1024 / 8,

latency: 400

});

Why Use Playwright for Mobile Web Testing?

Cross-browser support for Chrome, Firefox, and Safari (WebKit).

Built-in device emulation with detailed device profiles.

Fast and reliable with automatic waiting for elements and events.

Supports mobile gestures and network throttling.

Easy scripting with support for JavaScript, Python, Java, and C#.

Summary

Playwright offers a robust environment for mobile web testing by emulating real devices’ behavior directly in your desktop browser. It reduces the need for physical devices and simplifies mobile testing with powerful APIs.

Learn Playwright Training Course in Hyderabad

Visual Regression Testing with Playwright

Slack Notifications for Playwright Test Results

Using Playwright in a Kubernetes Environment

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions