Playwright and Puppeteer are the two main open-source choices for taking website screenshots in code. Use Playwright when you need documented full-page and element capture or image buffers for visual testing; choose Puppeteer for a Chromium-oriented Node.js workflow with straightforward page and element screenshots. Both run a browser you manage, so the result depends on the browser version, viewport, wait condition, authentication state, and output settings—not just the library.
Which open-source screenshot tool should you choose?
| Need | Better fit | Why |
|---|---|---|
| Full-page capture, locator screenshots, or image bytes for post-processing | Playwright | Its screenshot API documents full-page capture, locator capture, and buffers for processing or pixel-diff workflows. Playwright screenshot documentation |
| A Chromium-oriented Node.js script for page or element screenshots | Puppeteer | Its guide covers page screenshots and element screenshots, while its API describes binary and base64 returns. Puppeteer screenshots guide |
| Managed URL or HTML rendering without operating browser infrastructure | ScreenshotNeo first; ScreenshotOne is another hosted API | ScreenshotNeo offers a one-request screenshot API and MCP server; ScreenshotOne documents URL and HTML capture. See each provider’s documentation for current behavior. |
These are capability comparisons, not speed or fidelity rankings. The official documentation cited here describes features but does not publish controlled benchmarks. To compare output quality, use the same page, browser build, viewport, state, wait rules, and image settings.
What open-source browser screenshot tools do—and what you operate
Playwright and Puppeteer automate real browsers and expose screenshot methods to your code. That makes them useful for generating assets, documenting bugs, checking visual changes, or capturing pages as part of a larger Node.js workflow. Playwright MCP also documents screenshot capture for visual-layout verification, canvas and chart content, and bug documentation. Playwright screenshots
With either library, you are responsible for installing and maintaining the browser binaries and running the capture environment. A screenshot API instead accepts a URL or HTML request and performs rendering as a hosted service. The trade-off is operational control versus the infrastructure and maintenance burden of managing browser processes yourself.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Neither library guarantees that a screenshot represents a page’s final visual state merely because navigation returned. A site may still be loading images, applying fonts, animating, or checking session state. Define the state you want captured and make the script wait for it explicitly.
Take website screenshots with Playwright
Install Playwright
In a Node.js project, install Playwright and its browser binaries using the current installation instructions in the Playwright documentation. Browser installation is a separate operational concern from writing the capture call: in CI, make sure the browser is installed in the environment that runs the script.
Capture a page, full page, element, or buffer
The following examples assume page is an already-created Playwright Page and navigation or authentication has been handled by your script:
// Viewport screenshot saved to a file
await page.screenshot({ path: 'screenshot.png' });
// Entire scrollable page
await page.screenshot({ path: 'full-page.png', fullPage: true });
// A single element, selected by its accessible or CSS locator
await page.getByRole('main').screenshot({ path: 'main.png' });
// Keep the image in memory for post-processing or a pixel-diff workflow
const image = await page.screenshot();Playwright documents screenshot parameters for image format, clipping area, quality, and other options. Its MCP documentation additionally describes PNG, JPEG, and WebP output, CSS-pixel or device-pixel scaling, and an optional filename. Confirm exact option names and availability against the API reference for the Playwright version you install. Playwright Page screenshot API · Playwright MCP
Recommended Free Tools
Choose the capture mode deliberately
- Viewport: Captures the currently visible browser area. Set the viewport before navigation or capture if repeatable dimensions matter.
- Full page: Captures the entire scrollable document rather than only the visible viewport. Very long pages can produce large images; confirm that full-page output is suitable for the downstream storage or diff tool.
- Element: Captures one locator, useful for a chart, panel, or component. Make the target unique and wait until it is visible and stable.
- Buffer: Omitting the path returns image data in memory, which suits processing pipelines that do not need an intermediate file.
Take website screenshots with Puppeteer
Install Puppeteer
Add Puppeteer to your Node.js project following its installation guide. Plan for browser installation and lifecycle management in the machine or CI runner where the script executes.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Navigate, capture, and close the browser
This complete example follows the Puppeteer guide’s pattern: launch a browser, open a page, navigate with a wait condition, save a screenshot, and close the browser even if capture fails.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({ path: 'screenshot.png' });
} finally {
await browser.close();
}
})();The navigation condition shown is networkidle2, as used in the official guide; it is not a universal definition of visual readiness. Pages that maintain network connections or load content after navigation may need a different condition plus an explicit wait for the content you intend to capture. Puppeteer screenshots guide
Capture a page or one element
// Capture the page
await page.screenshot({ path: 'page.png' });
// Capture an element found with a selector
const element = await page.$('.report-chart');
if (!element) throw new Error('Screenshot target was not found');
await element.screenshot({ path: 'chart.png' });Puppeteer documents that an element is scrolled into view if it is hidden before its screenshot is taken. Its Page screenshot API returns a Promise<Uint8Array> by default or a Promise<string> when base64 encoding is requested. The same reference notes that selected browser and page lifecycle methods wait for screenshot completion to avoid interference. Puppeteer Page.screenshot API
Make screenshots repeatable
A screenshot is only a fair visual comparison when capture conditions are held steady. Record these settings alongside any baseline images:
- Browser and library version: Browser rendering changes over time. Pin or record the browser build used for a baseline and update it intentionally.
- Viewport and scale: Use a fixed viewport, and record whether output is scaled in CSS or device pixels. Device scale affects image dimensions and pixel comparisons.
- Wait condition: Navigation completion and visual readiness are different. Wait for a meaningful selector or page state when a particular component matters.
- Fonts and assets: A capture taken before web fonts or lazy-loaded images finish can differ from a later one.
- Animation and time-sensitive content: Carousels, timestamps, rotating ads, and animated elements can cause diffs even when layout code has not changed. Stabilize or exclude them where the API and workflow allow.
- Authentication and data: Use a known session and predictable test data. A login redirect or personalized content can make a valid capture look like a rendering failure.
- Output mode: Keep format and quality settings consistent. Lossy formats can introduce pixel differences unrelated to layout.
For a controlled fidelity or speed comparison, use a fixed URL or fixture, the same browser version, identical viewport and output settings, the same authenticated state, and a documented wait rule. Repeat captures if the page has nondeterministic content. Official documentation establishes the listed capabilities, not a universal speed or accuracy winner.
Rank #3
Run captures in CI and at scale
Self-hosting gives you control over browser versions, network access, authentication, and where image data is written. It also means your team owns browser installation, process cleanup, concurrency limits, and failures caused by the target site or runner environment.
- Install the browser binaries in the CI image or job that executes the tests; a library package alone may not supply a usable browser.
- Always close browser contexts and processes in cleanup paths, particularly when navigation or capture throws.
- Keep credentials out of source control and avoid logging cookies, authorization values, or sensitive page content.
- Use a bounded number of concurrent browser jobs. More parallel pages can consume additional memory and CPU, and may increase load on the target site.
- Save diagnostic information such as the URL, browser version, viewport, wait condition, and error category with failed captures.
Playwright and Puppeteer integrate with Node.js test and build workflows, but the documentation cited here does not establish a particular CI provider’s limits or a throughput figure. Measure against your own pages and runner size before setting concurrency or runtime expectations.
Self-host a browser or use a screenshot API?
Self-host Playwright or Puppeteer when you need direct browser control, local or private-network access, custom test setup, or image data integrated into a browser automation suite. A hosted API can be simpler when the input is a public URL or supplied HTML and you do not want to provision and maintain browser infrastructure.
For hosted APIs, ScreenshotNeo is the first alternative to try: its stated differentiators are consent-banner and popup cleanup before capture, billing only clean shots, and a lower paid entry plan. ScreenshotOne is another documented hosted website screenshot API; its getting-started guide accepts a URL or HTML and describes GET and POST requests. ScreenshotOne getting started
Before sending a page to any hosted service, check its current pricing, rate limits, data handling, and network access requirements. ScreenshotOne specifically recommends HTTPS because unencrypted HTTP can expose API keys, authorization headers, cookies, and other sensitive data in transit. That transport warning applies whenever credentials or private data cross a network.
Or skip the browser setup
ScreenshotNeo accepts a URL in one GET request and returns an image or PDF. Its capture options include full-page and element shots, device and viewport settings, custom headers and cookies, wait conditions, caching, and asynchronous jobs. See the ScreenshotNeo API documentation for parameter details.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpCookie banners and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers reporting the page verdict and billing status. An MCP server provides the take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting screenshot failures
The screenshot is blank or shows a loading state
Navigation may have completed before the visible content did, or the site may have returned a bot check, login screen, or error page. Wait for a page-specific selector or state, then inspect the rendered page and browser console rather than assuming the screenshot call itself failed.
A full-page or element capture is incomplete
Check whether the intended page content is actually in the scrollable document and whether lazy-loaded sections have appeared before capture. For an element screenshot, verify that the selector matches one visible target and wait for it to settle.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Pixel diffs change between runs
Compare the browser build, viewport, device scale, fonts, authentication state, wait condition, and output format. Dynamic page content and animation are common sources of variance; use stable test data and a consistent capture point.
The script works locally but fails in CI
Confirm that the runner has the expected browser binaries, sufficient resources, network access to the target, and any required test credentials. Ensure cleanup runs after errors so abandoned browser processes do not affect later jobs.
The output format or bytes are unexpected
Check the screenshot options for the installed library version and distinguish a file path from an in-memory return value. Puppeteer’s default API return is binary data; base64 must be requested explicitly. Avoid assuming one library’s option names apply to the other.
FAQ
Are Playwright and Puppeteer both open source?
They are the open-source browser automation implementations covered here. This comparison addresses their screenshot capabilities, not a legal analysis of license terms; consult each project’s current license for reuse requirements.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Can I use screenshots for visual regression tests?
Yes. Playwright explicitly documents capturing into a buffer for post-processing or pixel-diff workflows. Keep the browser and capture conditions fixed so that differences are more likely to reflect the change under test.
Can these tools capture pages that require login?
They can capture a page rendered in an authenticated browser session, provided your script establishes that state securely. The exact login and session setup depends on the site and is not specified by the screenshot method itself.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
