iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Playwright or Puppeteer to open your local site in a browser, set the viewport, wait for the page to be ready, and save a viewport, full-page, or element screenshot. The browser process must be able to reach the local server: if it runs in a container or remote runner, its localhost may not be your development machine.
Take a screenshot with Playwright
Start your development server first, then use Playwright to navigate to its local address. This JavaScript example captures a full-page PNG at a desktop viewport size:
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');
await page.screenshot({ path: 'homepage.png', fullPage: true });
} finally {
await browser.close();
}
})();Install Playwright in your project if it is not already available, and install the browser binaries required by your setup. Change the URL and port to match your server. The example uses navigation completion as its next step, but that alone does not guarantee the app has finished rendering all content; use a readiness condition suited to your page when needed. See the Playwright Page API and Playwright screenshot guide for current API details.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose what to capture
- Viewport: Save only what is visible at the current viewport size by omitting
fullPage. - Full page: Set
fullPage: trueto capture the full scrollable document in one image. - One element: Use a locator screenshot when you need a component, card, or other selected region rather than the whole page. The Playwright API documents locator screenshots.
- Image bytes: Capture to a buffer instead of a file when another step in your pipeline will upload, process, or compare the image.
Playwright’s screenshot API also documents options for image format, output path, scale, background handling, masks, and animation behavior. Check the API documentation for exact option names and behavior in the language and version you use.
#1 Best Overall
Wait for the right page state
A screenshot can be taken after navigation while client-rendered content, fonts, images, or other UI are still changing. The right wait depends on the application, so prefer a signal that represents the content you need over an arbitrary delay.
- Wait for a specific heading, component, or other locator that appears when the relevant view is ready.
- Use a deliberate delay only when the page has a known, bounded delay that cannot be expressed as a more meaningful readiness condition.
- Some Puppeteer examples use
waitUntil: 'networkidle2', but ongoing requests can make network-idle waits unsuitable for some applications.
For example, with Playwright you can wait for a page-specific locator before capturing:
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');
await page.getByRole('heading', { name: 'Dashboard' }).waitFor();
await page.screenshot({ path: 'dashboard.png', fullPage: true });Automate more than one viewport
Set the intended dimensions before navigation so responsive layouts load at the size you mean to test. For repeatable desktop and mobile captures, give each output a filename that identifies the route and viewport, and keep the browser and operating-system environment consistent if you are comparing images over time.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →When screenshots are visual tests rather than just generated assets, Playwright Test supports assertions such as await expect(page).toHaveScreenshot(). On first use, the test creates a reference image; later runs compare new captures with it. Playwright documents that it captures until two consecutive screenshots match before saving the actual screenshot. Rendering can vary with the host OS, browser version, settings, hardware, power source, and headless mode, so run baselines and comparisons in the same environment. Review and intentionally update reference images when a design change is expected. See Playwright visual comparisons.
Rank #3
Run the browser where the local server is reachable
The address http://localhost:3000 refers to the machine or network namespace where the browser process runs. A browser started inside a container or remote runner may therefore fail to reach a server running on your host computer. Confirm the server is listening on the expected port and use an address reachable from the browser’s environment; configure container or runner networking as needed.
Use Puppeteer instead
If your project already uses Puppeteer, its documented screenshot workflow follows the same basic pattern: launch a browser, open a page, navigate to the local URL, capture, then close the browser. Puppeteer recommends Page.screenshot() for capturing screenshots; its guide also describes element screenshots and notes that it attempts to scroll a hidden element into view. Consult the Puppeteer Screenshots guide for current options.
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
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await page.goto('http://127.0.0.1:3000', {
waitUntil: 'networkidle2'
});
await page.screenshot({ path: 'homepage.png', fullPage: true });
} finally {
await browser.close();
}
})();networkidle2 is an example rather than a universal readiness rule. If the app keeps connections open or updates content asynchronously, wait for the relevant UI state instead.
Recommended Free Tools
Troubleshoot common capture problems
- Connection refused or navigation timeout: Check that the development server is running at the specified host and port. If the browser runs in a container or remote runner, check that the URL is reachable from that environment.
- Screenshot is blank or missing app content: The page may not yet have rendered the relevant UI. Wait for an app-specific locator or state before capturing.
- Images or fonts are missing: Check that the page’s requests can complete from the browser environment and wait for the content you need to load before taking the screenshot.
- Mobile layout appears at desktop size, or vice versa: Set the viewport before navigation, then verify the dimensions used for the capture.
- Visual test changes unexpectedly between runs: Keep the browser, OS, settings, and execution environment aligned with the baseline. If a visual change is intentional, review and update the reference rather than treating it as an unexplained failure.
- Full-page output is unexpectedly tall or dynamic: Check whether the page loads additional content while scrolling, and capture only after the intended page state is stable.
Or skip the browser setup
For an externally reachable page, ScreenshotNeo can return a screenshot or PDF with one GET request. Its clean-shot options accept cookie and consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each 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 page verdict and billing status in headers. An MCP server provides screenshot tools for AI agents, including Claude, Cursor, and other MCP clients.
ScreenshotNeo’s API is for URLs the service can access; a private local development URL is not automatically reachable from an external service. See the ScreenshotNeo documentation for setup and options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the example URL with the publicly reachable page you want to capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Frequently Asked Questions
Can I take a screenshot of a localhost site from a remote browser?
Only if the local server is reachable from the environment running that browser. Its localhost address may refer to the remote machine or container, not your computer.
Should I use Playwright or Puppeteer?
Use the framework that already fits your project. Both document browser-based screenshot workflows; choose based on your project’s language and testing needs.
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.
