To capture a website screenshot with JavaScript, either launch a browser with Playwright or Puppeteer and call its page screenshot method, or send the URL to a hosted screenshot API. Use a local browser when your application needs direct control of browser automation; use an API when you want an HTTP request and a provider-managed browser. The code and options below show how to make the choice and produce a useful image.
Choose where the browser runs
A JavaScript screenshot captures a page rendered in a browser. It is different from recording a video or taking an operating-system screenshot. The main architectural decision is whether your code manages that browser or asks a hosted service to do so.
Run the browser in your Node.js application
Playwright or Puppeteer fits when browser automation is already part of your application and you want to work with a browser page directly. Your code opens a page, navigates to the target, waits for the right state, and captures it. You are responsible for the browser runtime and its environment.
Call a hosted screenshot API
A hosted API accepts an HTTP request containing a page URL and returns an image. This avoids running the rendering browser in your application, but request fields, authentication, supported settings, output behavior, and commercial terms vary by provider. Do not assume one provider’s request shape works with another.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
For a documented example, Browserless accepts a POST request to its Screenshot API, with a URL, API token, and optional settings; its response is an image. Its documented options include full-page capture, viewport settings, image type, clipping, and selector capture. It also describes scrollPage for triggering lazy-loaded content before a full-page capture. Those are Browserless-specific details, not universal API parameters.
Capture a screenshot with Playwright
Playwright’s screenshot method is page.screenshot(). Its basic example writes the current page to a file:
await page.screenshot({ path: 'screenshot.png' });This line assumes that page is an existing Playwright page and that navigation to the intended site has already happened. The example below includes the surrounding steps. It uses Playwright’s documented Page API; choose the browser installation and project setup that match your existing Playwright application.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1365, height: 900 }
});
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
} finally {
await browser.close();
}
})();Replace https://example.com with the page you need. The example waits for the navigation operation used by page.goto to complete, but no single readiness condition is right for every site. A page that loads images or data after navigation may require a page-specific wait before capture. See the Playwright Page API for the current screenshot and navigation options.
Free tools Windows power users keep installed
One-click scans. No signup required.
Capture the viewport or the full page
By default, a screenshot covers the visible browser viewport. To capture the full scrollable page with Playwright, pass fullPage: true:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.screenshot({ path: 'full-page.png', fullPage: true });A full-page image can be extremely tall. Playwright’s documentation warns that browser pages can crash when they try to allocate too much memory for a screenshot. If an image is unexpectedly huge or the browser fails, capture the viewport or a smaller region instead, and consider whether the downstream use really needs every part of the page.
Capture an element or region
If you need a component rather than the whole page, use the relevant element screenshot or clipping feature provided by the library. The exact method and options depend on the API. For a hosted endpoint, check its documentation for selector or clipping support; Browserless, for example, documents a top-level selector and clipping options for its API. Avoid copying those fields into a Playwright call or another provider’s request without checking that API’s own documentation.
Choose image format and output
Set the output path and image type to suit the next step in your application. Supported types and defaults differ. Playwright documents screenshot path and type options; consult its Page API for the exact behavior of the version you use. A high-resolution or full-page image can consume substantial memory and storage, so choose dimensions and capture area deliberately.
Capture with Puppeteer instead
Puppeteer also exposes Page.screenshot(). Its API returns image bytes (Uint8Array) by default, or a base64 string when the corresponding encoding option is used. Its screenshot options include a file path, image type, full-page mode, and quality. Check the current Puppeteer Page.screenshot() API and ScreenshotOptions reference for exact option names and behavior.
A basic file-oriented pattern, once page is open and navigated, is:
Rank #3
await page.screenshot({ path: 'screenshot.png' });Do not assume every Playwright option name or output default carries over to Puppeteer. For example, decide whether your code needs bytes, a base64 value, or a saved file, then use Puppeteer’s documented return and encoding options accordingly.
Make the capture match the page and its purpose
A screenshot is only useful if it captures the intended state. Before implementation, decide what should be visible and where the output goes.
- Pick the runtime: use a local browser library if you need browser automation in your own Node.js process; use a hosted endpoint if an HTTP request and provider-managed rendering better fit your architecture.
- Navigate to the exact URL: handle redirects, authentication, or page-specific setup as your application requires. Keep credentials and provider tokens out of source code exposed to users.
- Choose a readiness condition: wait for the event, selector, or application state relevant to the page. There is no universal wait strategy established for all websites.
- Set the capture area: select viewport, full page, a particular element, or a clip based on what the result must show.
- Choose output characteristics: set dimensions and format supported by your selected library or service, and choose a file or in-memory output for the next application step.
- Account for lazy content: images or other elements may appear only after scrolling. Check whether your selected library or service needs explicit scrolling or another page-specific action before a full-page capture.
- Validate the result: inspect a representative output, especially on pages with long content, delayed rendering, or dynamic data.
Hosted API option: ScreenshotNeo
If you would rather send a URL than manage a browser runtime, ScreenshotNeo is a website screenshot API and MCP server for developers. Its API uses one GET request with the URL and returns PNG, JPEG, WebP, or PDF output. The following Node.js example requests a WebP screenshot of Stripe and writes the response bytes to a file; change the target URL as needed. See the ScreenshotNeo documentation for API details.
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));Use a real API key in place of YOUR_API_KEY, and keep it server-side rather than exposing it in browser code. This minimal example checks the HTTP response and saves the body. For production, also inspect response headers and handle non-image verdicts according to your application’s needs.
Or skip the browser setup
ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses say which page verdict occurred and whether it was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents, including Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month without a card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. All features are available on every plan. See the API documentation, then sign up for 1,000 free screenshots a month with no card.
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
Troubleshoot common screenshot problems
The screenshot is blank or missing content
The capture may have happened before the page finished rendering the content you need, or the content may depend on a later interaction or scroll. Wait for a relevant page condition rather than adding an arbitrary delay by default, and verify that the target URL displays the expected content in the browser session being automated.
Lazy-loaded images are absent
Some pages load images only as they approach the viewport. A full-page option alone does not guarantee that every site will load those assets first. Trigger the page’s lazy-loading behavior before capture. Browserless documents a scroll-before-capture option called scrollPage for its service; use the equivalent mechanism documented by whichever library or provider you selected.
The full-page capture crashes or consumes too much memory
Full-page images can be very tall, and Playwright notes that browser allocation limits can cause a page to crash. Reduce the capture area or dimensions, capture only a viewport or element, or reconsider whether the entire page is necessary for the task.
The image has the wrong format or destination
Defaults vary among libraries and hosted services. Explicitly choose a supported image type and output path or output representation, then verify the returned bytes or saved file. For Puppeteer, distinguish its default byte output from base64 encoding; for a hosted API, follow that provider’s response and option documentation.
Recommended Free Tools
A hosted request fails or returns an unexpected response
Check the provider’s authentication instructions, endpoint, request method, URL encoding, and option names. Treat an HTTP error or a non-image response as a failed capture rather than writing it blindly with an image extension. Provider-specific options such as selectors, clipping, and lazy-load scrolling are not interchangeable contracts.
The screenshot differs from what a person sees
Compare the browser viewport, page state, and readiness condition with the conditions you intend to reproduce. Dynamic content may vary between visits, and pages can depend on location, cookies, or authentication. Set only the options supported by your library or provider and test the rendered result for the specific page.
Performance, reliability, and cost considerations
There is no measured performance or cost comparison established here between local browser automation and hosted services. In a local setup, the team manages the browser runtime; with a hosted API, the provider manages rendering and charges according to its own current terms. Compare runtime ownership, available browser controls, authentication and secret handling, output forms, quotas, pricing, and service guarantees using current provider documentation before choosing.
For either approach, full-page and high-resolution images can be large. Capturing only the needed viewport or element can avoid unnecessary image data. For automated systems, handle navigation and capture errors explicitly, keep secrets out of client-side code, and validate output before passing it to later steps.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Frequently Asked Questions
Can JavaScript capture a website without saving a file?
Yes. Puppeteer documents returning screenshot bytes by default, and Playwright’s screenshot method supports output options documented in its Page API. Choose in-memory output when the next step processes the image directly.
Does a screenshot API use the visitor’s browser?
Not necessarily. A hosted screenshot API renders the URL through its own service-side browser environment; local Playwright or Puppeteer code runs the browser runtime managed by your application.
Can I take a full-page screenshot of a page with lazy-loaded images?
Yes, but first trigger the page’s lazy-loading behavior; full-page capture by itself may not make every image load. The method depends on the page and the API.
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.
