How to Block Cookie Banners in Automated Screenshots
Remove annoying cookie consent banners from automated screenshots using CSS injection, JavaScript, and screenshot API features.
By Christian Mesa·Updated Feb 27, 2026
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:
```bash
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:
```css
/* 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:
```python
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:
```python
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:
```python
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:
```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:
```python
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.