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 problemsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use Playwright’s page.screenshot() method to capture the visible browser viewport, then add options such as fullPage: true for the scrollable page or call screenshot() on a locator to capture one element. The examples below use Playwright’s JavaScript API and show how to choose the capture area, format, pixel scale, and settings for more consistent images.
Set up a browser page for capture
The basic capture call runs after you have opened a page in a Playwright browser. This complete JavaScript example launches Chromium, visits a URL, saves a viewport screenshot, and closes the browser:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();Install Playwright in your project if it is not already installed, and make sure the browser you intend to launch is available. Replace the example URL with the page you need. path tells Playwright to write the image to a file; without it, the screenshot call can return image data as a buffer instead.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose what to capture
The capture method depends on whether you need the current screen, the entire scrollable document, a particular element, or a precise rectangle.
#1 Best Overall
Capture the current viewport
page.screenshot() captures the page’s currently visible viewport by default:
await page.screenshot({ path: 'viewport.png' });Set the viewport size before navigating if you need a predictable layout. A page can reflow at different viewport widths, so use the dimensions that match the browser view you want to document or test.
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto('https://example.com');
await page.screenshot({ path: 'viewport.png' });Capture the full scrollable page
Set fullPage: true to capture the document beyond the visible viewport, as if the page fit on a very tall screen:
await page.screenshot({ path: 'full-page.png', fullPage: true });This is useful for saving a long article or page in one image. It is not the same as a screenshot of a scrollable element: a full-page capture concerns the page document, while a scrollable element capture shows the content currently scrolled into view within that element.
Capture one element
Use a locator’s screenshot() method to save the matched element, such as a header, card, or chart:
await page.locator('.header').screenshot({ path: 'header.png' });The locator screenshot waits for actionability and scrolls the element into view. If another element covers part of the target, the screenshot does not make that covered portion visible. For a scrollable target, it captures only the content currently scrolled into view within that element. Make sure your locator identifies the intended element, particularly when a selector could match several nodes.
Capture a rectangle
Use clip to specify a rectangular region with an x and y position and width and height:
Recommended Free Tools
await page.screenshot({
path: 'region.png',
clip: { x: 40, y: 120, width: 640, height: 360 }
});The rectangle is useful when you need a fixed area rather than an element. Choose its coordinates and dimensions for the page layout and viewport you are capturing.
Choose an image format and pixel scale
Page screenshots can be saved as PNG, JPEG, or WebP. Select a format based on whether you need lossless detail, a smaller lossy image, or a particular downstream file type.
- PNG: a lossless choice. The quality option does not apply to PNG.
- JPEG: lossy output; the Page screenshot API documents a default quality of 80.
- WebP: supports quality control; the API documents quality 100 as lossless.
For example, specify the format in the screenshot options and use a matching file extension:
await page.screenshot({ path: 'capture.webp', type: 'webp', quality: 85 });The scale option controls output pixels. scale: 'css' produces one image pixel per CSS pixel; scale: 'device' uses device pixels and can create a larger high-DPI image. The Page screenshot API documents device as its default. Do not assume the same default for screenshot assertions in the Playwright Test runner, which are a separate API.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
await page.screenshot({
path: 'css-scale.png',
scale: 'css'
});Make captures more repeatable
Animations, blinking carets, changing data, and browser context settings can all affect screenshot output. Playwright provides options to control some sources of variation; use them only when they match what you want the image to represent.
Disable animations and control the caret
Set animations: 'disabled' to reduce variation from animations. Playwright fast-forwards finite animations and cancels infinite animations to their initial state for the screenshot. You can also control whether the text caret is shown:
await page.screenshot({
path: 'stable.png',
animations: 'disabled',
caret: 'hide'
});Disabling animation can make a comparison more stable, but it also means the image does not show the normal animated state. Choose the option deliberately rather than applying it automatically to every capture.
Mask changing areas or inject a style
You can mask selected locators or inject a style for the screenshot. These controls can help when a changing timestamp or other known dynamic area would otherwise make a visual comparison noisy.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minuteawait page.screenshot({
path: 'masked.png',
mask: [page.locator('.timestamp')],
style: '.timestamp { visibility: hidden !important; }'
});A mask or broad style can also hide a genuine rendering problem. Keep the targeted selectors narrow and review what the resulting image omits. The API reference marks injected style as added in v1.41 and maskColor as added in v1.35; confirm option availability against your installed Playwright version before relying on them.
Keep browser context settings consistent
Device scale factor is configured on the browser context, not just by choosing an output format. Browser engine and context configuration matter when a team needs consistent artifacts. Playwright’s Page API examples cover Chromium, WebKit, and Firefox, but identical output across engines or environments is not guaranteed.
const context = await browser.newContext({
viewport: { width: 1280, height: 800 },
deviceScaleFactor: 1
});
const page = await context.newPage();For comparisons, keep the browser engine, viewport, device scale factor, and relevant page state consistent between runs. If you are testing more than one engine, keep each engine’s screenshots as a separate comparison set rather than treating cross-engine pixel differences as proof of a regression.
Save an image or use the returned buffer
When you provide path, Playwright writes the screenshot to that location. If you omit path, the call returns image bytes that can be processed or sent to another tool:
const image = await page.screenshot();
// Pass image to your image-processing or storage code.Choose a filename and destination that your process can write to. If the file is missing, check the path relative to the process’s working directory and confirm the capture call completed before the browser was closed.
Use screenshot assertions in Playwright Test
A one-off page.screenshot() call produces an image; it does not itself compare that image to a baseline. For visual regression checks, Playwright Test provides screenshot assertions that compare captures against stored expected images and accept configured differences, such as a pixel threshold or a maximum differing pixel count or ratio. Those comparison settings belong to the test runner’s assertion workflow, not the standalone Page screenshot call.
Use assertions when the purpose is to detect visual change over time. Decide what difference is acceptable for your test and avoid masking or tolerance settings so broad that they conceal a meaningful layout change.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common screenshot problems
The image is blank or the page is incomplete
- Confirm that navigation completed to the intended URL and that the page is not still rendering content needed for the capture.
- If a target element is not ready, locate and wait for it before taking an element screenshot.
- For lazy-loaded content, make sure the page state has triggered the content to load before capturing; a screenshot records the rendered state available at capture time.
The element screenshot is clipped or shows only part of a scrollable area
A locator screenshot captures the matched element, but it does not reveal portions obscured by overlays. Scrollable elements show only their currently scrolled content. Check whether a fixed banner covers the target, and scroll the element itself if you need a different part of its content.
Free tools Windows power users keep installed
One-click scans. No signup required.
The output looks too small or too large
Check the viewport and device scale factor, then set the screenshot scale explicitly if you need CSS-pixel or device-pixel output. A high-DPI device scale can increase image dimensions and file size.
Two captures differ unexpectedly
Compare browser engine, viewport, device scale factor, and page state first. Then consider whether animation or dynamic content is changing; use animation controls or narrow masks only when appropriate. Cross-browser or cross-environment captures should not be presumed byte-identical.
An option is rejected or unavailable
Playwright’s documentation includes option introduction versions: locator.screenshot() was added in v1.14, maskColor in v1.35, injected style in v1.41, and screenshot signal in v1.62. The guide may describe documentation for an upcoming release, so check your installed package’s API rather than assuming every documented option is available in your version.
Or skip the browser setup
If you need a screenshot through an HTTP request rather than managing a Playwright browser, ScreenshotNeo can return an image or PDF. This cURL example saves a WebP capture of the target URL. 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://example.com -o shot.webpScreenshotNeo can accept cookie or 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, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server offers screenshot tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Can Playwright take a screenshot without saving a file?
Yes. Omit the screenshot `path`; the call returns image data as a buffer for your code to process or pass to another tool.
Can I capture a specific element instead of the whole page?
Yes. Call `screenshot()` on a locator, for example `page.locator(‘.header’).screenshot({ path: ‘header.png’ })`.
Does `fullPage: true` capture the contents of a scrollable element?
No. It captures the scrollable page document. A screenshot of a scrollable element shows the portion currently scrolled into view.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
