Use Playwright as the browser layer: navigate to the page, let your agent inspect or interact with it if needed, then apply custom CSS and save a screenshot. Use the screenshot’s style option for CSS that should affect only the image; use page.addStyleTag() if the stylesheet should also affect later page inspection and interactions.
Choose how the stylesheet should apply
Playwright offers two useful approaches, depending on whether your CSS is only for the final image or should remain active in the browser page.
As an Amazon Associate I earn from qualifying purchases.
Temporary CSS for the screenshot
Pass a CSS string in the screenshot style option. Playwright applies it while taking the image, which is useful for hiding a changing banner or adjusting a visual detail without changing the page state used for other actions. The API describes this option as “Text of the stylesheet to apply while making the screenshot.” Playwright Page API
PC 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 & 11Outdated 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 matchPersistent CSS in the page
Call page.addStyleTag({ content: '...' }) to inject CSS into the active page. You can also provide a local path or stylesheet URL. Choose this when the agent should inspect or interact with the page after the CSS has been applied and see the styled state.
Capture a screenshot with Playwright
Install Playwright and its browser before running the script. For Node.js, install the package with npm install playwright, then install a browser with npx playwright install chromium. The example below captures a viewport screenshot, hides a cookie banner if it is present, and saves the result as screenshot.png.
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', { waitUntil: 'networkidle' });
await page.screenshot({
path: 'screenshot.png',
style: '.cookie-banner { display: none !important; }'
});
await browser.close();
})();Replace https://example.com and .cookie-banner with the target URL and the actual selector for the element you want to change. The CSS only applies to this screenshot call. For pages where network activity does not settle, use a less restrictive navigation condition such as domcontentloaded and wait explicitly for the content your capture needs.
Inject CSS for later inspection too
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.addStyleTag({
content: '.cookie-banner { display: none !important; }'
});
// Continue inspecting or interacting with the page, then capture it.
await page.screenshot({ path: 'screenshot.png' });To load a stylesheet from a file or URL, use the corresponding path or url option with page.addStyleTag(). Keep remote stylesheet availability in mind: if the URL cannot load, its rules will not style the page.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches#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
Let an AI agent inspect the page
Playwright supplies browser-control APIs; it does not prescribe a particular AI model or agent framework. Your agent is the orchestration layer that decides what to inspect, which elements to act on, what CSS to apply, and when to capture.
The Page API includes page.ariaSnapshot({ mode: 'ai' }), an AI-oriented accessibility snapshot with element references that can help an agent understand a page before selecting or interacting with elements. It is an input to your agent’s decision-making, not an automatic screenshot workflow.
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
const snapshot = await page.ariaSnapshot({ mode: 'ai' });
// Pass snapshot to your agent, then use its chosen locator or action.
console.log(snapshot);Use an agent to choose locators or decide what to hide rather than hard-coding a selector when the page structure varies. Treat agent output as a proposed action: verify the selector and resulting page state before relying on the image.
Set the screenshot scope and pixel scale
Choose the capture bounds and output resolution deliberately. Playwright’s screenshot options distinguish viewport capture, full-page capture, and a rectangular clip. Playwright screenshot parameters
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
- Viewport: the visible browser viewport is captured by default.
- Full page: set
fullPage: trueto capture the full scrollable page. - Clipped area: set
clipto a rectangle when only a specific region is needed. - CSS-pixel scale: set
scale: 'css'for one output pixel per CSS pixel. - Device-pixel scale: set
scale: 'device'when device-pixel output is wanted.
await page.screenshot({
path: 'full-page.png',
fullPage: true,
scale: 'css'
});
await page.screenshot({
path: 'header.png',
clip: { x: 0, y: 0, width: 1440, height: 240 },
scale: 'device'
});For full-page capture, the image may be much taller than the viewport. A clip uses page coordinates; check the target’s layout and scroll position when deciding which rectangle to save.
Make repeated screenshots more consistent
Pages can vary between captures because of animation, blinking carets, dynamic content, or other changing regions. Playwright’s screenshot assertion options include controls for disabling animations, hiding the caret, masking selected locators, and setting scale and image-difference thresholds. These controls can improve consistency, but they do not guarantee identical images across browsers, operating systems, fonts, or changing remote content.
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
Use a stylesheet for visual comparisons
For Playwright Test screenshot assertions, provide a stylePath file to apply CSS during the comparison. The visual-comparisons documentation demonstrates hiding iframes this way and describes custom styling as a way to filter dynamic or volatile regions. Playwright visual comparisons
Keep comparison-specific CSS focused on unstable elements. Hiding too much can make a test pass while a meaningful layout or rendering regression goes unnoticed.
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.
Troubleshoot common capture problems
- The CSS has no visible effect: confirm that the selector matches the live DOM and that the element is not inside a frame or shadow root the selector cannot reach. For screenshot-only styling, check that the rules are in the screenshot’s
stylestring; for persistent styling, confirmaddStyleTag()completed before capture. - The page never reaches network idle: pages with polling, analytics, or persistent connections may keep network activity alive. Navigate with
domcontentloaded, then wait for a specific selector or other page condition before capturing. - The full-page image is incomplete or unexpectedly tall: confirm the page has finished rendering the content you need. Lazy-loaded sections may require scrolling or explicit waits before capture; full-page mode captures the scrollable page, not a guarantee that every deferred asset has loaded.
- The screenshot changes from run to run: hide or mask known volatile regions, disable animations where appropriate, and hide the caret. Recheck browser, operating system, fonts, and remote content if differences remain.
- The agent picks the wrong element: provide page context such as an AI-oriented ARIA snapshot, then validate the agent’s locator against the rendered page before applying CSS or clicking.
Or skip the browser setup
ScreenshotNeo can return a screenshot or PDF from one GET request. Its clean-shot flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options, including custom CSS and JavaScript. Plans include 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. ScreenshotNeo offers a direct alternative when you do not want to manage the browser process yourself.
Sign up for 1,000 free screenshots a month—no card required.
FAQ
Does Playwright choose the AI model for me?
No. Playwright documents browser APIs and an AI-oriented ARIA snapshot; choosing and connecting an agent or model is your implementation decision.
Can the same CSS be used for a screenshot and a visual test?
Yes. Use screenshot-time style for an individual capture, or use a stylePath file with Playwright Test screenshot assertions.
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.
