What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Direct answer: launch a real browser with Playwright or Puppeteer, navigate to the URL, wait for the page state you need, then call the browser’s screenshot method. Use fullPage: true for the entire scrollable document, a locator or element handle for one component, and an explicit image type for PNG, JPEG, or WebP output. For a hosted option, ScreenshotNeo captures a URL with one request and handles browser setup for you.
Choose the right automation approach
Browser automation is the flexible do-it-yourself route: your code controls navigation, authentication, waits, viewport, cookies, JavaScript and file storage. Playwright supports Chromium, Firefox and WebKit from one API. Puppeteer is centered on Chrome/Chromium and exposes the same essential flow through Page.screenshot(). A screenshot API is better when you do not want to maintain browser binaries, sandboxing, queues or rendering workers.
| Need | Best fit | Important control |
|---|---|---|
| Cross-browser test coverage | Playwright | Chromium, Firefox and WebKit projects |
| Chrome-focused scripts | Puppeteer | waitUntil: 'networkidle2' or a selector wait |
| One URL-to-image request | ScreenshotNeo | PNG, JPEG, WebP or PDF response |
Prerequisites and a reliable capture sequence
- Install Node.js and the package for your chosen framework.
- Open a page with a known viewport and, when needed, a device scale factor.
- Navigate with an appropriate timeout and wait condition.
- Wait for the selector or application state that proves the content is ready.
- Capture the viewport, full page, element or clipped rectangle.
- Close the browser in a
finallyblock so failed jobs do not leak processes.
A network-idle event is only a heuristic. Analytics, advertisements and WebSockets can keep a page active forever, while a single-page app may become visually ready before network idle. Prefer a specific selector or state whenever you know one.
Playwright: complete JavaScript examples
Install and capture the visible viewport
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: 'domcontentloaded', timeout: 60000 });
await page.screenshot({ path: 'screenshot.png', type: 'png' });
} finally {
await browser.close();
}
})();This follows Playwright’s documented page.goto(), page.screenshot() and browser.close() pattern (screenshots guide).
#1 Best Overall
Capture the complete scrollable page
await page.goto('https://example.com/article', { waitUntil: 'domcontentloaded' });
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({ path: 'article-full.webp', fullPage: true, type: 'webp' });fullPage is false by default; setting it to true captures the full scrollable page as if it were displayed on a very tall screen (Page API). For lazy-loaded images, scroll through the document or wait for the image elements to complete before capturing.
Capture one element, clip a region, or keep bytes in memory
await page.locator('.header').screenshot({ path: 'header.png' });
await page.screenshot({ path: 'card.jpg', type: 'jpeg', quality: 85,
clip: { x: 100, y: 200, width: 640, height: 360 } });
const bytes = await page.screenshot({ type: 'png' });
// send bytes to object storage or an image processorlocator.screenshot() waits for and captures the selected element. A clip rectangle uses CSS pixels. Use a device scale factor when you need sharper output for high-density displays; remember that pixel dimensions and file size increase.
Wait for dynamic content and control the page
await page.goto('https://example.com/dashboard', { waitUntil: 'domcontentloaded' });
await page.waitForSelector('[data-ready="true"]', { state: 'visible', timeout: 30000 });
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(500); // only for a known animation or delayed render
await page.screenshot({ path: 'dashboard.png', fullPage: true });Use page.addStyleTag() or page.evaluate() to hide transient elements, and authenticate with storageState, cookies or headers rather than putting credentials in a URL. Redact personal or secret data before sharing output.
Playwright CLI and other output choices
The Playwright screenshot tooling supports viewport selection, a target URL, full-page mode, custom filenames, image type and high-resolution/device-pixel options. The MCP screenshot tool also exposes PNG, JPEG, WebP, CSS-pixel or device-pixel scale and a fullPage switch (MCP screenshots; CLI commands). Check the installed version’s help output because command names can change.
Recommended Free Tools
Rank #2
![Free Fling File Transfer Software for Windows [PC Download]](https://m.media-amazon.com/images/I/41Vq6ZqHfjL._SL160_.jpg)
- Intuitive interface of a conventional FTP client
- Easy and Reliable FTP Site Maintenance.
- FTP Automation and Synchronization
Puppeteer: Chrome automation
Install and capture a viewport
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, deviceScaleFactor: 1 });
await page.goto('https://news.ycombinator.com', {
waitUntil: 'networkidle2', timeout: 60000
});
await page.screenshot({ path: 'hn.png', type: 'png' });
} finally {
await browser.close();
}
})();Puppeteer’s guide describes Page.screenshot() as the capture API (official guide). For a component, select it and use ElementHandle.screenshot():
const element = await page.$('.story');
if (!element) throw new Error('story element not found');
await element.screenshot({ path: 'story.webp', type: 'webp' });Puppeteer options that matter
fullPage: truecaptures beyond the viewport; it defaults to false.clip: { x, y, width, height }captures a rectangle.type: 'png' | 'jpeg' | 'webp'selects the format where supported; JPEG acceptsquality.encoding: 'binary' | 'base64'controls returned data when no path is supplied.omitBackground: truepreserves transparency where the page background allows it.captureBeyondViewportcontrols off-screen capture behavior for clipped regions.
These are documented in Puppeteer’s ScreenshotOptions reference.
PNG, JPEG, or WebP?
- PNG: lossless, supports transparency and crisp text; usually largest.
- JPEG: smaller for photographs; lossy and unsuitable for transparent UI.
- WebP: often a good size-quality compromise; confirm that your downstream consumer accepts it.
Choose the format at capture time when possible. Converting later cannot restore detail lost through JPEG compression.
Reliability checklist for production jobs
- Set navigation and selector timeouts; never let a hung page occupy a worker indefinitely.
- Use a deterministic viewport, timezone, locale and color scheme for repeatable images.
- Wait for the actual hero image, chart, table or application-ready marker.
- For full pages, verify lazy content loaded below the fold.
- Close every browser and page, including error paths; limit concurrent browsers to available CPU and memory.
- Retry transient navigation failures with backoff, but do not blindly retry authentication or CAPTCHA responses.
- Mask or remove sensitive fields before publishing screenshots.
- Record URL, timestamp, viewport, commit/version and readiness condition with the artifact.
Troubleshooting common failures
The file is blank or only partly rendered
The capture ran before the app rendered. Wait for a meaningful selector, wait for its images or chart data, and ensure the page was not closed early. For a full page, force or observe lazy loading before the screenshot.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Navigation times out
Check DNS, TLS, proxy and authentication first. Increase the timeout only when the site is legitimately slow. Replace networkidle with domcontentloaded plus a selector wait on pages that maintain long-lived connections.
A consent banner, chat bubble, or animation appears
Accept consent in the session, hide the known selector, disable animation with injected CSS, or wait until the animation ends. Do not remove content blindly if it is part of the page you intend to document.
Images are missing
Inspect the image requests and lazy-loading attributes, scroll to trigger loading, and wait for img.complete and natural dimensions. A blocked tracker or cross-origin policy can also prevent a resource from rendering.
Element capture fails
Verify the selector matches exactly one visible element, wait for it, and scroll it into view. If it is inside an iframe, obtain the frame first; if it is in a shadow root, use the framework’s locator support.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCI crashes or cannot launch Chromium
Install the browser binaries in the build image, cache them between jobs, and follow the runner’s sandbox guidance. Keep browser processes isolated and reduce concurrency when memory is exhausted.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo turns a URL into a PNG, JPEG, WebP or PDF through one GET request. It accepts the consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. It also offers full-page and element capture, device presets, retina scale, custom CSS and JavaScript, clicks, selector or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, selectable-TTL caching, signed links, asynchronous webhooks, bulk capture for up to 100 URLs, a usage API and an OpenAPI specification. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the ScreenshotNeo documentation for all parameters. The same request works from cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);The Free plan includes 1,000 screenshots per month without a card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan, and yearly billing provides two months free. Create a free ScreenshotNeo account.
Cost and scaling decisions
| Plan | Allowance | Price |
|---|---|---|
| Free | 1,000 shots/month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Self-hosting gives maximum control but makes you responsible for browser downloads, patching, workers, storage and retries. A hosted API trades that infrastructure work for per-shot pricing and service limits. Cache stable pages with a chosen TTL, use bulk capture for batches, and reserve full-page or high-scale images for cases that need them.
Best Value
FAQ
Can automation capture a page after login?
Yes. Reuse an authenticated browser profile or provide cookies and headers securely; never hard-code credentials in source or expose them in screenshot URLs.
What does a full-page screenshot include?
It includes the document’s scrollable content, not merely the current viewport. Elements that render only after scrolling still require a loading strategy.
Can I automate screenshots on a schedule?
Yes. Run the script from a scheduler or queue, save metadata with each image, and compare images only after normalizing viewport, locale and readiness conditions.
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.
