Mobile Device Emulation Using Puppeteer

Puppeteer can make Chrome behave like a mobile device. This can be done with DeviceDescriptors. We can have a more clear view about DeviceDescriptors from here.

We need to choose preferred device name from DeviceDescriptors and include device name in the script.

Below is the script by which we will visit a website and take a screenshot of its view in iPhone X :-

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();
  await page.emulate(iPhonex);
  await page.goto('https://www.webkul.com');
  await page.screenshot({ path: 'webkul.png'});
  await browser.close();
});

So, the screenshot will look like below image :-

That’s all regarding mobile device emulation using puppeteer.

Happy testing 🙂