Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Playwright and Puppeteer are the main JavaScript choices for screenshots of a rendered webpage. Both automate a browser and can capture a page or a specific element. Use Playwright when its full-page, element, or in-memory capture options fit your workflow; use Puppeteer when its browser automation APIs are a better fit. html2canvas is a different approach: it reconstructs an image from DOM information in the page, so it is not a pixel-for-pixel screenshot of the browser output.
Which library should you choose?
| Library | How it captures | Good fit when | Main caveat |
|---|---|---|---|
| ScreenshotNeo | A hosted screenshot API; one GET request returns an image or PDF. | You want to capture URLs without installing or operating a browser. | Requires an API key and a network request. Its stated plans and behavior are described below. |
| Playwright | Automates a browser and captures its rendered page or a locator. | You need full-page, element, or buffer output as part of browser automation. | You must run and manage browser automation in your environment. |
| Puppeteer | Automates a browser and captures a page or element. | Your project already uses Puppeteer or its browser-control workflow suits it. | Page readiness must be chosen for the target site; a navigation wait condition alone may not mean all useful content is ready. |
| html2canvas | Rebuilds an image from DOM information in the page. | You need a browser-side, DOM-derived image and the target content is supported. | It is not an actual browser screenshot; unsupported CSS and cross-origin restrictions can affect output. |
These are representative approaches, not a census of every JavaScript package with screenshot-related features. Official documentation describes APIs and limitations, but does not establish a controlled comparative speed or fidelity winner. Choose by execution context, required fidelity, capture target, and output handling rather than an unsupported benchmark claim.
Capture a rendered webpage with Playwright
Install Playwright in a Node.js project, then use its page screenshot API. The example captures a URL to a file; change the URL and destination for your use case.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
npm install playwright
npx playwright install chromiumconst { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();Playwright’s screenshot guide documents viewport capture, fullPage: true for the full scrollable page, locator screenshots for a target element, and a buffer result for further processing. For example, replace the screenshot line with:
#1 Best Overall
const image = await page.locator('main').screenshot();
// image is a Buffer; pass it to an image-processing step or write it to disk.For a viewport-only file, omit fullPage or set it to false. Use a locator that uniquely identifies the intended element; if it is not present or visible, the capture can fail. A full-page capture may be much taller than the viewport, so consider the page’s length and downstream image-size constraints.
When the image must stay in memory
Playwright can return screenshot data as a buffer rather than writing a file. That is useful when the next step uploads the bytes, stores them, or transforms them. Avoid logging or converting large image buffers unnecessarily; write to disk only if a file is useful to your pipeline.
Capture with Puppeteer
Puppeteer’s official guide demonstrates page and element screenshots. This Node.js example navigates, waits for the navigation condition shown in the official example, and saves a page image:
npm install puppeteerconst puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();To capture one element, wait for or locate the relevant selector and invoke its screenshot method:
Rank #2
const element = await page.$('main');
if (!element) throw new Error('Target element was not found');
await element.screenshot({ path: 'main.png' });Puppeteer’s screenshot API returns binary image data by default; it can also return a base64 string when requested. Its documented options include full-page capture, clipping, image type, quality, and transparent background. The exact options that apply depend on the output type and installed Puppeteer version, so confirm them in the API reference.
Choose readiness for the page, not by habit
The example uses networkidle2, but that is not a universal signal that every page is ready. Sites may keep connections open, load content after the initial navigation, or display a placeholder until interaction. If a screenshot misses content, wait for a meaningful selector or a page-specific condition before capturing. A longer wait can improve completeness but increases capture time; no single wait setting guarantees correct output for every site.
When html2canvas is the right tool
html2canvas works in the page by traversing the DOM and constructing a canvas image from properties it understands. That can suit a client-side feature where a DOM-derived representation is acceptable, but it should not be described as taking a literal screenshot of the browser. Its maintainers explicitly caution that the result may not match the page’s actual representation.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchBefore adopting it, test the specific page, browser, styles, and assets that matter. The project documents that only supported properties can be rendered. Cross-origin images and canvas security restrictions can limit what appears, and browser security prevents access to cross-origin iframe content. A page that looks correct in the browser may therefore produce an incomplete or different canvas output.
How to decide between browser automation and DOM rendering
- Need a screenshot of what a browser rendered? Start with Playwright or Puppeteer. Both expose page and element capture through browser automation.
- Need the image bytes for another processing step? Playwright documents buffer output, while Puppeteer returns binary data by default. Keep the data in memory when that simplifies the pipeline.
- Need a browser-side reconstruction instead? Consider html2canvas only after checking its property support and cross-origin behavior against the target.
- Need captures without operating browser processes? A hosted API such as ScreenshotNeo can take a URL and return an image or PDF. It trades local browser control for an API request and service-specific options.
None of the inspected official sources provides a controlled comparative benchmark, so there is no evidence here to call one library universally fastest or most accurate. Your page composition, readiness strategy, capture size, browser environment, and output path all affect practical results.
Or skip the browser setup
For a hosted capture, make one GET request with a URL. This cURL example saves a WebP image:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the request parameters. Cookie banners are accepted as a visitor and removed along with known consent platforms, newsletter popups, and chat widgets before the shot; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesScreenshotNeo offers 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for the free plan.
Common problems and fixes
The screenshot is blank or missing late-loaded content
The page may not have completed the particular work your screenshot depends on when the capture ran. Navigation completion and content readiness are not always the same. Wait for a page-specific selector, state, or interaction to finish, then capture. Avoid increasing a fixed delay blindly if a selector can express readiness more precisely.
Rank #4
An element capture cannot find its target
Check that the selector matches the rendered page and that the element exists at capture time. For automation, wait for the locator or selector before taking the screenshot. If the site changes markup between runs, prefer a stable selector rather than a styling class that is likely to change.
html2canvas omits an image or iframe
Check whether the asset is cross-origin and whether the browser’s security rules allow it to be used in a canvas. Cross-origin iframe contents cannot be accessed by the page under browser security restrictions. If exact browser-rendered output is required, use browser automation instead of assuming the DOM reconstruction will include inaccessible content.
The full-page image is unexpectedly large
Full-page capture includes more than the visible viewport. For long pages, the output can be tall and expensive to store or process. Capture a specific element or viewport when that is all the application needs, and resize or process the result downstream if appropriate.
The browser process does not close after an error
Put browser cleanup in a finally block, as in the examples. That ensures the browser-close call runs even if navigation or screenshot capture throws an error.
Cost, performance, and reliability considerations
With Playwright or Puppeteer, your application runs a browser and is responsible for browser installation, execution, and cleanup. Capture duration depends on navigation, page readiness, the amount of content, and output handling; the reviewed documentation does not give a comparable performance figure. For repeatable workflows, pin the library and browser versions you deploy and test captures against representative target pages.
html2canvas runs in the page rather than automating a separate browser capture flow, but its output depends on the DOM and properties it can reproduce. It is not a shortcut to guaranteed fidelity. For any method, define what “ready” means, choose only the capture region you need, and handle errors around navigation, missing selectors, and output writing.
A hosted service removes the need to provision a browser for each capture but introduces an API key, service dependency, and plan limits. ScreenshotNeo lists 1,000 monthly free captures without a card, then paid tiers of $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing gives two months free, and every feature is on every plan. These are the product’s stated plan prices and allowances; consult its site for current availability and account details.
Frequently Asked Questions
Do Playwright and Puppeteer take screenshots of a webpage or recreate them?
They automate a browser and capture its rendered page. html2canvas instead reconstructs an image from DOM information.
Can I capture just one element instead of a whole page?
Yes. Playwright supports locator screenshots, and Puppeteer supports element screenshots.
Is there a proven fastest JavaScript screenshot library?
The cited official documentation does not provide a controlled speed comparison, so it does not establish a fastest option.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
