How to Screenshot a Website with Cookie Banners Hidden for Documentation

To hide a cookie banner in a repeatable website screenshot, inspect the banner on the page and apply a page-specific CSS selector during capture. With Playwright 1.41 or later, use the screenshot-time style option. For a one-off image, you can temporarily hide the element in browser developer tools. Neither method records that a visitor accepted or rejected cookies; if the consent decision is what you need to document, use the site’s controls and inspect the resulting browser state separately.

Choose the right method for your documentation

First decide what the screenshot is meant to show. If you are documenting page layout, temporarily hiding the banner can make the content easier to see. If you are documenting a consent flow, hiding the banner would remove evidence of the flow rather than record a choice.

Method	Use it when	What appears in the image	Does it record consent?
Hide the inspected element in developer tools	You need a one-off manual capture	The selected element is removed from the rendered view	No
Playwright screenshot-time CSS	You need repeatable automated captures	The selected element is hidden for the screenshot	No
Playwright mask	You need to obscure a known area	A colored overlay covers the element; underlying content stays obscured	No
Click the site’s consent controls	You need to document a consent interaction	The page reflects the control you selected	The site may update browser state; inspect it separately

There is no universal cookie-banner selector. Consent tools use different markup, and a selector that is too broad can hide useful page content. Inspect the specific page and check the screenshot output.

Inspect the banner and choose a precise selector

1. Open the page at the viewport and browser state you intend to document.
2. Open developer tools and inspect the visible banner. Find an outer element that covers the banner without containing unrelated page content.
3. Choose a selector that matches that element on this site, such as a site-specific class or ID. Do not assume a generic selector like footer or [role="dialog"] means “cookie banner.”
4. Check whether the banner lives inside an iframe or Shadow DOM. Playwright’s screenshot-time stylesheet is documented to reach Shadow DOM and inner frames, but your selector still needs to match the relevant element.
5. Use the selector in the capture, then review the output for remaining overlays, missing content, and unexpected layout changes.

A selector that matches nothing leaves the banner in place. A selector that matches several elements may remove more than intended. Verify the match against the actual page rather than copying a selector from another site.

Automate the capture with Playwright

Install Playwright and its Chromium browser in a Node.js project:

npm install playwright
npx playwright install chromium

Save this as screenshot.mjs. Replace the URL and .site-specific-consent-banner with the page and selector you inspected. This example writes a full-page PNG:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });

try {
  await page.goto('https://example.com', { waitUntil: 'networkidle', timeout: 60_000 });
  await page.screenshot({
    path: 'page.png',
    fullPage: true,
    style: '.site-specific-consent-banner { display: none !important; }'
  });
} finally {
  await browser.close();
}

Run it with node screenshot.mjs. The selector and URL are examples; this is not a tested selector for any particular site. Playwright documents the screenshot-time style option as available from v1.41. It applies styles while making the screenshot, so the site’s stylesheet is not permanently changed.

Use a screenshot mask when you want to redact

If your purpose is to obscure the banner rather than reveal the page underneath it, use Playwright’s mask option. A mask paints over the element’s bounding box; it does not make the covered page visible.

await page.screenshot({
  path: 'page-redacted.png',
  fullPage: true,
  mask: [page.locator('.site-specific-consent-banner')]
});

Use a precise locator and review the result, especially if the banner moves or changes size after load.

Manual one-off capture in developer tools

1. Open developer tools and use the element inspector to select the visible banner’s outer element.
2. In the Styles panel, add a temporary rule such as display: none !important; for that element.
3. Confirm that the banner disappears and page content remains intact.
4. Use the browser’s screenshot workflow to capture the page.
5. Reload or remove the temporary style when you are done.

This changes only the rendered view for your capture. It does not make a consent choice on the site’s behalf.

Documenting an actual consent choice

When the documentation needs to show acceptance, rejection, or another consent outcome, interact with the site’s own controls instead of hiding the banner. Record which control was used, then inspect the browser’s cookie state and the resulting page. Chrome DevTools provides tools to view, add, edit, and delete cookies, along with a Privacy panel for temporarily limiting third-party cookies during testing. Use those tools to verify the state you intend to document.

A clean screenshot alone cannot prove that consent was granted or refused. Banner-removal and banner-interaction tools can also affect cookies and tracking differently. A 2024 study measured six tools across 298,000 pages on 30,000 websites and found that effects varied by tool and setup; its findings describe the study’s tested conditions, not a guarantee about every site or current tool.

Capture options and practical choices

• Full-page image: Set fullPage: true to capture the page beyond the current viewport. Check for content that loads only as you scroll; a screenshot option does not ensure every lazy-loaded item has appeared.
• Viewport: Set the viewport before navigation to make the image repeatable. Responsive layouts may show a different banner or no banner at another width.
• Wait condition: Choose a load condition suitable for the page. networkidle can be useful on quiet pages, but pages with ongoing network activity may never become idle. In that case, wait for a page-specific selector or a known delay before capture.
• Output format: Playwright screenshot output can be written to a path such as page.png; choose an extension and image options suited to your documentation workflow.
• Temporary CSS: Put only capture-specific rules in style. Keep the selector narrow and use !important when page styles would otherwise override the hide rule.

Troubleshooting

Symptom	Likely cause	Fix
The cookie banner is still visible	The selector does not match, the banner appeared later, or it is inside a frame with a different structure	Inspect the live element after it appears, refine the selector, and verify the stylesheet applies to that element.
Page content disappears too	The selector targets a broad container or matches multiple elements	Target the banner’s specific outer element and review all matches before capture.
The page area behind the banner is not visible	You used mask, which covers the bounding box	Use screenshot-time CSS with display: none if you want the page beneath it to show.
The full-page screenshot is incomplete	Lazy content has not loaded, or the page changes as it is captured	Wait for relevant content or scroll/load it before capturing, then inspect the saved image.
Navigation times out	The site keeps network requests open or loads slowly	Use a different navigation wait condition and wait for a specific page element or a bounded delay before taking the screenshot.
The banner returns after reload	The CSS change was temporary and did not alter the site’s consent state	That is expected for a screenshot-only hide. Use the site’s controls if you need to change consent state.
The Playwright style option is rejected	The installed Playwright version may predate the option	Update Playwright to v1.41 or later, or use a manual developer-tools capture.

Performance, reliability, and cost

A local Playwright capture uses your browser process and network connection. Reusing a browser for a batch of captures avoids repeatedly starting Chromium; keep each page isolated when you need a predictable browser context. Pages with heavy scripts, slow resources, or persistent requests take longer and can make a network-idle wait unreliable. Set bounded timeouts and save enough context to reproduce the page, including URL, viewport, selector, and capture time.

Playwright itself is software you run; this workflow has no per-screenshot API charge described here, but it uses local compute, storage, and bandwidth. If you need managed capture and want to avoid maintaining browser setup, ScreenshotNeo offers 1,000 screenshots monthly on its free plan with no card; paid plans start at $5 for 3,000. See the product options at ScreenshotNeo.

Or skip the browser setup

ScreenshotNeo’s API documentation covers its screenshot endpoint and options. For a direct capture, use cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import 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)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, and failed loads are never billed. An MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free and capture 1,000 screenshots a month with no card.

FAQ

Does hiding a banner accept cookies?

No. A screenshot-only CSS hide changes what is visible in the capture; it does not make a consent choice. Use the site’s controls and inspect cookie state when consent behavior matters.

Can I use the same selector on every website?

No. Banner markup varies. Inspect the page and use a selector that targets its specific banner.

Should I hide or mask the banner?

Hide it when the content beneath should be visible. Mask it when you need to obscure that region; a mask covers the area rather than revealing what is underneath.