Reading list Switch to dark mode

    Mobile Device Emulation Using Puppeteer

    Updated 3 April 2019

    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 :-

    webkul

    Start your headless eCommerce
    now.
    Find out More

    That’s all regarding mobile device emulation using puppeteer.

    Happy testing 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home