Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Run the browser inside the agent’s isolated environment, wait for the page state you actually need, then capture the entire scrollable document with Playwright’s fullPage: true option. If a managed browser is supplied remotely, connect to its CDP endpoint first. The essential call is await page.screenshot({ path: 'full-page.png', fullPage: true }); the Playwright CLI equivalent is playwright-cli screenshot --full-page --filename=full-page.png.
This guide shows how to build that workflow without leaking personal cookies, writing outside approved directories, or filling an AI context with an oversized image. It also explains when a browser-page capture is insufficient and an OS-level screenshot is the right tool.
As an Amazon Associate I earn from qualifying purchases.
Recommended Free Tools
What does a full-page screenshot capture?
A viewport screenshot records only the pixels currently visible in the browser window. A full-page screenshot renders the page’s complete scrollable document as though it were displayed on a very tall screen. In Playwright, fullPage: true is the setting that requests this behavior.
That is different from an element screenshot, which clips to one DOM element. Playwright’s MCP documentation also separates screenshots from accessibility snapshots and DOM inspection: snapshots are better for finding and operating controls, while screenshots provide visual evidence of layout, canvas output, charts and rendering bugs. Use both when an agent must understand a page and prove what it looked like.
Popular on Amazon
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Full-page capture is still a browser-page operation. It does not include native file pickers, operating-system notifications, other windows, or dialogs drawn outside the page. Those require OS-level automation.
What does an agent need before it starts?
Prepare the isolation boundary before opening an untrusted URL. The browser, file writer and network policy should all belong to the agent’s task rather than to a developer’s everyday session.
- Dedicated browser profile: launch a temporary user-data directory or a profile created solely for the agent. Never attach an agent to a personal profile containing unrelated cookies, saved passwords or logged-in accounts.
- Approved output roots: configure the harness so screenshot-writing tools can access only a designated workspace or temporary directory. Chrome’s agent configuration restricts file tools to configured workspace roots or the temporary directory.
- Network controls: apply URL allowlists or blocklists when your harness supports them. This limits accidental navigation and unexpected subresource requests.
- Browser runtime: install a compatible Chromium-based browser and Playwright, or obtain a browser session from a managed sandbox that exposes CDP.
- Readiness policy: decide what “ready” means for this page: a selector visible, a known application state, a short delay after an interaction, or a network condition.
- Artifact policy: choose PNG for lossless review, or JPEG/WebP when storage and model-context size matter more than lossless pixels.
How do I capture a full page with Playwright inside the sandbox?
Use a page-specific readiness condition whenever possible. networkidle is a useful example, not a guarantee that every lazy-loaded image or client-rendered component has appeared.
1. Launch an isolated browser and create a page
The exact launch command depends on your agent runtime. The important properties are a temporary profile, headless execution where appropriate, and a workspace path that the sandbox permits.
2. Navigate and wait for the intended state
Navigate to the target URL, then wait for a selector or application signal that represents the content you want to preserve. For pages that reveal content during scrolling, trigger the relevant loading behavior before capture; this is prudent implementation practice, not a universal guarantee.
3. Capture the scrollable document
await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot({
path: 'artifacts/full-page.png',
fullPage: true
});Save under an approved workspace path. If the agent must inspect the image inline, return a buffer through the harness’s supported image response. Otherwise, pass the model a bounded reference to the stored artifact.
Free tools Windows power users keep installed
One-click scans. No signup required.
4. Use the CLI when a shell workflow is simpler
playwright-cli open https://example.com
playwright-cli screenshot --full-page --filename=artifacts/full-page.pngThe CLI accepts --type=png|jpeg|webp and --hires. High-resolution mode captures device pixels, which can improve legibility but means coordinates no longer map directly to CSS-pixel mouse coordinates.
How can Playwright connect to a remote browser sandbox over CDP?
When a provider owns the browser process, do not start a second local browser. Use the provider’s CDP endpoint and Playwright’s CDP connection method, then operate the returned context and page normally.
Also popular on Amazon
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
import { chromium } from 'playwright';
const browser = await chromium.connectOverCDP(process.env.CDP_ENDPOINT);
const context = browser.contexts()[0] || await browser.newContext();
const page = context.pages()[0] || await context.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({
path: 'artifacts/remote-full-page.webp',
fullPage: true,
type: 'webp'
});
await browser.close();Managed environments may require connection headers, a token, a session identifier, or a provider-specific lifetime. Keep those values in the agent’s secret store rather than embedding them in prompts or output artifacts. Google Cloud documents Playwright connectivity over CDP for its isolated computer-use sandbox, and Cloudflare documents browser adapters and persistent sessions that use CDP. Session limits and authentication details vary by provider.
Which capture method should an agent use?
Choose based on the capture boundary you need, not simply on which API has the shortest command.
| Approach | Best for | Main trade-off | Scope |
|---|---|---|---|
| Playwright API in the sandbox | Local headless browser and deterministic files | The agent manages browser installation, lifecycle and artifact paths | Rendered webpage |
| Playwright over CDP | A browser supplied by a managed sandbox or browser service | Provider-specific headers, session lifetime and limits | Rendered webpage in the remote session |
| Browser-page screenshot API | Rendering a webpage’s scrollable document without browser setup | Does not capture native dialogs, OS notifications or other desktop windows | Webpage |
| OS-level screenshot API | Native dialogs, print flows, full-screen or multi-window layouts | Broader capture scope creates more sensitive output | Desktop and windows |
AWS distinguishes ordinary browser automation over CDP from OS-level browser actions that can handle native dialogs and full-screen screenshots. Use OS-level capture only when the page boundary is genuinely insufficient.
How do I handle lazy-loaded and dynamic pages?
A full-page flag changes the screenshot extent; it does not understand your application’s loading contract. Make dynamic state explicit.
Wait for a meaningful selector
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.locator('[data-page-ready="true"]').waitFor({ state: 'visible' });
await page.screenshot({ path: 'artifacts/ready.png', fullPage: true });If the site has no reliable marker, wait for a stable heading, a chart container, or a known result count. A generic timeout should be a fallback, not your only readiness test.
Trigger content that loads on scroll
Some pages request images only when their containers approach the viewport. Scroll through the document in controlled increments, allow requests to settle, and then take the full-page capture. Record this behavior because it affects reproducibility.
Freeze an application state
For dashboards or animated pages, disable animations with injected CSS where the task permits it, set a deterministic timezone and locale, and capture after the application reports an idle state. Do not assume that a network-idle event means a chart has finished drawing on a canvas.
Remember the MCP limitation
The Playwright MCP screenshot tool supports a viewport, a specific element, or the full scrollable page. Its documented interface does not allow fullPage and target together. If you need one element from a long page, locate it first and request an element screenshot rather than combining both options.
Also popular on Amazon
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
How can I keep large screenshots usable for an AI agent?
Long, image-heavy pages can produce artifacts that are too large for a model context or a provider response limit. Select the smallest representation that still answers the visual question.
- Use PNG when exact, lossless pixels matter, such as text inspection or visual regression.
- Use JPEG or WebP when a smaller artifact is acceptable. Chrome’s agent documentation identifies these formats as smaller choices for reducing AI-conversation context size.
- Capture a viewport when the question concerns one screen rather than the complete document.
- Downscale or resize after capture when the reviewer needs page structure but not pixel-level detail.
- Tile the page into bounded sections when a single image exceeds the harness limit. Keep overlap between tiles so an agent can follow content across boundaries.
Limits are harness-specific. Cloudflare’s browser documentation describes result truncation at about 24,000 characters and a screenshot ceiling of 1 MB, recommending a viewport capture or JPEG for a long page. Treat those as Cloudflare-specific constraints, not universal browser limits. Implement a fallback that compresses, switches format, bounds the viewport or tiles the page.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC 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 & 11Avoid --hires unless the reviewer needs extra resolution. Device-pixel output increases the artifact and makes coordinate reuse harder because device pixels no longer correspond one-to-one with CSS pixels.
How do I save screenshots safely?
Make the artifact path, browser identity and navigation policy explicit in every job.
- Generate a task-scoped directory beneath an approved workspace root. Reject path traversal and do not accept arbitrary paths supplied by page content.
- Use a disposable profile and close it after the capture. This prevents cookies and local storage from persisting into another task.
- Constrain navigation with an allowlist or blocklist where available. Remember that a permitted page can still request third-party resources.
- Limit JavaScript evaluation. Chrome documents a control for disabling unrestricted JavaScript-evaluation tools; leave them disabled unless the task requires them.
- Inspect tool instructions as untrusted input. Page-provided tool names, descriptions, schemas and results can be malicious or misleading. Playwright’s CLI documentation explicitly warns about this for WebMCP.
- Record provenance: URL, viewport, browser/runtime version, wait condition, format, scale, output path, and whether the artifact is page-level or OS-level.
- Clean up: remove temporary profiles and sensitive artifacts according to your retention policy.
A screenshot is evidence of pixels at one moment, not proof that every below-the-fold component rendered correctly. Validate lazy loading and dynamic data separately.
What commonly goes wrong, and how do I fix it?
The image contains only the viewport
Confirm that the API call uses fullPage: true and that the CLI includes --full-page. An element-targeted screenshot or a tool that defaults to viewport mode will not capture the document.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsThe bottom of the page is blank
The page may load content on scroll or after a client-side state change. Scroll through the document, wait for the relevant selector or image requests, and capture again. Do not treat networkidle alone as proof that lazy content is ready.
The screenshot is clipped or too large
Check the harness’s byte and context limits. Switch to JPEG or WebP, reduce scale, capture a bounded viewport, or tile the page. Cloudflare’s documented 1 MB screenshot ceiling is one provider-specific example.
Also popular on Amazon
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Widely Compatible: Transform any USB-C port into a USB-A port and USB-A port into a USB-C port, and connect up a wide range of USB-C(including MacBook, iPad Pro/Air/Mini, iPhone models with USB C ports, Samsung Galaxy series, and Google Pixel series. ) and USB A devices(including external hard drives, phones, mice, printers, and more)
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
The agent cannot write the file
The destination is probably outside an approved workspace root or temporary directory. Use a task-scoped path under the configured root and verify that the screenshot tool, not only the shell, has permission to write there.
CDP connection fails
Verify that the endpoint is reachable from the sandbox, that required headers or tokens are present, and that the remote session is still alive. A provider may expose a browser only for a bounded session lifetime. Do not silently fall back to a personal local profile.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Coordinates miss after a high-resolution capture
--hires produces device-pixel output. Keep interaction coordinates in CSS pixels or omit high-resolution mode when the same artifact will drive follow-up clicks.
A consent banner or chat widget obscures the page
For a DIY browser, locate and dismiss the banner before capture, or hide the obstructing selector with page-specific code. If you need this cleanup handled before rendering without maintaining selectors, a screenshot API can perform it as part of the capture workflow.
The screenshot includes a native dialog that Playwright cannot see
Switch from a browser-page screenshot to an OS-level capture. CDP is intended for ordinary browser automation; OS-level browser actions are designed for native dialogs and full-screen content outside the page viewport.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP or PDF, so an agent does not need to install or manage a browser for each capture. Its cleanup steps can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before the shot; each step can be turned off.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response reports the result in X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Use the API documentation at screenshotneo.com/docs/ for authentication and all options. This one-call example captures Stripe as WebP:
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,
)
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(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or any viewport, retina scale, PDF paper size/margins/landscape/page ranges, HTML/CSS-to-image, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for a selector, delay or network idle, blocked ads/trackers/requests/resource types, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, image resizing, selectable-TTL caching, signed links for public <img> tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
Every feature is on every plan. The Free plan includes 1,000 shots per month with no card; paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing provides two months free. Create a free ScreenshotNeo account to get 1,000 screenshots a month without a card.
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 →Also popular on Amazon
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
How should I choose between local Playwright, CDP and an API?
Use local Playwright when you need deterministic control over a browser you own and can safely manage its lifecycle. Use Playwright over CDP when a managed sandbox supplies persistence, isolation or browser capacity that you do not want to operate. Use a browser-page API when the goal is a repeatable webpage artifact and browser installation, consent cleanup or batch orchestration would otherwise dominate the job.
Choose OS-level automation only for desktop scope: native dialogs, print interfaces, multiple windows or content outside the browser viewport. For ordinary web pages, OS-level capture expands permissions and sensitivity without improving the page screenshot.
What should every production capture record?
Store a small manifest beside the image or in your job database:
- Target URL and any navigation redirects.
- Browser and runtime versions, or the remote provider and session identifier.
- Viewport dimensions, device scale or retina setting, and output format.
- Readiness condition, waits, scroll strategy and any injected CSS or JavaScript.
- Whether the capture was full-page, element-level, viewport-only or OS-level.
- Artifact path, byte size, compression choice and retention deadline.
- Verdict and billing headers when an API supplies them.
This record makes a later mismatch diagnosable without retaining a user’s cookies or an unrestricted browser profile.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Frequently Asked Questions
Can a full-page screenshot prove that every lazy-loaded image rendered?
No. Full-page mode controls the capture extent, not application readiness. Trigger the page’s loading behavior and wait for page-specific selectors, then validate critical assets separately.
Should I use an accessibility snapshot instead of a screenshot?
Use a snapshot or DOM inspection to find and operate controls; use a screenshot for visual layout, canvas and rendering evidence. They answer different questions and are most useful together.
When should I split one long page into multiple screenshots?
Split it when the harness or model context imposes byte or response limits, or when a single image becomes difficult to inspect. Overlap neighboring tiles so text and components remain traceable across boundaries.
Does CDP capture browser dialogs such as print or file pickers?
Not reliably. CDP is intended for ordinary browser automation, while OS-level browser actions are designed for native dialogs and full-screen content outside the webpage.
How can I prevent an agent from exposing private account data in a screenshot?
Use a disposable profile, avoid personal browser sessions, restrict navigation and output roots, and remove temporary artifacts after the job. Record only the metadata needed to reproduce the capture.
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.
