How to Take Screenshots with Puppeteer

Capturing website screenshots programmatically is a crucial task for developers, testers, and automation engineers. Puppeteer, a Node.js library, provides a powerful way to interact with web pages via the Chrome DevTools Protocol. In this guide, we'll explore how to take high-quality screenshots with Puppeteer and handle common challenges.

What is Puppeteer?

Puppeteer is a high-level API for controlling headless Chrome or Chromium. It allows developers to:

• Automate UI testing
• Capture screenshots and PDFs
• Scrape data from web pages
• Perform performance monitoring
• Simulate user interactions (clicks, typing, form submissions)

Let's dive into using Puppeteer for screenshot automation.

Installing Puppeteer

First, install Puppeteer via npm:

npm install puppeteer

This will download a compatible Chromium version along with Puppeteer. If you prefer using an existing Chrome installation, use puppeteer-core instead:

npm install puppeteer-core

Taking a Simple Screenshot

Here's a basic script to capture a screenshot of example.com:

const puppeteer = require('puppeteer');

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

This script:

1. Launches a headless browser
2. Opens a new page
3. Navigates to https://example.com
4. Captures a screenshot and saves it as example.png
5. Closes the browser

Capturing Full-Page Screenshots

For full-page screenshots, use the fullPage option:

await page.screenshot({ path: 'fullpage.png', fullPage: true });

This ensures the entire scrollable page is captured.

Handling High-Resolution Screenshots

To capture pixel-perfect screenshots on Retina displays, set the viewport scale:

await page.setViewport({
	width: 1920,
	height: 1080,
	deviceScaleFactor: 2,
});

Waiting for Elements to Load

Use waitUntil: "networkidle2" to wait until all requests are complete:

await page.goto('https://example.com', { waitUntil: 'networkidle2' });

For dynamic content, wait for a specific element:

await page.waitForSelector('#important-element', { visible: true });

Capturing a Specific Page Section

To capture a portion of the page, use the clip option:

await page.screenshot({
	path: 'section.png',
	clip: { x: 100, y: 100, width: 600, height: 400 },
});

Capturing an Element Screenshot

const element = await page.$('#target-element');
await element.screenshot({ path: 'element.png' });

Blocking Ads and Trackers

To speed up screenshots, block unnecessary network requests:

await page.setRequestInterception(true);
page.on('request', (request) => {
	if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
		request.abort();
	} else {
		request.continue();
	}
});

Generating Transparent Background Screenshots

For transparent PNGs:

await page.screenshot({ path: 'transparent.png', omitBackground: true });

If the website has a background color, remove it:

await page.evaluate(() => {
	document.body.style.background = 'transparent';
});

Saving Screenshots as Base64

If you need a Base64-encoded screenshot:

const base64 = await page.screenshot({ encoding: 'base64' });
console.log(base64);

Exporting Screenshots as Different Formats

Capture as JPEG:

await page.screenshot({ path: 'screenshot.jpg', type: 'jpeg', quality: 80 });

Capture as WebP:

await page.screenshot({ path: 'screenshot.webp', type: 'webp' });

Using a Proxy with Puppeteer

To route traffic through a proxy:

const browser = await puppeteer.launch({
	args: ['--proxy-server=127.0.0.1:8080'],
});

For per-page proxy, install puppeteer-page-proxy:

npm install puppeteer-page-proxy

const useProxy = require('puppeteer-page-proxy');
await useProxy(page, 'http://yourproxy:8080');

Avoiding Puppeteer Detection

Some sites block Puppeteer scripts. Use stealth mode:

npm install puppeteer-extra puppeteer-extra-plugin-stealth

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

Alternative to Puppeteer: CaptureKit API

Setting up Puppeteer can be complex. If you need a faster, scalable, and maintenance-free solution, consider using CaptureKit API:

curl "https://api.capturekit.dev/capture?url=https://example.com&access_key=YOUR_ACCESS_KEY"

Benefits of CaptureKit API

• No need to manage browsers
• Faster and more reliable
• Supports full-page, high-resolution, and custom viewport screenshots

Conclusion

Puppeteer provides powerful automation for taking screenshots, but setting it up and maintaining browser instances can be cumbersome. By mastering Puppeteer's options and leveraging tools like CaptureKit API, you can streamline screenshot automation efficiently. 🚀