Recommended Free Tools
Choose the screenshot’s intended state before changing the page. For a first-visit test, leave the cookie banner visible and test it. For a returning-visitor test, establish the intended consent state and verify the result. If you only need an unobstructed visual capture, hide the known banner with capture-time CSS. That changes the screenshot, not the visitor’s consent.
Choose what the screenshot is meant to prove
A cookie banner can be test content, a stateful interface, or just an obstruction in a visual capture. Those are different cases, and handling them the same way can produce a misleading screenshot.
- First visit: Keep the banner visible and assert that it appears with the expected controls. This tests the consent interface.
- Returning visitor: Use the intended consent flow or a controlled test fixture to establish the desired state, then check that the page reflects it. This tests a returning state.
- Visual-only capture: Hide the specific banner at screenshot time if the aim is to inspect the page underneath. This changes pixels only; it does not accept cookies or establish consent.
Do not click “Accept” just to make an image look clean unless accepting is genuinely the scenario being tested. A banner absent from an image is not evidence that consent was given.
Hide a known banner in a Playwright screenshot
Playwright’s screenshot API accepts a style option for CSS applied only while the screenshot is taken. The documentation describes it as useful for hiding dynamic elements; the injected stylesheet also pierces Shadow DOM and inner frames. Use a selector tied to the consent component you intend to omit, rather than a broad pattern that could hide unrelated content. See the Playwright Page API.
Free tools Windows power users keep installed
One-click scans. No signup required.
Runnable example: capture-time CSS
Install Playwright with npm install playwright. Save this as capture.mjs, replace the example URL and selector with the page and consent component under test, then run node capture.mjs.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
try {
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({
path: 'page.png',
fullPage: true,
style: '[data-testid="cookie-consent"] { display: none !important; }'
});
} finally {
await browser.close();
}data-testid="cookie-consent" is an example, not a universal consent-manager selector. Inspect the page and choose a stable identifier that actually targets its banner. If your project has a stable CSS class or other site-specific identifier, use that instead. Avoid selectors such as [class*="cookie"]: they can match unrelated page content, and consent implementations may change.
Keep the first-visit test separate
Do not apply the hiding style to a test whose purpose is to exercise the consent interface. In that test, assert that the banner is visible and that its controls can be used. For example, with a site-specific test ID:
await page.goto('https://example.com');
const banner = page.getByTestId('cookie-consent');
await banner.waitFor({ state: 'visible' });
await banner.getByRole('button', { name: 'Accept' }).waitFor({ state: 'visible' });The test ID and button label are illustrative: use the identifiers and accessible names provided by your own page. There is no universal consent selector or consent-state recipe established by the cited Playwright documentation.
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 →Click accept only when acceptance is the scenario
For a returning-visitor case, perform the real interaction if the test is meant to cover it, or establish the state through a controlled fixture appropriate to your application. Then verify the relevant outcome: for example, that the banner is gone or that the page’s consent-dependent behavior is as expected. A screenshot-only stylesheet is not a substitute for either setup.
Playwright’s locator-handler capability is documented for dealing with overlays that interfere with interactions. It can be useful when an overlay appears unpredictably during a test, but it is not a reason to dismiss consent prompts indiscriminately. Decide whether that overlay belongs in the scenario before handling it. The relevant API is covered in the Page API documentation.
#1 Best Overall
Masking is not the same as hiding
Playwright can mask a matching locator in a screenshot. The mask covers the locator’s bounding box with a mask color; it does not remove the banner or reveal the page content behind it. Masking is appropriate when a marked-over region is acceptable, such as when dynamic content would otherwise make a visual comparison unstable. It is usually the wrong choice if the goal is to see what the banner covers. The API behavior is documented in the Playwright Page API.
Choose between the two capture techniques by the image you need:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Capture-time CSS: omits the selected element from the captured rendering, letting underlying content show through where the layout permits.
- Masking: leaves a conspicuous colored rectangle over the matching area.
Make screenshots repeatable
Banner handling is only one part of a stable capture. Fix the inputs that can change the page between runs, and wait for the condition that matches the purpose of the test rather than relying on an arbitrary delay.
Control the capture conditions
- Viewport: Set a consistent width and height. Responsive layouts can move or resize a banner at different viewport sizes.
- Capture mode: Decide whether the test needs the visible viewport or a full-page image. A banner can be positioned or rendered differently relative to the viewport and document.
- Page readiness: Wait for the page or a meaningful selector to reach the state you intend to capture. For an asynchronously rendered consent component, wait for that component or for its absence under the scenario being tested.
- Animation and motion: Animations can produce different frames across runs. Playwright Test offers reduced-motion emulation and screenshot assertion options; configure them when reduced motion matches the test’s intent.
- Dynamic content: Decide whether changing content should be stabilized, excluded, or treated as a real difference. Mask only when a marked region is acceptable.
Playwright Test documents automatic screenshot capture, screenshot assertions, full-page capture options, and reduced-motion emulation in its TestOptions API. A screenshot that is repeatable under one viewport or page state does not establish how the banner behaves under other conditions; test those conditions separately when they matter.
Can Puppeteer do this?
Puppeteer documents screenshots of pages and elements. Its guide says that ElementHandle.screenshot() attempts to scroll a hidden element into view before capturing it. The cited guide does not document a dedicated cookie-banner-hiding option. For a clean visual capture, use site-specific capture CSS or DOM handling and verify the resulting image; for a consent test, establish and check the intended state instead. See the Puppeteer Screenshots guide.
Troubleshooting banner-covered captures
- The banner is still visible: Confirm that the selector matches the rendered element, not just a wrapper or a similarly named element. Check whether it is inside Shadow DOM or a frame; Playwright’s screenshot
styleis documented to pierce Shadow DOM and inner frames, but the selector still has to identify the intended component. - Unrelated content disappears: Narrow the CSS selector. Avoid broad class-substring matches and other rules that can match multiple page elements.
- The page looks blank where the banner was: If the banner occupied layout space, hiding it can affect layout. Check the actual rendered result and choose a capture technique that fits the desired image rather than assuming every overlay is positioned the same way.
- The screenshot changes between runs: Fix the viewport and page state, wait for the intended readiness condition, and account for animation or dynamic content. A longer fixed sleep alone does not guarantee that the relevant state is ready.
- A mask obscures the page underneath: That is expected: masking colors the matched bounding box rather than deleting the element. Use narrowly scoped capture CSS if the underlying content needs to remain visible.
- A consent test passes despite no consent action: Separate visual hiding from consent setup. Assert the actual first-visit or returning-visitor state required by that test.
Or skip the browser setup
For a hosted capture, one GET request can return a screenshot. Replace the example URL with the page you want to capture. The ScreenshotNeo API documentation covers 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 removes known cookie and consent banners, newsletter popups, and chat widgets before capture, and each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers indicate the page verdict and whether the capture was billed. Its MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to try it without a card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does hiding a banner with screenshot CSS save or record consent?
No. Screenshot styling changes the captured rendering only; it does not perform a consent action or prove that consent was recorded.
Will the same banner selector work on every website?
No. Consent components use site- and implementation-specific markup. Identify the element on the page you are capturing and use a selector scoped to that component.
Crashes, 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 minutePC 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 & 11Quick Recap
Should I use full-page capture when a banner is fixed to the viewport?
Use the capture mode that represents the view you are testing. A full-page image and a viewport screenshot answer different questions, so inspect the banner’s placement in the chosen mode rather than assuming they are interchangeable.
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.
