The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Use JavaScript browser automation to load the real page, change its presentation or state, and capture the result. For CSS-only changes that should affect the screenshot but not the page afterward, Playwright’s screenshot-time style option is the simplest route. Use JavaScript before capture when you need to click, open, remove, or annotate something. The examples below show both approaches, along with capture scope, output settings, repeatability, and troubleshooting.
Choose the right way to change the screenshot
There are two useful moments to make a change: while the screenshot is being taken, or before the screenshot call. The distinction is whether you are changing appearance only or changing the page’s state.
Use screenshot-time CSS for temporary visual adjustments
Playwright’s page.screenshot() accepts a style string. The stylesheet is applied for the capture, can affect Shadow DOM, and is applied to inner frames. It is well suited to hiding a banner, suppressing an animation, or adding a visual highlight without making that adjustment part of the page’s normal state. See the Playwright Screenshots documentation.
await page.goto('https://example.com');
await page.screenshot({
path: 'styled.png',
fullPage: true,
style: `
.cookie-banner, .chat-widget { display: none !important; }
main { outline: 3px solid #6b5bff; }
`,
});The selectors are examples, not universal names. Inspect the target page and use selectors that match its actual markup. A site may render a banner inside an iframe, use a different class name, or change its markup over time.
Use JavaScript before capture for actions or state changes
Run page JavaScript after navigation and before the screenshot when you need to click a control, reveal a menu, remove an element, add an annotation, or set up another page state. Unlike screenshot-time CSS, this changes the loaded page before the image is taken. The shot-scraper documentation demonstrates pre-capture JavaScript for actions such as changing the body background, hiding elements, clicking links, and waiting for work to finish.
Prefer the least invasive method that achieves the desired image: screenshot-time CSS for presentation, and page actions for interaction or state.
#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
Set up a runnable Playwright JavaScript capture
The following example uses Playwright’s JavaScript API. It navigates to a page, waits for a meaningful selector, and saves a full-page PNG with capture-only CSS. Install Playwright in your project and install its browser before running the script; the project’s installation instructions are at Playwright for JavaScript.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
try {
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({
path: 'styled.png',
fullPage: true,
style: `
.cookie-banner, .chat-widget { display: none !important; }
main { outline: 3px solid #6b5bff; }
`,
});
} finally {
await browser.close();
}
})();Replace the URL and selectors with ones for the page you control or are authorized to capture. The explicit try/finally closes the browser even if navigation or capture fails. If you need a page interaction rather than a temporary style, perform it before page.screenshot(); for example, locate a button and click it, then wait for the expected result.
Choose what part of the page to capture
Decide the capture boundary before tuning styles. The boundary affects what appears in the image and, for a full page or large element, may affect capture time and output size.
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
| Capture | Playwright approach | Use it when |
|---|---|---|
| Current viewport | page.screenshot() without fullPage |
You want the visible browser area at the chosen viewport size. |
| Whole scrollable page | page.screenshot({ fullPage: true }) |
You need the page beyond the current viewport. |
| One component | Call screenshot() on a locator |
You need an element’s image rather than the entire page. |
| Precise rectangle | Pass a clip rectangle to page.screenshot() |
You need a deliberate crop with known page coordinates. |
For a component capture, wait for the locator to be visible and use its screenshot method. For a clip, check that the rectangle is within the page area you intend to capture. Playwright documents these screenshot methods and options in its Page API.
Control pixels, format, and file size
Pixel scale
Playwright’s screenshot scale setting accepts 'css' or 'device'. CSS scale produces one output pixel per CSS pixel. Device scale uses device pixels and can create a larger image on high-DPI displays; the documented default is device scale. Choose CSS scale when you want a compact, viewport-independent pixel dimension, and device scale when the denser rendering is useful.
Image format and quality
Playwright supports PNG, JPEG, and WebP screenshot output. JPEG and WebP can use a quality value from 0 to 100; that setting does not apply to PNG. WebP at quality 100 is lossless according to the documentation. PNG is a practical choice for crisp interface details and text, while lossy formats can reduce file size when small visual compromises are acceptable. Select based on the intended use rather than assuming one format is always best.
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.
Save to a file or keep the image in memory
Set path to write an image file. If you omit the path, Playwright returns screenshot bytes as a buffer, which can be passed to an image-processing step, uploaded, or compared without first writing it to disk. Keep in mind that a full-page or device-scale image may require more memory than a viewport-sized capture.
Make styled screenshots repeatable
A screenshot is only useful for comparison when the page has reached a predictable state. Waiting for a fixed number of milliseconds can be adequate for a simple demo, but waiting for the condition that matters is usually more robust.
Wait for the content, not just navigation
Navigation completion does not necessarily mean that client-side content, images, or a menu is ready. Wait for a relevant locator or page condition before capture. If the page performs asynchronous work, wait for its visible result. The shot-scraper documentation describes both time-based waits and waits based on a JavaScript expression; the documented release in that source is 0.14, so verify command details against the version installed in your environment.
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
Remove volatility only when it is not the subject
Animations, rotating banners, timestamps, and personalized widgets can change between runs. Hide or normalize them if the purpose is to compare stable layout. Do not hide a dynamic element when its behavior is what you are testing. Screenshot-time CSS is useful for repeatability because it can suppress such elements without changing the site’s normal stylesheet.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Keep the baseline environment consistent
For visual regression, Playwright Test can record reference screenshots and compare later runs with toHaveScreenshot(). Playwright warns that output may vary with the host operating system, browser version, settings, hardware, power source, and headless mode. Run the baseline and later captures in the same environment where practical; investigate unexplained pixel differences before accepting a new baseline. See Playwright visual comparisons.
Common problems and fixes
- The CSS change has no effect. The selector may not match the current markup, or the target may be rendered in a frame or Shadow DOM. Inspect the live page and confirm the selector. Playwright’s screenshot-time stylesheet is documented to pierce Shadow DOM and apply to inner frames, but the selector still needs to identify the intended element.
- The banner or widget returns in the image. It may be injected after your capture begins. Wait for the page state that matters, or use a pre-capture action to remove or dismiss it. For a stable visual-only capture, apply CSS at screenshot time.
- The screenshot is blank or incomplete. Confirm that navigation succeeded and that the relevant content is visible before capture. A navigation event alone may not mean that a single-page app has rendered its content.
- The image dimensions are larger than expected. Check whether the capture is full-page and whether
scale: 'device'is producing device-pixel output. Use viewport capture orscale: 'css'when those dimensions better match the intended artifact. - Images differ between runs despite identical code. Stabilize page content and use the same browser and host setup for the baseline and comparison. Rendering differences across environments are a documented source of screenshot variation.
- A clip misses the intended area. Verify the clip rectangle and page layout at capture time. If the target is a component, a locator screenshot may be simpler and less sensitive to coordinate changes.
- A JavaScript click does not open the expected state. Confirm the locator identifies the intended control, that it is visible and enabled, and that the expected result is awaited before capturing. If only the final appearance matters and a CSS rule can produce it, use screenshot-time styling instead.
When an API is simpler than managing a browser
For a local test suite or a workflow that needs direct access to page state, Playwright gives you fine-grained control. For a one-call capture without setting up the browser in your own script, ScreenshotNeo is an API and MCP server for website screenshots. Its capture options include custom CSS and JavaScript, selector-based element capture, full-page capture with lazy images loaded, format and viewport choices, and controls for waiting before capture. Use Playwright when your test needs browser assertions or code-driven control; consider the API when you want to request an image or PDF over HTTP.
Or skip the browser setup
One GET request can return a screenshot. The example below saves the response as WebP; replace the URL with the page you want to capture. See the ScreenshotNeo API documentation for the available parameters and response details.
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.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers say which page verdict applied and whether the request was billed. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Recommended Free Tools
Create a free ScreenshotNeo account to try 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I style a screenshot without changing the website itself?
Yes. Use Playwright’s screenshot-time `style` option for CSS that should apply to the capture rather than persist as a page change.
Can Playwright capture an individual element instead of the whole page?
Yes. Use a locator’s screenshot method for a component, or a `clip` rectangle when you need a coordinate-defined crop.
What can cause screenshot tests to differ across machines?
Operating system, browser version, browser settings, hardware, power source, and headless mode can all affect rendering. Keep the baseline and comparison environment consistent.
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.
