Mobile device emulation with Puppeteer

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

Smartphones seem to have taken over desktop computers in terms of usage. The number of smartphone users has increased tremendously in the last few years and by 2016, there will be more than 2 billion smartphone users. In addition, half of the internet’s usage comes from mobile devices.

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 device descriptor file and choose your preferred device name.

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

  • Open dev tool by inspecting an element or by right click and inspect.
    chrome-dev-tool-puppeteer
  • Now select Toggle device Toolbar.
    toggle-device-toolbar
  • Click on the responsive dropdown, where you can find the devices.
    devices-puppeteer-mobile-emulation
Let's Emulate Mobile in Puppeteer code:
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();
});
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Protractor Training