Setting Viewport in Puppeteer
In Puppeteer, the viewport controls the visible area of the browser page. The page.setViewport()
method allows you to configure the page dimensions and device characteristics, which is essential for responsive web scraping and screenshot testing.
Basic Viewport Configuration
The simplest way to set a viewport is by specifying width and height:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Set viewport dimensions
await page.setViewport({
width: 1280,
height: 800
});
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
Complete Viewport Options
The setViewport()
method accepts several options for advanced configuration:
await page.setViewport({
width: 1920, // Viewport width in pixels
height: 1080, // Viewport height in pixels
deviceScaleFactor: 2, // Device pixel ratio (default: 1)
isMobile: false, // Whether to emulate mobile device
hasTouch: false, // Whether to enable touch events
isLandscape: true // Screen orientation
});
Common Viewport Configurations
Desktop Viewport
// Standard desktop viewport
await page.setViewport({
width: 1366,
height: 768,
deviceScaleFactor: 1
});
Mobile Viewport
// iPhone-like mobile viewport
await page.setViewport({
width: 375,
height: 667,
deviceScaleFactor: 2,
isMobile: true,
hasTouch: true,
isLandscape: false
});
High-DPI Display
// Retina/high-DPI display
await page.setViewport({
width: 1440,
height: 900,
deviceScaleFactor: 2
});
Tablet Viewport
// iPad-like tablet viewport
await page.setViewport({
width: 768,
height: 1024,
deviceScaleFactor: 2,
isMobile: true,
hasTouch: true,
isLandscape: false
});
Multiple Viewport Testing
You can test different viewports within the same script:
const puppeteer = require('puppeteer');
const viewports = [
{ width: 1366, height: 768, name: 'desktop' },
{ width: 768, height: 1024, name: 'tablet' },
{ width: 375, height: 667, name: 'mobile' }
];
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
for (const viewport of viewports) {
await page.setViewport({
width: viewport.width,
height: viewport.height
});
await page.screenshot({
path: `screenshot-${viewport.name}.png`,
fullPage: true
});
}
await browser.close();
})();
Important Notes
- Timing: Always call
setViewport()
before navigating to a page for consistent results - Default viewport: New pages have a default viewport of 800x600 pixels
- CSS media queries: Viewport settings affect CSS media query evaluation
- Responsive design: Essential for testing responsive websites and mobile layouts
- Screenshot dimensions: Viewport size directly impacts screenshot output
The viewport configuration is crucial for accurate web scraping and testing across different device types and screen sizes.