How to Capture Website Screenshots with Node.js

Introduction

Capturing website screenshots programmatically is a common need for many applications - from generating link previews to monitoring website changes, creating automated reports, or building SEO tools.

In this guide, we'll explore three different approaches to capture screenshots in Node.js:

• Puppeteer - Google's headless Chrome library
• Playwright - Microsoft's cross-browser automation
• Screenshot API - The simplest approach with SnapAPI

Method 1: Using Puppeteer

Puppeteer is a Node.js library that provides a high-level API to control Chrome or Chromium. It's powerful but requires managing browser installations.

Installation

npm install puppeteer

Basic Screenshot

const puppeteer = require('puppeteer');

async function takeScreenshot(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1280, height: 720 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
}

takeScreenshot('https://example.com');

Method 2: Using Playwright

Playwright is similar to Puppeteer but supports multiple browsers (Chrome, Firefox, Safari) and has a more modern API.

Installation

npm install playwright

Basic Screenshot

const { chromium } = require('playwright');

async function takeScreenshot(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.setViewportSize({ width: 1280, height: 720 });
  await page.goto(url, { waitUntil: 'networkidle' });
  
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
}

takeScreenshot('https://example.com');

Method 3: Using a Screenshot API

The simplest approach is using a Screenshot API like SnapAPI. No browser installation, no dependencies to manage, just a simple HTTP request.

Using fetch (No dependencies!)

async function takeScreenshot(url) {
  const apiKey = 'your-api-key';
  const endpoint = `https://snapapi.alterra-solutions.com/v1/screenshot`;
  
  const response = await fetch(
    `${endpoint}?url=${encodeURIComponent(url)}&api_key=${apiKey}&response=binary`
  );
  
  const buffer = await response.arrayBuffer();
  require('fs').writeFileSync('screenshot.png', Buffer.from(buffer));
}

takeScreenshot('https://example.com');

With cURL

curl "https://snapapi.alterra-solutions.com/v1/screenshot?url=https://example.com&api_key=YOUR_KEY&response=binary" -o screenshot.png

Which Method to Choose?

Here's a quick comparison to help you decide:

Choose Puppeteer/Playwright if:

• You need complex browser automation (clicking, form filling)
• You want full control over the rendering
• You're already running heavy server infrastructure

Choose a Screenshot API if:

• You just need website screenshots
• You want minimal setup and maintenance
• You're building a serverless application
• You value simplicity and speed