Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The most reliable way to capture a live website is to automate a real browser. Playwright can open the URL, wait for the page to load, and save a viewport, full-page, or element screenshot as PNG, JPEG, or WebP. It can also return image bytes for further processing. The same approach works from a developer laptop or a CI job, while Chrome DevTools Protocol and Puppeteer provide alternative browser-automation APIs.

Choose the capture scope before writing code

A screenshot is not one fixed thing. Decide what the image must contain:

  • Viewport: the portion currently visible in the browser window. This is the default and is useful for reproducing what a visitor sees at a specific viewport size.
  • Full page: the entire scrollable document, rendered as though the page could fit on one very tall screen. Playwright documents this as a separate fullPage mode.
  • Element: one component such as a pricing card, chart, article, or hero section, selected with a CSS locator.

Also choose whether to write a file immediately or keep the returned bytes in memory. A file is simplest for a human review; bytes are better when the next step uploads, resizes, hashes, or analyzes the image.

Capture a live page with Playwright

The following Node.js example uses the Playwright package and WebKit, matching the official example. Chromium and Firefox are also supported. The script navigates to a live URL, waits for the document load event, captures the page, and closes the browser even if the capture fails.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Sale
Philips 24 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 241V8LB
  • CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
  • WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
  • A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
import { webkit } from 'playwright';

const browser = await webkit.launch();
const context = await browser.newContext({
  viewport: { width: 1440, height: 900 },
  deviceScaleFactor: 1
});
const page = await context.newPage();

try {
  await page.goto('https://example.com', {
    waitUntil: 'load',
    timeout: 60000
  });
  await page.screenshot({
    path: 'example-viewport.png',
    type: 'png'
  });
} finally {
  await browser.close();
}

Install Playwright with npm install playwright. The first run may also require the browser binaries supplied by your project setup. The path determines where the image is saved. Change the URL and filename for your page.

Capture the entire scrollable page

Set fullPage: true when the output must include content below the fold:

await page.screenshot({
  path: 'example-full-page.png',
  fullPage: true,
  type: 'png'
});

Full-page rendering can be very tall. Pages that continuously append content while scrolling, use sticky elements, or lazy-load images may need extra preparation; otherwise the result may represent only the content available at capture time.

Capture one element

Use a locator’s screenshot method for a component rather than the whole document:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const card = page.locator('[data-testid="pricing-card"]');
await card.waitFor({ state: 'visible', timeout: 30000 });
await card.screenshot({
  path: 'pricing-card.png',
  type: 'png'
});

A stable attribute such as data-testid is less fragile than a long positional selector. If the selector matches multiple nodes, refine it with a class, role, text, or .nth().

Return bytes instead of writing a file

Omit path and keep the returned buffer:

const imageBytes = await page.screenshot({
  fullPage: true,
  type: 'jpeg',
  quality: 85
});
// Pass imageBytes to an uploader, image processor, or test assertion.

Image options vary by Playwright version, so check the Page API documentation when you depend on a particular format or option. The official screenshot guide covers full-page, element, and buffer captures.

Rank #2
Philips 22 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 221V8LB
  • CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
  • SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors

Make the capture deterministic

A live site can still be changing while the browser takes its shot. Add explicit waits for the state that matters instead of relying only on a fixed sleep.

Wait for a selector

await page.goto('https://example.com/dashboard', { waitUntil: 'domcontentloaded' });
await page.locator('#main-chart').waitFor({ state: 'visible', timeout: 30000 });
await page.screenshot({ path: 'dashboard.png', fullPage: true });

Wait for network activity to settle

await page.goto('https://example.com', { waitUntil: 'networkidle' });

Network-idle is useful for pages that fetch data after navigation, but analytics, ads, or persistent connections can prevent the condition from occurring. In that case, wait for a meaningful selector or use a bounded delay after the required content appears.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Control viewport and device scale

Set the viewport in browser.newContext so responsive breakpoints are repeatable. A larger deviceScaleFactor produces more pixels for the same CSS dimensions, which can improve text detail while increasing file size. Record these settings with the image if you need to compare captures later.

Handle lazy-loaded images

For a full-page shot, scroll through the document before capturing so intersection-observer images have a chance to load:

await page.goto('https://example.com/article', { waitUntil: 'domcontentloaded' });
await page.evaluate(async () => {
  await new Promise(resolve => {
    let last = 0;
    const step = () => {
      window.scrollTo(0, document.body.scrollHeight);
      const current = document.body.scrollHeight;
      if (current === last) return resolve();
      last = current;
      setTimeout(step, 250);
    };
    step();
  });
  window.scrollTo(0, 0);
});
await page.screenshot({ path: 'article.png', fullPage: true });

This is site-dependent: an infinite feed may never reach a stable height. Set a maximum scroll duration or capture a defined element instead.

Rank #3
Sale
Dell 24 Monitor - SE2426H - 23.8-inch FHD (1920x1080) 144Hz 1ms Display, in-Plane Switching (IPS) Technology, AMD FreeSync™, TÜV 3-Star 2X HDMI, Tilt
  • Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
  • Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
  • Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
  • In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
  • Ultra-thin bezels: Maximize your viewing experience with thin bezels.

Authentication, consent, and dynamic interfaces

Authenticated pages

Navigate through the login flow in the same browser context or load an approved storage state. Do not put credentials in source code or logs. A screenshot API cannot legitimately bypass access controls; the account must already have permission to view the page.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Cookie and consent dialogs

A consent modal can obscure the page or become part of the image. In Playwright, locate the site’s accept or reject control and click it before capture when your legal and product requirements permit. Because labels differ by site, there is no universal selector. If the dialog is inside an iframe, obtain the appropriate frame locator first.

Popups, chat, and animations

Hide or close overlays that are not part of the intended state. Pause animations with page CSS when visual stability matters, and wait for fonts or a key component to become visible. These are site-specific interventions; the reviewed browser APIs do not guarantee identical results on every live website.

Choose PNG, JPEG, or WebP

  • PNG: lossless and suitable for UI text, diagrams, and pixel comparisons; usually larger.
  • JPEG: smaller for photographs; choose a quality value when supported, accepting compression artifacts.
  • WebP: often reduces size while retaining good quality, provided your downstream tools accept it.

Use the format required by your storage or visual-regression system. Keep the same format and quality across runs when comparing images.

Other browser-based capture options

Chrome DevTools Protocol

Chrome’s DevTools Protocol exposes Page.captureScreenshot for protocol-driven captures. It is appropriate when your system already controls a Chrome or Chromium process directly. See the Page domain documentation for the current method and parameters.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #4
Sale
Samsung 27" Essential S3 (S36GD) Series FHD 1800R Curved Computer Monitor
  • CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
  • SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
  • MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
  • KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
  • INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient

Puppeteer

Puppeteer is another Chrome automation library with screenshot support. It can be a practical choice when your existing test or scraping stack is already Puppeteer-based. Its official overview is at Chrome for Developers. The available documentation establishes these capabilities, not a universal performance winner among Playwright, Puppeteer, and raw protocol calls.

Or skip the browser setup

ScreenshotNeo provides a hosted website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF, so you do not install browser binaries or maintain navigation code. Before capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.

Here is the one-call cURL form (see the ScreenshotNeo API documentation for all parameters):

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

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(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));

ScreenshotNeo includes full-page and element capture, dark mode, 12 device presets plus custom viewports, retina scale, PDF paper and page-range controls, custom CSS and JavaScript, pre-capture clicks, selector hiding, waits, ad/tracker/request blocking, headers, cookies, user agents, Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and compatibility with parameter names used by other screenshot APIs.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots. Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free, and every feature is on every plan. Create a free ScreenshotNeo account to try the 1,000 monthly screenshots without a card.

Troubleshoot common failures

Symptom Likely cause Fix
Navigation timeout Slow server, blocked resource, or never-ending connection Increase the timeout within a sensible limit, wait for domcontentloaded, and inspect the page response and console logs.
Blank or partially rendered image Capture ran before client-side content appeared Wait for a content-specific locator, then capture; avoid relying only on a short sleep.
Element not found Selector changed, iframe boundary, or responsive layout Verify the selector in the target viewport, use a frame locator for iframes, and wait for visibility.
Cookie dialog covers content Consent UI remained open Click the appropriate control or configure a permitted consent-handling step before capture.
Images missing in full-page output Lazy loading or blocked image requests Scroll to trigger lazy loading, wait for image visibility, and check request interception rules.
Huge files or slow jobs Very tall page, high device scale, or lossless format Capture a needed element, lower the scale, or use JPEG/WebP where visual comparison permits.
Different results between runs Responsive breakpoints, animation, ads, time, or personalized state Fix viewport, timezone, locale, authentication state, and waits; disable animation and capture from a controlled context.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Reliability, performance, and cost considerations

For a handful of captures, a local Playwright script is straightforward and keeps the browser state under your control. For scheduled jobs or many URLs, reuse a browser process carefully, cap concurrency, and close contexts so memory does not grow without bound. Store the URL, timestamp, viewport, browser engine, and relevant wait condition alongside each image.

Best Value
Sale
Sceptre New 22-Inch Gaming Monitor, FHD 1080p, Up to 144Hz, HDMI, DisplayPort, Built-in Speakers, Machine Black (E225W-FW144 Series, 2026)
  • 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
  • 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
  • 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.

Hosted capture shifts browser maintenance and scaling to a service. ScreenshotNeo’s billing behavior is explicit in each response: only clean shots are billed, while bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Its configurable caching TTL can reduce repeat work when a page does not need a fresh render. Treat cache deliberately when the requirement is a truly current page.

FAQ

Can I capture a screenshot without installing a physical capture device?

Yes. Playwright, Chrome DevTools Protocol, and Puppeteer perform the capture through browser software; a camera, capture card, or special monitor is not required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What does “full-page screenshot” mean?

It means the complete scrollable document is rendered into one image rather than only the visible viewport. Playwright exposes this with fullPage: true.

Can a screenshot prove exactly what every visitor saw?

No. Authentication, consent state, personalization, delayed content, viewport, and site access restrictions can change the result. Record the conditions used for the capture.

Frequently Asked Questions

Which browser engine should I use with Playwright?

The documented example uses WebKit, while Chromium and Firefox are available alternatives. Choose the engine that matches your testing or production environment and keep it consistent for comparisons.

Should I save screenshots as files or bytes?

Save a file for direct review or archival. Omit the path and use the returned buffer when another program will upload, transform, or analyze the image.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Is a hosted API better than Playwright for every project?

No. Playwright offers local control and customization; a hosted API is convenient when you want a single request, managed browsers, or high-volume scheduling. Choose based on operational needs.

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.