How to customize viewport and screen size in Puppeteer?

In Puppeteer, you can customize the viewport and screen size of a page using the page.setViewport method. This method allows you to set the width, height, and device scale factor of the viewport.

Here's an example of how you can customize the viewport and screen size in Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Set the viewport size to 1200x800
  await page.setViewport({ width: 1200, height: 800 });
  
  // Navigate to a website
  await page.goto('https://example.com');
  
  // Take a screenshot of the page with the customized viewport
  await page.screenshot({ path: 'example.png' });
  
  await browser.close();
})();

In this example, we are setting the viewport size to 1200x800 pixels using the page.setViewport method. You can customize the viewport size to any value that suits your needs. Additionally, you can also set the device scale factor using the viewport object passed to page.setViewport.

By customizing the viewport and screen size, you can simulate different devices and screen resolutions to test how your website looks on different devices.