Emulate Mobile with Puppeteer

Table of content

Emulate Mobile with Puppeteer

Emulate Mobile with Puppeteer

The huge range of mobile devices used to browse the web, which means you really have to consider making your site mobile-compatible when designing your responsive website.

We will be learning how to run our tests in the mobile configuration using the puppeteer. We can perform this task using the puppeteer/DeviceDescriptors.

The supporter list of devices is given in Puppeteer documentation. So, go to the device descriptor file and choose your preferred device name.

You can find the device list in the chrome dev tools as well,

Open dev tool by inspecting an element or by right click and inspect.
Now select the Toggle device Toolbar.
Click on the responsive dropdown, where you can find the devices.

Let's Emulate Mobile in Puppeteer code:

Import DeviceDescriptos
Import the device that you wish
Open the browser
Open tab in puppeteer
Use emulate() function and pass parameter as the imported device.
The remaining commands are the same as usual

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhonex = devices['iPhone X'];
puppeteer.launch({headless:false}).then(async browser => {
  const page = await browser.newPage();
  //We use here page.emulate so no more need to set the viewport separately
  //await page.setViewport({ width: 1280, height: 800 })
  await page.emulate(iPhonex);
  await page.goto('https://www.chercher.tech');
  await page.screenshot({ path: 'cherchertech-iphoneX.png'});
  await browser.close();
});

Custom Commands in Puppeteer

Emulate Mobile with Puppeteer

Emulate Mobile with Puppeteer

Let's Emulate Mobile in Puppeteer code:

Recommended Readings