How to emulate mobile devices with Playwright?
In today’s digital landscape, ensuring that web applications are optimized for mobile devices is paramount. With the proliferation of smartphones and tablets, users increasingly expect seamless experiences regardless of the device they are using. Playwright, a robust automation tool for web testing, addresses this need by offering built-in capabilities to emulate mobile devices.
In this answer, we’ll explore how to leverage Playwright’s mobile device emulation features to validate the appearance and behavior of web applications across various mobile device viewports and configurations.
Playwright’s Mobile Device Emulation
Playwright’s mobile device emulation functionality is designed to replicate the viewport and color schemes of popular mobile devices. This allows developers and testers to assess how a web application will look and behave on different screen sizes and under varying lighting conditions. While it’s essential to note that mobile device emulation does not replace testing on real devices entirely, it significantly extends test coverage within the Playwright framework.
Key Capabilities
Viewport Emulation: Playwright enables developers to emulate the viewport sizes of a wide range of mobile devices, including smartphones and tablets. This ensures that web applications are responsive and adapt seamlessly to different screen dimensions.
Color Scheme Validation: With the rise of dark mode and other color scheme preferences among users, Playwright’s mobile device emulation capabilities allow testers to validate how a web application’s design holds up under different color schemes. This ensures consistency and accessibility across various user preferences.
Geolocation, Time Zones, and Locales: Playwright offers features to simulate geolocation, time zones, and locales, allowing for comprehensive testing scenarios. This ensures that web applications function correctly across different geographic regions and time zones.
Coding Example
Let’s dive into a practical example to demonstrate how to use Playwright to emulate a mobile device and test a web application. In this scenario, we’ll navigate to the Google website on an iPhone 13 Pro with a German locale.
const { webkit, devices,test } = require('@playwright/test');
test('iPhone test', async () => {
const iPhone = devices['iPhone 13 Pro'];
const browser = await webkit.launch({ headless: false, slowMo: 300 });
const context = await browser.newContext({
...iPhone,
locale: 'de-DE'
});
const page = await context.newPage();
await page.goto('https://www.google.com/');
await page.screenshot({ path: 'DE-Google.jpeg' });
await page.waitForTimeout(100);
await browser.close();
});Line 1: Import the necessary modules from the
@playwright/testpackage.webkit: This is a browser engine that Playwright uses for testing.devices: This module contains predefined device profiles that can be used for device emulation.test: This module is used to define test cases.
Line 2: Starts defining a test case named
“iPhone test”using thetestfunction. Theasynckeyword indicates that the test function is asynchronous.Line 3: Retrieves the device profile for the iPhone 13 Pro from the
devicesmodule and stores it in the variableiPhone.Line 4: Launches a new instance of the WebKit browser using Playwright’s
launchfunction.{ headless: false }specifies that the browser should be launched in non-headless mode, meaning it will display the browser window during testing.slowMo: 300sets a delay of 300 milliseconds between each action performed by Playwright, making it easier to follow the test execution.
Line 5: Creates a new browser context using the device profile stored in the
iPhonevariable.The spread operator (
...iPhone) copies all properties from theiPhonedevice profile.locale: 'de-DE'sets the locale of the browser context to German (Germany).
Line 9: Creates a new browser page within the specified browser context.
Line 10: Navigates the browser page to the Google website (
https://www.google.com/).Line 11: Takes a screenshot of the current browser page and saves it as a JPEG file with the name
DE-Google.jpeg.Line 12: Pauses the execution of the test for 100 milliseconds. It’s often used to ensure that certain actions have time to complete before proceeding.
Line 13: Closes the browser instance, ending the test.
Conclusion
By leveraging Playwright’s mobile device emulation capabilities, developers and testers can ensure the optimal performance and user experience of their web applications across a diverse array of mobile devices and configurations. Whether it’s validating responsiveness, assessing color scheme consistency, or testing geolocation-based features, Playwright empowers teams to deliver high-quality web experiences that meet the expectations of modern mobile users.
Free Resources