Table of contents
Emulating mobile devices
Puppeteer and Playwright control headless desktop browsers that can also emulate mobile devices. And while device emulation can’t replace testing on mobile devices entirely, it’s a practical and quick-to-setup approach to testing mobile scenarios.
Device emulation is well suited to test if your site behaves correctly across multiple viewport sizes and correctly handles user-agent strings. But if your site relies on device-specific browser features, an iPhone emulation running in a Chromium browser might lead to false positives.
This guide explains how to define viewport sizes, device pixel ratio and user-agent strings using Playwright and Puppeteer.
Defining the user agent string
If your site parses the user agent string to serve a different experience to mobile users, define the userAgent in your automation scripts.
const { chromium } = require("playwright")
;(async () => {
const browser = await chromium.launch()
const page = await browser.newPage({
// define the iPhone SE user agent
userAgent:
"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/16.0 Mobile/14E304 Safari/602.1",
})
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()
const puppeteer = require("puppeteer")
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
// define the iPhone SE user agent
await page.setUserAgent(
"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/16.0 Mobile/14E304 Safari/602.1"
)
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()
Defining viewport size and pixel density
If your site follows responsive web design practices and renders elements depending on device viewport size, define a mobile viewport and pixel density.
const { chromium } = require("playwright")
;(async () => {
const browser = await chromium.launch()
const page = await browser.newPage({
// define the iPhone SE viewport size and pixel density
viewport: {
width: 320,
height: 568,
},
deviceScaleFactor: 2,
})
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()
const puppeteer = require("puppeteer")
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
// define the iPhone SE viewport size and pixel density
await page.setViewport({
width: 320,
height: 568,
deviceScaleFactor: 2,
})
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()
Use built-in device registries
Playwright and Puppeteer include a built-in device registry to access mobile device characteristics quickly.
Leverage the pre-defined devices to emulate mobile devices.
const { chromium, devices } = require("playwright")
const iPhone = devices['iPhone SE'];
;(async () => {
const browser = await chromium.launch()
const page = await browser.newPage({
// emulate the iPhone SE
...iPhone
})
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()
const puppeteer = require("puppeteer")
const iPhone = puppeteer.devices['iPhone SE'];
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
// emulate the iPhone SE
await page.emulate(iPhone);
await page.goto("https://danube-web.shop/")
// perform your tests
await browser.close()
})()