Cookie consent banners are the bane of automated screenshots. You set up a beautiful monitoring pipeline, and every screenshot has a giant popup covering half the page. In this guide, we will explore multiple techniques to block, hide, or dismiss cookie banners in automated screenshots.

Since GDPR and similar privacy regulations, nearly every website displays a cookie consent banner on first visit. For automated screenshot tools, every visit is a first visit because there are no stored cookies. This means:

  • Screenshots are obscured by large overlays
  • Visual regression tests produce false positives
  • Monitoring dashboards show banners instead of actual content
  • Social media preview images look unprofessional

Method 1: CSS Injection

The simplest approach is injecting CSS to hide common cookie banner elements. The ToolCenter Screenshot API supports custom CSS injection:

curl -X POST "https://api.toolcenter.dev/v1/screenshot" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "css": "#cookie-banner, .cookie-consent, .cc-banner, #onetrust-banner-sdk { display: none !important; }",
    "width": 1920,
    "height": 1080
  }'

This CSS targets the most common cookie banner selectors used across the web.

Comprehensive CSS Block List

Here is a thorough CSS snippet that covers dozens of popular cookie consent implementations:

/* Consent Management Platforms */
#onetrust-banner-sdk,
#onetrust-consent-sdk,
#CybotCookiebotDialog,
#CybotCookiebotDialogBodyUnderlay,
.cc-window,
.cc-banner,
.cc-overlay,
#cookie-law-info-bar,
.cookie-notice,
#cookie-notice,
.js-cookie-consent,
[class*="cookie-banner"],
[class*="cookie-consent"],
[class*="cookie-notice"],
[id*="cookie-banner"],
[id*="cookie-consent"],
[class*="CookieConsent"],
[class*="gdpr"],
[id*="gdpr"] {
  display: none !important;
}

body {
  overflow: auto !important;
  position: static !important;
}

The overflow: auto rule is important because many banners lock page scrolling while they are displayed.

Method 2: JavaScript Injection

For complex cookie banners that require interaction, you can inject JavaScript to click the accept button or remove elements:

import requests

script = """
// Try clicking common accept buttons
const selectors = [
  '#onetrust-accept-btn-handler',
  '.cc-accept',
  '.cc-btn.cc-dismiss',
  '[data-action="accept"]',
  'button[class*="accept"]',
  'button[class*="agree"]',
  '.cookie-consent-accept',
  '#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll'
];

for (const sel of selectors) {
  const btn = document.querySelector(sel);
  if (btn) { btn.click(); break; }
}

// Fallback: remove remaining overlays
document.querySelectorAll('[class*="cookie"], [id*="cookie"]')
  .forEach(el => el.remove());
document.body.style.overflow = 'auto';
"""

response = requests.post(
    "https://api.toolcenter.dev/v1/screenshot",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={
        "url": "https://example.com",
        "javascript": script,
        "delay": 3000,
        "width": 1920,
        "height": 1080,
        "format": "png"
    }
)

with open("clean_screenshot.png", "wb") as f:
    f.write(response.content)

The delay parameter gives the banner time to appear before the script executes.

Method 3: Setting Cookies Before Screenshot

Some cookie consent tools check for a specific cookie to determine if consent was already given. You can pre-set these cookies:

import requests

consent_cookies = [
    {"name": "CookieConsent", "value": "true", "domain": ".example.com"},
    {"name": "cookieconsent_status", "value": "dismiss", "domain": ".example.com"},
    {"name": "OptanonAlertBoxClosed", "value": "2026-02-14T00:00:00.000Z", "domain": ".example.com"},
]

response = requests.post(
    "https://api.toolcenter.dev/v1/screenshot",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={
        "url": "https://example.com",
        "cookies": consent_cookies,
        "width": 1920,
        "height": 1080
    }
)

Building a Reusable Wrapper

Here is a Python class that combines all methods for reliable cookie banner blocking:

import requests

class CleanScreenshot:
    def __init__(self, api_key):
        self.api_key = api_key
        self.base_url = "https://api.toolcenter.dev/v1"
        self.block_css = """
            #onetrust-banner-sdk, #CybotCookiebotDialog,
            .cc-window, .cc-banner, #cookie-law-info-bar,
            [class*="cookie-banner"], [class*="cookie-consent"],
            [id*="cookie-banner"], [class*="gdpr"] {
                display: none !important;
            }
            body { overflow: auto !important; }
        """
        self.dismiss_js = """
            const sels = ['#onetrust-accept-btn-handler', '.cc-accept',
                          '.cc-btn.cc-dismiss', 'button[class*="accept"]'];
            for (const s of sels) {
                const b = document.querySelector(s);
                if (b) { b.click(); break; }
            }
        """

    def capture(self, url, width=1920, height=1080):
        response = requests.post(
            f"{self.base_url}/screenshot",
            headers={"Authorization": f"Bearer {self.api_key}"},
            json={
                "url": url,
                "css": self.block_css,
                "javascript": self.dismiss_js,
                "delay": 2000,
                "width": width,
                "height": height,
                "format": "png"
            }
        )
        return response.content

# Usage
screenshotter = CleanScreenshot("your_api_key")
image = screenshotter.capture("https://example.com")

with open("clean.png", "wb") as f:
    f.write(image)

Handling Edge Cases

Banners Inside Shadow DOM

Some modern consent tools render inside shadow DOM, making CSS selectors ineffective. For these, use JavaScript:

// Traverse shadow roots to find cookie banners
document.querySelectorAll('*').forEach(el => {
  if (el.shadowRoot) {
    el.shadowRoot.querySelectorAll('[class*="cookie"], [class*="consent"]')
      .forEach(child => child.remove());
  }
});

Banners Loaded via iframes

Cookie banners served through iframes require a different approach. Use the ToolCenter block_urls parameter to prevent the iframe from loading:

response = requests.post(
    "https://api.toolcenter.dev/v1/screenshot",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={
        "url": "https://example.com",
        "block_urls": ["cookiebot.com", "onetrust.com", "cookielaw.org"],
        "width": 1920,
        "height": 1080
    }
)

After implementing cookie banner blocking, test against sites known for aggressive consent banners:

  1. Major news sites (CNN, BBC, The Guardian)
  2. EU-based e-commerce sites
  3. Government websites
  4. Banking and financial sites

Compare screenshots with and without your blocking rules to verify effectiveness.

Tips and Best Practices

  1. Combine methods — use CSS injection as the primary method and JavaScript as a fallback
  2. Add a delay — cookie banners often load after the main content, so wait 1-2 seconds
  3. Update regularly — consent management platforms update their HTML structure frequently
  4. Respect robots.txt — always follow website terms of service
  5. Test across regions — some banners only appear for EU visitors
  6. Monitor for false positives — your CSS selectors might accidentally hide legitimate content

Conclusion

Cookie banners do not have to ruin your automated screenshots. By combining CSS injection, JavaScript execution, and pre-set cookies, you can capture clean, banner-free screenshots consistently. The ToolCenter makes this especially easy with built-in support for CSS and JavaScript injection, so you can handle most cookie banners with a single API parameter.

Start with the comprehensive CSS block list, add JavaScript clicking for stubborn banners, and you will have clean screenshots in no time.