Run a browser automation script on a machine that can reach your local development server. Set the viewport before navigating, wait for the page to reach the state you want to capture, then save a viewport, full-page, or element screenshot. Playwright and Puppeteer both support this workflow. If the browser runs in a container or remote service, its localhost is that environment—not automatically your computer.
Set up the local page and browser
- Start your development server and note the exact URL and port, such as
http://127.0.0.1:3000. - Install Playwright in your project with
npm install -D playwright. Install its Chromium browser withnpx playwright install chromium. - Save the script below as
screenshot.jsand run it withnode screenshot.js. Keep the development server running while it captures.
The browser must run in an environment that can reach the server. On your own machine, loopback addresses such as 127.0.0.1 usually work. A browser inside a container, VM, CI runner, or remote service has its own network context; use an address reachable from there, and configure your server or network accordingly.
As an Amazon Associate I earn from qualifying purchases.
Capture a page with Playwright
This runnable JavaScript example sets the viewport before navigation and captures the full page. It waits for the page load event, which is a starting point, not a guarantee that every application has finished rendering its useful content.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
});
await page.goto('http://127.0.0.1:3000', { waitUntil: 'load' });
await page.screenshot({ path: 'homepage.png', fullPage: true });
} finally {
await browser.close();
}
})();For a viewport-only image, omit fullPage: true. Set the desired width and height in viewport before navigation: responsive sites may render different layouts depending on those dimensions. Playwright’s Page API documents screenshot controls including full-page capture, output path, scale, transparency, masks, and animation handling. Its screenshots guide gives further examples.
#1 Best Overall
Choose the right capture target
- Viewport: captures what is visible in the browser at the current viewport size. Use it for a particular screen-sized state.
- Full page: captures the page’s full scrollable content as a tall image using
fullPage: true. This is useful for a whole-page review, but very long pages may produce large images. - Element: captures a locator rather than the entire page. For example, replace the screenshot line with
await page.locator('main').screenshot({ path: 'main.png' });. Choose a selector that uniquely identifies the target; a missing or ambiguous target can cause the capture to fail or select an unintended element. - Image bytes: if the next step uploads or compares the image, use
const image = await page.screenshot();and pass the returned buffer onward instead of writing a file. Playwright documents this buffer approach in its API.
Puppeteer offers the same basic pattern if it is already part of your project. Its official guide says, “For capturing screenshots use Page.screenshot().” The guide displayed version 25.12.0 when accessed; check the Puppeteer screenshots guide for the API details matching your installed version.
Wait for the application, not just navigation
A screenshot is only useful if it captures the intended UI state. A navigation event can finish before a client-rendered component, delayed font, image, or data request has settled. Prefer a signal that corresponds to the page’s actual readiness, such as a visible heading or a test-specific ready marker:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.goto('http://127.0.0.1:3000', { waitUntil: 'load' });
await page.locator('[data-testid="page-ready"]').waitFor();
await page.screenshot({ path: 'ready.png', fullPage: true });Use a selector that your app exposes only after the content you need is ready. A fixed delay can be useful for a known, intentional animation or transition, but it is a poor general readiness check: it may waste time on fast runs and still be too short on slow ones.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Puppeteer’s networkidle2 navigation option is one possible wait strategy, not a universal definition of readiness. Apps with polling, streaming, analytics, or other persistent network activity may never become network-idle, while a quiet network does not prove that the correct UI has rendered.
Rank #3
Automate desktop and mobile captures
For a repeatable viewport matrix, create each page with its dimensions set before navigation and give each output a name that identifies the route and viewport. For example, capture the same route at 1440 × 900 and 390 × 844 in separate runs. This makes responsive changes easier to locate than a set of generically named files.
If you compare screenshots over time, keep browser, operating system, rendering settings, and execution environment consistent. Playwright warns that rendering can vary with the OS, browser version, settings, hardware, power source, and headless mode. Its visual comparisons guide explains that screenshot assertions capture until two consecutive screenshots match; the first run creates a reference image, and later runs compare against it. Review and intentionally update a baseline when a design change is expected rather than accepting every difference automatically.
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
Rotating banners, timestamps, animations, and other volatile content can make comparisons noisy. Where practical, make test data deterministic, disable animations in a controlled test setup, or mask a changing region. Do not mask elements whose appearance is part of the behavior you need to verify.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshoot common capture failures
- Connection refused or navigation timeout: confirm the server is running, the port and scheme are correct, and the browser process can reach that address. For container or remote runs, check network access rather than assuming the developer machine’s
localhostis shared. - Screenshot is blank or content is missing: navigation may have completed before client-side rendering or data loading. Wait for a meaningful app-specific selector or state before capturing.
- Full-page image has missing lazy-loaded content: content that loads only during scrolling may not yet exist. Scroll through the page or otherwise trigger the app’s lazy-loading behavior, then wait for the required content before capture.
- Element capture fails: check that the selector matches an element on the page and that it is rendered. Wait for the locator to appear before taking its screenshot.
- Visual snapshots differ unexpectedly: verify that viewport, browser, OS, fonts, data, and headless configuration match the baseline environment. Stabilize or mask genuinely volatile regions, and inspect any baseline update.
- Browser launch fails: install the browser binary required by Playwright with
npx playwright install chromiumin the environment that runs the script; installing the package alone may not install the browser.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server. Its remote API cannot directly reach a private localhost server: publish the page to a reachable staging URL or expose it through a secure tunnel first, then use that reachable URL as the capture target. The call below saves a WebP screenshot; see the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpBefore capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free 1,000 screenshots a month—no card required.
Frequently Asked Questions
Can a screenshot script capture a page that requires a login?
Yes, if the automated browser can complete the site’s authentication flow or is given an authorized test session. Use test credentials and keep secrets out of committed scripts and screenshot artifacts.
Which browser engine should I use for screenshot tests?
Use the engine required by your application’s testing coverage. The examples here use Chromium; the cited material does not establish a comparative browser-support ranking.
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.
