How to Block Cookie Banners in Automated Screenshots

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.

Why Cookie Banners Are a Problem

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

Testing Your Cookie Blocking

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.