Learn How to Set the Viewport in Puppeteer?

spot_img

Share This Post

One of the most popular headless chrome APIs for Node is called Puppeteer. It has a lot of features and syntax that are easy to understand. Sometimes you need to change the size of your headless browser’s windows or make it act like a certain device. Here’s how to set Puppeteer’s viewport.

How to Set the Viewport in Puppeteer?


Use the “setViewport” function on your page object in Puppeteer to set the viewport.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  //Code to Set Viewport
  await page.setViewport({
        width: 1920,
        height: 1080
  })

  await page.goto('https://www.example.com');
  await browser.close();
})();

Once you’ve made a new page in your Puppeteer browser instance, you can change its viewport to change the resolution.

It’s a good idea to set your viewport before you go to the URL. If you change the viewport size after the page has loaded, many sites won’t look right.

The setViewport function will accept an object with the following properties:

  • width: pixel width of the viewport (required)
  • height: pixel height of viewport (required)
  • is the landscape: identifies that the viewport is in landscape mode (optional) (default false)
  • isMobile: identifies that the viewport is on a mobile device (optional) (default false)
  • hasTouch: identifies if the viewports supports touch events (optional) (default false)
  • device scale factor: sets the DPR (optional) (default 1)

 

You have to set the width and height when setting the viewport, but you don’t have to set the other arguments. Both height and width are set in pixels. Here are some of the most commonly used resolutions on different devices:

Desktop

  • 1920×1080
  • 1366×768
  • 1440×900
  • 1280×720

Mobile

  • 414×896
  • 375×667
  • 360×640
  • 360×780

Tablet

  • 1280×800
  • 962×601
  • 800×1280
  • 768×1024

You can use the “emulate” function to make your puppeteer instance look like a mobile device.

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['Galaxy Note II'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  await browser.close();
})();

The emulate function changes both the device’s user agent and its viewport. Here you can find a list of the devices that can be used, along with their screen sizes and user agents.

Now you know how to change the viewport in Puppeteer and how to emulate devices directly.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related Posts

How to Choose Best Lift Chair?

For people with physical disabilities and the elderly, getting...

NuWave Brio Air Fryer Review

Craving for some fried goods but scared of the...

Commercial Toaster: Top Picks with Buying Guide and FAQs

Commercial Toaster: Top Picks with Buying Guide and FAQs...

Best High-Velocity Blower Fans

Does your room feel so warm during the summer?...

10 Best Xbox One Gaming Chair: Buying Guide And Reviews

For some people, console gaming should have the right...

Best Gaming Chairs Under 200$

Whether you game as a hobby or happen to...
spot_img
- Advertisement -spot_img