What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use Playwright’s page.screenshot() for a browser viewport, add fullPage: true for the entire scrollable document, or call screenshot() on a locator to capture one element. The API can write PNG, JPEG, or WebP files, or return image bytes for further processing.
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();
})();This guide shows how to install and run that code, choose the right capture scope, control output quality and repeatability, use screenshots in visual tests, and diagnose common failures.
Set up a Playwright project
Use a current Playwright release and install its browser binaries for the browsers you intend to automate. In a Node.js project, the typical setup is:
npm install playwright
npx playwright install chromiumThe exact installation command can vary with your package manager and Playwright version. A screenshot script must be able to launch the browser, resolve the target URL, and write to a directory where the process has permission to create files.
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 →#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Capture the current browser viewport
page.screenshot() captures what is visible in the page’s current viewport. Supplying path writes the image to disk.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com');
await page.screenshot({ path: 'viewport.png', type: 'png' });
await browser.close();
})();Keep the browser and page lifecycle in the same script: launch, create a page, navigate, capture, then close the browser. Closing it releases the browser process even when the script is run repeatedly in CI.
Choose what to capture
Full scrollable page
Set fullPage: true to capture the full scrollable page instead of only the visible viewport.
await page.screenshot({
path: 'full-page.png',
fullPage: true
});Full-page images can be substantially taller and larger than viewport images. They are useful for documentation and page-level regression checks, but a viewport or element image is usually easier to review.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsA bounded rectangle
Use clip when you need a fixed rectangle rather than an entire viewport or document.
await page.screenshot({
path: 'hero-crop.png',
clip: { x: 0, y: 120, width: 1200, height: 500 }
});The rectangle is expressed in page coordinates. Keep the coordinates and viewport fixed when the image is used as a test baseline.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
One element with a locator
A locator screenshot is the preferred element-level API. Playwright waits for the locator to be actionable and scrolls the matched element into view before capturing it.
await page.locator('.header').screenshot({ path: 'header.png' });
await page.getByRole('button', { name: 'Buy now' }).screenshot({ path: 'buy-button.png' });An overlay can still cover the element at capture time. A scrollable element shows the contents currently visible inside that element, not every hidden scroll position. The older ElementHandle screenshot method is discouraged; use a locator instead.
Recommended Free Tools
Save a file or process image bytes
When you provide path, Playwright saves the image. Without a path, the method returns a Buffer, which you can upload, hash, attach to a test report, or transform in memory.
const imageBuffer = await page.screenshot({
type: 'webp',
quality: 85
});
// Example: write the returned bytes yourself
require('node:fs').writeFileSync('viewport.webp', imageBuffer);PNG is the default output type. JPEG and WebP are also supported. JPEG quality defaults to 80; WebP quality defaults to 100, which is lossless, while lower WebP values are lossy. The quality option applies to JPEG and WebP, not PNG.
| Need | Settings | Result |
|---|---|---|
| Sharp, lossless UI text | type: 'png' |
Lossless PNG output |
| Smaller photographic image | type: 'jpeg', quality: 70 |
Lossy JPEG at the selected quality |
| Modern compressed output | type: 'webp', quality: 80 |
Lossy WebP at the selected quality |
| Image bytes for another API | Omit path |
A returned Buffer |
Control resolution and page appearance
CSS pixels versus device pixels
scale: 'css' produces one output pixel per CSS pixel and generally keeps high-DPI files smaller. scale: 'device' represents device pixels and can produce images twice as large or larger on high-density displays.
await page.screenshot({
path: 'css-scale.png',
scale: 'css'
});
await page.screenshot({
path: 'device-scale.png',
scale: 'device'
});Choose one scale and keep it unchanged for visual baselines. A change in scale is an image-size change, not merely a quality adjustment.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Hide animation, carets, and changing regions
Animations and blinking carets can make otherwise identical captures differ. Playwright’s screenshot options let you disable animations, hide the text caret, mask locator bounding boxes, and inject a stylesheet.
await page.screenshot({
path: 'stable.png',
animations: 'disabled',
caret: 'hide',
mask: [page.locator('.live-clock'), page.locator('[data-user-id]')],
maskColor: '#FF00FF',
style: `
.rotating-ad, .personalized-recommendation { visibility: hidden !important; }
`
});Masking is useful for timestamps, personalized data, and other regions that should not participate in a visual comparison. Treat masking as a deliberate test decision: it hides differences instead of detecting them.
Transparent backgrounds
omitBackground: true can preserve transparency for formats that support it. It does not apply to JPEG, which has no transparent background.
await page.screenshot({
path: 'logo.webp',
type: 'webp',
omitBackground: true
});Use screenshots in Playwright Test
For visual regression, Playwright Test provides toHaveScreenshot(). The assertion waits for two consecutive screenshots to match before comparing the result with the stored expectation.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC 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 & 11import { test, expect } from '@playwright/test';
test('landing page remains stable', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('landing.png');
});Screenshot snapshots are PNG by default; using a .webp snapshot name selects WebP. Generate and compare baselines in the same environment whenever consistency matters. Rendering can vary with the host operating system, browser version, browser settings, hardware, power source, and headless mode. A baseline created on one of those combinations may not match a capture made on another.
Python example
Playwright’s Python binding exposes the same page-level workflow. This synchronous example saves a viewport and a full-page image.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1440, "height": 900})
page.goto("https://example.com")
page.screenshot(path="viewport.png")
page.screenshot(path="full-page.png", full_page=True)
browser.close()Troubleshoot failed or unreliable captures
The browser cannot launch
Symptom: Playwright reports a missing executable or browser launch failure. Cause: the package is installed but its browser binary is not. Fix: install the browser required by your project, such as Chromium, with the Playwright installation command for your release, then rerun the script.
The page is blank or incomplete
Symptom: the file exists but contains a blank shell or missing content. Cause: capture occurred before the application rendered, navigation failed, or the requested page itself returned an empty result. Fix: verify the URL and navigation outcome, make the script wait for the page state your application requires, and capture a diagnostic viewport before switching to fullPage. A full-page option cannot restore content that never loaded.
The locator screenshot times out
Symptom: a locator screenshot cannot become actionable. Cause: the selector matches nothing, the element is hidden, or another page state prevents it from being actionable. Fix: confirm the selector against the rendered page, use a more specific role or test identifier, and ensure the element is present before capture.
A dialog, cookie banner, or sticky header covers the target
Symptom: the target exists but the image shows an overlay. Cause: locator scrolling does not remove other page layers. Fix: close or hide the overlay in the test setup, or inject a capture-only style. Do not assume that scrolling the target into view makes it unobscured.
Visual tests fail intermittently
Symptom: identical tests produce different pixels. Cause: animation, caret blinking, dynamic text, or a changed execution environment. Fix: disable animations, hide the caret, mask intentionally variable regions, and run baseline generation and comparison with the same operating system, browser version, settings, hardware conditions, and headless mode.
Files are unexpectedly large
Symptom: captures consume excessive storage or take longer to transfer. Cause: a full-page image, device-pixel scale, or lossless format. Fix: capture only the required scope, use scale: 'css' when appropriate, and select JPEG or lossy WebP when your workflow accepts compression.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Performance, reliability, and privacy choices
- Capture scope: viewport and locator shots usually produce less data than full-page images.
- Memory: a screenshot returned as a Buffer remains in your process until released; large full-page captures can increase memory pressure.
- Repeatability: fixed viewport dimensions, scale, browser version, and rendering environment make comparisons more reliable.
- Privacy: mask sensitive or personalized regions before saving artifacts or publishing them in test reports.
- Format: PNG favors exactness; JPEG and WebP can reduce transfer size when small visual differences are acceptable.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server when you need a clean capture without maintaining Playwright browser setup. One GET request returns PNG, JPEG, WebP, or a PDF. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup 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 each response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
Relevant controls include full-page or CSS-selector captures, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, clicks before capture, selector hiding, selector or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Every feature is available on every plan. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Use the ScreenshotNeo API documentation for authentication and option names.
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 →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Create a free ScreenshotNeo account to get 1,000 screenshots each month with no card.
Frequently Asked Questions
Should I commit screenshot files to source control?
Commit only intentional visual baselines or small documentation assets. Keep transient captures and large diagnostic files in CI artifacts or separate storage so repository history does not grow unnecessarily.
How should I name screenshots from parameterized pages?
Include a stable route or test identifier in the filename, and normalize characters that are unsafe on your build agent. Stable names make baseline updates and failure reports easier to locate.
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.
