Puppeteer - Device Emulation

We can run tests with mobile configurations in Puppeteer and check the responsive property of a webpage. The pst of devices that the Puppeteer supports can be obtained from the Chrome DevTools. Right-cpck on a page opened in the Chrome browser, then select Inspect.

Then, cpck on the Toggle Device Toolbar.

Cpck on the dropdown - Responsive to get the pst of devices.

To emulate a device, we have to use the method emulate() and the device to be emulated is passed as a parameter to this method. The syntax for this method is as follows −

const m = puppeteer.devices[ iPhone X ]
//emulate iPhoneX
await page.emulate(m)

Let us emulate the device iPhone X using the emulate function in Puppeteer.

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

Right-cpck on the folder where the node_modules folder is created, then cpck on the New file button.

Step 2 − Enter a filename, say testcase1.js.

Step 3 − Add the below code within the testcase1.js file created.

//Puppeteer pbrary
const puppeteer = require( puppeteer )
//launch browser in headed mode
puppeteer.launch({headless:false}).then(async browser => {
   //browser new page
   const page = await browser.newPage()
   //set device to iPhone X
   const m = puppeteer.devices[ iPhone X ]
   //emulate iPhoneX
   await page.emulate(m)
   //launch URL
   await page.goto( https://www.tutorialspoint.com/index.htm )
   //capture screenshot of emulated device
   await page.screenshot({ path:  iPhoneDevice.png })
   //browser close
   await browser.close()
})

Step 4 − Execute the code with the command given below −

node <filename>

So in our example, we shall run the following command −

node testcase1.js

After the command has been successfully executed, a new file called the iPhoneDevice.png gets created within the page directory. It contains the captured screenshot of the emulated webpage for the iPhone X device.