Would you like to learn how to take screenshots while scraping with JavaScript?
In this article, you'll learn how to do it using six different tools:
Before going into detail, let's see a comparison between all solutions:
Puppeteer | ZenRows | Playwright | Selenium | HTML2Canvas | Electron | |
---|---|---|---|---|---|---|
Main purpose | Automation testing | Bypassing CAPTCHAs and other anti-bot systems at scale | Automation testing | Automation testing | Mainly for screenshotting a web page within the browser environment | Creating desktop applications with HTML, CSS, and JavaScript |
Pros | Easy to use and good for screenshotting any part of a web page (including full-page capture) | Bypasses any anti-bot system, easy to use, supports full-page screenshots, works with any programming language | Beginner-friendly, supports many languages, good for full-page screenshots | Cross-platform with support for many languages and browsers | Dedicated to taking screenshots | Rapid execution of screenshot actions |
Cons | Limited to JavaScript | Requires an API key | Multiple browser download takes up disk space | WebDriver setup is complex and requires extra steps for full-page screenshots | Operates within a browser context and isn't a web scraping tool | Has a steep learning curve and requires an application instance for screenshots; not a web-scraping tool |
Ideal use cases | Browser automation, dynamic web scraping, taking screenshots | Avoiding blocks while scraping, scraping dynamic content, grabbing screenshots | Browser automation, dynamic content scraping | Browser automation, web scraping | Taking in-page screenshots | Desktop application |
Ease of use | Easy | Easy | Easy | Difficult | Difficult | Difficult |
Popularity | High | Moderate | Moderate | High | High | High |
Below, you'll find a description of each tool and code snippets that will let you test them on the job. For learning purposes, you'll take screenshots of ScrapingCourse.com.

1. Puppeteer
Puppeteer, a Node.js library that provides a high-level API to control Chrome/Chromium over the DevTools Protocol, is straightforward and beginner-friendly. It lets you screenshot a web page with a single line of code.
Puppeteer lets you take full-page screenshots or capture specific elements and the visible part of the page. Still, Puppeteer's major weakness are its limitation to JavaScript and scarce cross-browser support.
Here's the code to get a full-page screenshot with Puppeteer. Test it yourself:
// import the required library
const puppeteer = require("puppeteer");
(async () =>{
// start browser instance in headless mode and launch a new page
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// visit the product page
await page.goto("https://scrapingcourse.com/ecommerce/");
// use setTimeout to wait for elements to load
await new Promise(resolve => setTimeout(resolve, 10000));
// take a screenshot of the full page
await page.screenshot({ path: "pupppeteer-screenshot.png", fullPage:true})
// close the browser
await browser.close();
})();
Still, using Puppeteer alone won't help you avoid blocks when screenshotting protected pages such as G2, which are guarded by anti-bot systems. Let's look at a solution that will help you bypass any anti-bot system automatically.
2. ZenRows
ZenRows' Screenshot API is a powerful automated tool that can capture high-quality screenshots without getting blocked at any scale. It excels at bypassing anti-bot measures through its advanced anti-detection features like auto-rotating premium proxies, request header optimization, real user spoofing, and more.
Its versatile capture options include viewport, full-page, and element screenshots, with customizable settings for ad removal, element hiding, and image quality. The API supports dynamic content rendering and delivers screenshots in multiple output formats including PNG, JPG, or JSON, all accessible through a single API call.
Modern websites employ sophisticated anti-bot measures that can detect and block screenshot attempts made through standard JavaScript libraries. You'll need to overcome these anti-bot measures to capture screenshots successfully.
For instance, let's try taking a screenshot of a protected page like Antibot Challenge with a simple JavaScript script using Axios:
// npm install axios
const axios = require("axios");
const fs = require("fs");
// make the request
axios({
url: "https://www.scrapingcourse.com/antibot-challenge",
responseType: "stream",
})
.then(function (response) {
// write the image file to your project directory
const writer = fs.createWriteStream("screenshot.png");
response.data.pipe(writer);
writer.on("finish", () => {
console.log("Image saved successfully!");
});
})
.catch(function (error) {
console.error("Error:", error);
});
You'll get the 403 forbidden error on running this code. A typical blocked page looks like the following:

The best solution to avoid getting blocked is to use the ZenRows Screenshot API. Let's use it to access and capture the screenshot of the protected page that blocked you earlier.
Sign up for a free account, and you'll get directed to the Request Builder.

Paste the target URL in the link box, then activate JS Rendering and Premium Proxies. Scroll down and choose the Output type as Screenshot. Next, click the Full page option to capture the full-page screenshot of the target page.
Finally, select Node.js and click on the API connection mode.
Copy and paste the generated code into your script and modify it to write the image file in your project directory. Here's the final code:
// npm install axios
const axios = require("axios");
const fs = require("fs");
const url = "https://www.scrapingcourse.com/antibot-challenge";
const apikey = "<YOUR_ZENROWS_API_KEY>";
// make the request
axios({
url: "https://api.zenrows.com/v1/",
method: "GET",
params: {
url: url,
apikey: apikey,
js_render: "true",
premium_proxy: "true",
screenshot: "true",
screenshot_fullpage: "true",
},
// set response type to stream
responseType: "stream",
})
.then(function (response) {
// write the image file to your project directory
const writer = fs.createWriteStream("screenshot.png");
response.data.pipe(writer);
writer.on("finish", () => {
console.log("Image saved successfully!");
});
})
.catch(function (error) {
console.error("Error:", error);
});
You'll get the following screenshot on running this code:

Congratulations! You successfully bypassed the anti-bot measure to capture the full-page screenshot with ZenRows.
Refer to our official documentation to learn more.
3. Playwright
Playwright is Microsoft's open-source browser automation library. Its screenshot feature is easy to implement and syntactically resembles Puppeteer. Playwright also supports multiple browsers, such as Chrome, Brave, Edge, and Firefox, and works in other languages, including Java, Python, and C#.
One major limitation of Playwright is that it downloads multiple browsers by default unless manually controlled, which takes up a lot of disc space.
Here's how to take a screenshot with Playwright in JavaScript:
// import the required library
const { chromium } = require("playwright");
(async () => {
// start a browser instance
const browser = await chromium.launch();
const page = await browser.newPage();
// navigate to the desired URL
await page.goto("https://scrapingcourse.com/ecommerce/");
// take a screenshot of the full page
await page.screenshot({ path: "playwright-screenshot.png", fullPage: true });
// close the browser
await browser.close();
})();
It's this simple!
4. Selenium
Selenium is one of the most popular browser automation libraries with strong dynamic web scraping capabilities. Selenium features a built-in method for screenshotting content within the viewport. However, taking full-page screenshots requires extra steps like scrolling and only works in headless mode, making it less beginner-friendly.
Although Selenium supports many browsers and programming languages, its WebDriver setup is technically challenging.
Here's the code to take a full-page screenshot with Selenium:
// import the required library
const { Builder, By } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
// define an async function to encapsulate our Selenium code
async function scraper() {
// create a new WebDriver instance using Chrome in headless mode
const driver = new Builder()
.forBrowser("chrome")
.setChromeOptions(new chrome.Options().addArguments("--headless"))
.build();
try {
// open the target website
await driver.get("https://scrapingcourse.com/ecommerce/");
// define a function to get scroll dimensions
async function getScrollDimension(axis) {
return await driver.executeScript(`return document.body.parentNode.scroll${axis}`);
}
// get the page scroll dimensions
const width = await getScrollDimension("Width");
const height = await getScrollDimension("Height");
// set the browser window size
await driver.manage().window().setRect({ width, height });
// take a full-page screenshot
const fullBodyElement = await driver.findElement(By.css("body"));
await fullBodyElement.takeScreenshot().then(function (data) {
require("fs").writeFileSync("selenium-full-page-screenshot.png", data, "base64");
});
} finally {
// quit the browser
await driver.quit();
}
}
// call the scraper function to take screenshot
scraper();
5. HTML2Canvas
Html2canvas is a dedicated screenshot library in JavaScript. It works within the browser environment and is unsuitable for taking screenshots during web scraping.
Html2cannvas appends the screenshot to a canvas element and displays it directly in the DOM.
The sample code below assumes you can access a web page's DOM directly. It uses html2canvas to capture the body element and append the result to a div
inside a dedicated function. You can attach this function to an event listener in your website's DOM:
function takeshot() {
// get the body tag to screenshot the body content
let div = document.getElementsByTagName("body")[0];
// use html2canvas to take a screenshot and append to an output div
html2canvas(div).then(
function (canvas) {
document.getElementById("screenshot").appendChild(canvas);
}
)
}
6. Electron
Electron is a JavaScript framework for creating desktop applications that include a browser feature capable of loading web pages. It also features a screenshot method for capturing the application window.
You can take a screenshot of any web page by loading it inside an Electron application and using the page capture method. However, Electron's major drawbacks are its steep learning curve and complex setup.
To use Electron for screenshots, you must run a dedicated Electron server to load your application. You can learn how to do it from Electron's documentation.
After you set up the server, paste the following code in your main.js
file to grab a screenshot of the target page:
// import the required libraries
const { app, BrowserWindow } = require("electron");
const fs = require("fs");
function createWindow() {
// create a new desktop window
const win = new BrowserWindow({
width: 800,
height: 1500
});
// load the target page into the desktop application
win.loadURL("https://scrapingcourse.com/ecommerce/");
// create a web content context
const contents = win.webContents;
// wait for the page to finish loading and take a screenshot
contents.on("did-finish-load", async () => {
// capture the target page's screenshot
const image = await contents.capturePage();
// specify the custom file path
const filePath = "pictures/screenshot.png";
// write the screenshot into the file path
fs.writeFile(filePath, image.toPNG(), (err) => {
if (err) {
console.error("Error saving screenshot:", err);
} else {
console.log("Screenshot saved to:", filePath);
}
});
});
}
// create a window only when the app is ready
app.whenReady().then(createWindow);
// quite the app after closing the running window
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
// activate the app when triggered by a user
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
The code above opens the target web page via an Electron desktop application, grabs its screenshot, and saves it in the specified directory.
Conclusion
In this article, you've learned how to take screenshots in JavaScript using six different tools.
Puppeteer, Playwright, and Selenium are the best choices when taking screenshots of unprotected websites. When screenshotting at scale, you're better off with a web scraping API such as ZenRows, which will let you bypass any anti-bot mechanism. Try ZenRows for free!