Full page screenshot with JavaScript and Selenium

Install Selenium for JavaScript

npm install selenium-webdriver

selenium-webdriver includes Selenium Manager, which downloads the right chromedriver automatically. The examples use ES modules — run them with node file.mjs, or set "type": "module" in your package.json.

Take full page screenshot and save to file

import { Builder } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';
import { writeFileSync } from 'node:fs';

const options = new chrome.Options().addArguments('--headless=new');
const driver = await new Builder().forBrowser('chrome').setChromeOptions(options).build();

await driver.get('https://www.htmltoimage.com/demo');

// Chrome can't natively capture beyond the viewport, so size the window
// to the full height of the document first.
const width = await driver.executeScript('return document.documentElement.scrollWidth');
const height = await driver.executeScript('return document.documentElement.scrollHeight');
await driver.manage().window().setRect({ width, height });

const image = await driver.takeScreenshot();
writeFileSync('full-page.png', image, 'base64');

await driver.quit();

Find out how to change the size of the viewport with JavaScript and Selenium.

That was 19 lines of code — plus a browser to run in production

Keeping headless browsers fed, patched and scaled is a job in itself. We built Urlbox so the same screenshot is one API call:

curl "https://api.urlbox.com/v1/YOUR_API_KEY/png?url=https://example.com"

Try the Urlbox screenshot API — free trial, no browser babysitting.