The page.setViewport()
method in Puppeteer is primarily used to configure the page size: height and width. Configuring the size before navigating to a web page helps control how the web page is displayed, improving the reliability of scraping tasks. It ensures accurate rendering, mimicking various screen sizes for precise data extraction in web scraping.
Following is the syntax used to resize the page.
The page.setViewport()
also includes optional parameters that are used to further customize the viewport settings. They are the following:
hasTouch
: It is used to disable touch events, useful when emulating a device without touch capabilities. The default value is false
.
isLandscape
: It is used to set the orientation to landscape mode. The default value is false
.
isMobile
: It is used to emulate a non-mobile device, affecting how the page is rendered. The default value is set as false
.
deviceScaleFactor
: It is used to specify the device scale factor, influencing the scale of the page content. deviceScaleFactor
is commonly set to 1 for standard displays, but for devices with high-density screens (like Retina displays), it can be higher. Some common values for deviceScaleFactor
other than 1 are 0, 1.5, 2, and 3.
The await
keyword in JavaScript is used to pause the execution of the script until the Promise returned by the following method is resolved.
Execute the following code example by clicking the "Run" button below the code and observe the resizing of the pages to the given sizes in the "Output" tab.
Note: It may take a few seconds for the pages to open so be patient please. You may see the logs (messages printed with
console.log()
) in the "Terminal" tab.
const puppeteer = require('puppeteer'); (async () => { console.log("Opening the browser in headful mode.....") // Launch a headful browser to see the effect of setViewPort method const browser = await puppeteer.launch({ headless: false, args: ['--no-sandbox'] }); // Resize page1 const page1 = await browser.newPage(); await page1.setViewport({ width: 500, height: 400, hasTouch: false, isLandscape: false, isMobile: false, deviceScaleFactor: 1, }); await page1.goto('https://www.google.com'); // Resize page2 const page2 = await browser.newPage(); await page2.setViewport({ width: 800, height: 650, hasTouch: false, isLandscape: false, isMobile: false, deviceScaleFactor: 1, }); await page2.goto('https://www.educative.io'); })();
Note: We are passing the
--no-sandbox
argument to thepuppeteer.launch()
function to disable sandboxing to open the browser on the Educative platform. If you're running the script on your local machine, this argument might be unnecessary in your command.
Here is a breakdown of the above code:
Line 1: We import the Puppeteer library using the require
function in Node.js. This action loads the Puppeteer module, making all of its functionality accessible within the script under the variable name puppeteer
.
Line 2: We define an asynchronous function using the async
keyword. This function is immediately invoked. Inside this function, we can use the await
keyword to pause execution and wait for promises to resolve. Inside this function:
Line 5: We launch a headful browser using Puppeteer.
Lines 10–19 and 21–30: We create two new browser pages using Puppeteer's newPage()
method, set each page dimension using setViewport()
method, and on each page, we navigate to a different URL using goto()
method to see the effect of customized page dimensions.
Unlock your potential: Puppeteer fundamentals series, all in one place!
To deepen your understanding of Puppeteer, explore our series of Answers below:
What is Puppeteer?
Learn about Puppeteer, a Node.js library that provides a high-level API for browser automation using headless Chrome or Chromium.
How to check for the browser version in Puppeteer
Discover how to retrieve the browser version using Puppeteer's browser.version()
method.
How to open the browser in headful mode with Puppeteer
Explore how to launch a visible browser instance by disabling the headless mode in Puppeteer.
How to get web page HTML with Puppeteer
Learn how to extract and manipulate a webpage’s HTML content using Puppeteer’s evaluate()
method.
What is the use of the setViewport method in Puppeteer?
Understand how setViewport()
customizes the browser’s viewport size for responsive testing and screenshots.
What is code coverage in Puppeteer?
Learn how to analyze unused JavaScript and CSS in web pages to optimize performance using Puppeteer’s coverage tool.
What is visual regression testing in Puppeteer?
Discover how Puppeteer can capture and compare screenshots to detect visual changes in web applications.
What is an accessibility test in Puppeteer?
Explore how Puppeteer, combined with accessibility tools like axe-core
, helps evaluate web accessibility compliance.
Free Resources