Today, there are many options to make screenshots of any URL with JavaScript or TypeScript (Node.js):

Selenium for JavaScript.
You can use Puppeteer.
Playwright library.
Or Screenshot API as a service.

They might overlap, but there is no best solution. Each depends on your use case and requirements.

Selenium

Selenium is a well-known kid in the QA automation area, so it is easy to start taking screenshots if you plan to write automation tests or already do it.

Install:

npm install selenium-webdriver --save

And then:

import * as fs from 'fs';
import { Builder } from 'selenium-webdriver';

(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('http://www.example.com');
        const screenshot = await driver.takeScreenshot();
        fs.writeFileSync("example.png", screenshot, "base64");
    } finally {
        await driver.quit();
    }
})();

If you just want to take one or two screenshots locally, Selenium is not the best fit. As I wrote earlier, it better serves you already write automation tests with Selenium or plan to write them.

Puppeteer

It is a Node library that interacts with browsers that support Chrome DevTools Protocol (CDP). It is not only Chrome and Chromium, but Firefox also has partial support of CDP.

The Chrome DevTools Protocol was developed to manage, debug and inspect Chromium and Chrome at the low level.

So, think of Puppeteer high-level API over Chrome DevTools Protocol which allows you to do everything in the browser that you can do manually:

Extract data from a SPA, submit a form, type text, perform end-to-end UI testing and other automation-related tasks.
Debug performance issues.
Run, debug and test Chrome Extensions.
Pre-render SPA to make a static site. But for Google SEO, it does not matter since Google renders JavaScript for every page nowadays.
And guess what? Make screenshots and PDFs of pages.

Before starting to work with Puppeteer, let’s install it using npm:

$ npm i puppeteer

And then just:

'use strict';

const puppeteer = require('puppeteer');
(async () => {
       const browser = await puppeteer.launch();
       try {
           const page = await browser.newPage();
           await page.goto('https://example.com');
           await page.screenshot({ path: 'example.png' });
       } catch (e) {
           console.log(e)
       } finally {
           await browser.close();
       }
})();

It is very lightweight compared to Selenium and allows a broad spectrum for automation of the browser. You can use it for crawling, scrapping, taking screenshots, etc. If you need the simplest way to take screenshots, you do not expect to take millions of them, and I would go with Puppeteer. But if you want to take screenshots from different browsers or think about managing instances of browsers, there are more straightforward ways to go.

If you wish, dive deeper into the different use cases on how to take screenshots with Puppeteer.

Playwright

Playwright is the best Java library to automate Chromium, Firefox, and WebKit with a unified API. It is built to enable cross-browser web automation.

If you want to take screenshots in different browsers, Playwright is the best choice.

Install the library:

$ npm install playwright@latest --save

And then take a screenshot:

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

(async () => {
    const browser = await chromium.launch();

    try {
        const page = await browser.newPage();
        await page.goto('https://example.com');
        await page.screenshot({ path: 'example.png' });
    } catch (e) {
        console.log(e)
    } finally {
        await browser.close();
    }
})();

Playwright is the best choice. It is as powerful and allows you to run different browser instances if needed.

If you plan to take millions of screenshots and manage browser instances, you can do it yourself, but it is better to outsource to well-established services.

Screenshot API as a service

We specialize in taking screenshots and managing browser instances at scale. We provide a high-quality Java client to take screenshots and cover a variety of use cases.

Easy to install:

npm install screenshotone-api-sdk --save

And easy to use:

import * as fs from 'fs';
import * as screenshotone from 'screenshotone-api-sdk';

// create API client
const client = new screenshotone.Client("<access key>", "<secret key>");

// set up options
const options = screenshotone.TakeOptions
    .url("https://example.com")
    .delay(3)
    .blockAds(true);

// generate URL
const url = client.generateTakeURL(options);
console.log(url);
// expected output: https://api.screenshotone.com/take?url=https%3A%2F%2Fexample.com&delay=3&block_ads=true&access_key=%3Caccess+key%3E&signature=7f3419ece2c53ed2c7923c7d5deef290d662c3643822bf69ec8259ce10b3ea61

// or download the screenshot
const imageBlob = await client.take(options);
const buffer = Buffer.from(await imageBlob.arrayBuffer());
fs.writeFileSync("example.png", buffer)
// the screenshot is store in the example.png file

If you feel that it is the best fit for you, feel free to sign up for our screenshot API and get the access key.

Summary

Pick the solution which suits your needs best. If you decide to go with our API, please ask any questions and mail us at support@screenshotone.com. And have a nice day 👋

By the way, you might also find interesting how to:

How to take website screenshots with JavaScript or TypeScript (Node.js)

Selenium

Puppeteer

Playwright

Screenshot API as a service

Summary

Contents

Screenshot Tools