How to emulate mobile devices with Playwright?

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();
});

Playwright script capturing a screenshot of Google using iPhone 13 Pro emulation with German locale settings

Line 1: Import the necessary modules from the @playwright/test package.
- 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 the test function. The async keyword indicates that the test function is asynchronous.
Line 3: Retrieves the device profile for the iPhone 13 Pro from the devices module and stores it in the variable iPhone.
Line 4: Launches a new instance of the WebKit browser using Playwright’s launch function.
- { headless: false } specifies that the browser should be launched in non-headless mode, meaning it will display the browser window during testing.
- slowMo: 300 sets 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 iPhone variable.
- The spread operator (...iPhone) copies all properties from the iPhone device 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