Back to Blog
screenshotscookie bannersautomationweb scraping

How to Hide Cookie Banners in Screenshots: Complete Guide

ST
ScreenURL Team
••7 min read

How to Hide Cookie Banners in Screenshots: Complete Guide

Nothing ruins a clean website screenshot quite like a massive cookie consent banner blocking half the viewport. Whether you're building a website gallery, monitoring competitors, or creating marketing materials, those GDPR popups can turn professional screenshots into unusable images.

This guide covers everything you need to know about hiding cookie banners in automated screenshots—from CSS injection techniques to JavaScript approaches and API-based solutions.

The Problem: Cookie Banners Are Everywhere

Since GDPR went into effect in 2018, cookie consent banners have become ubiquitous. Nearly every website now displays some form of consent popup, and they come in all shapes and sizes:

  • Full-screen overlays that block the entire page
  • Bottom bars that cover important footer content
  • Modal dialogs that prevent any interaction
  • Sticky headers that follow you as you scroll

For screenshot automation, these banners create several problems:

  1. Visual obstruction — The banner covers actual page content
  2. Inconsistent results — Different regions see different banners
  3. Interaction blockers — Some banners prevent scrolling until dismissed
  4. Dark overlays — Many add a semi-transparent backdrop that dims the page

If you're capturing thousands of screenshots for a web directory, monitoring tool, or archive service, manually dismissing each banner isn't an option. You need an automated solution.

CSS Injection Approach: Hide by Selector

The most reliable method for hiding cookie banners is CSS injection. By targeting known selectors and setting display: none, you can remove banners without any JavaScript execution delays.

How It Works

Inject a CSS snippet that targets common cookie banner selectors:

/* Hide common cookie consent banners */
#onetrust-consent-sdk,
#onetrust-banner-sdk,
.onetrust-pc-dark-filter,
#CybotCookiebotDialog,
#CybotCookiebotDialogBodyUnderlay,
.cc-window,
.cc-banner,
#cookie-notice,
#cookie-law-info-bar,
.cookie-consent,
.cookie-banner,
.gdpr-banner,
.consent-banner,
[class*="cookie-consent"],
[class*="cookie-banner"],
[id*="cookie-consent"],
[id*="cookie-banner"],
.qc-cmp2-container,
#usercentrics-root,
.evidon-banner,
#truste-consent-track {
  display: none !important;
}

/* Remove any overlay/backdrop */
.modal-backdrop,
.overlay-backdrop,
[class*="overlay"] {
  display: none !important;
}

/* Restore scrolling if disabled */
body {
  overflow: auto !important;
}

Pros and Cons

Pros:

  • Instant — No waiting for JavaScript to execute
  • Reliable — CSS applies before render
  • Lightweight — Minimal performance impact

Cons:

  • Requires knowing selectors in advance
  • New banner tools may use different selectors
  • Some banners inject inline styles that override CSS

JavaScript Approach: Auto-Dismiss or Remove Elements

For more complex scenarios, JavaScript can programmatically dismiss or remove cookie banners. This approach works well when banners require interaction or use dynamically generated selectors.

Basic Element Removal

// Remove elements by common selectors
const selectors = [
  '#onetrust-consent-sdk',
  '#CybotCookiebotDialog',
  '.cc-window',
  '#cookie-notice',
  '.cookie-consent',
  '[class*="cookie-banner"]'
];

selectors.forEach(selector => {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => el.remove());
});

// Restore body scroll
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';

Auto-Accept Approach

Some scenarios require accepting cookies rather than just hiding the banner (especially for functional testing):

// Click accept/agree buttons
const acceptSelectors = [
  '[id*="accept"]',
  '[class*="accept"]',
  'button[class*="agree"]',
  '.cc-accept',
  '#onetrust-accept-btn-handler',
  '#CybotCookiebotDialogBodyButtonAccept',
  '[data-action="accept"]'
];

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

Waiting for Dynamic Banners

Some cookie banners load asynchronously. Use a MutationObserver to catch them:

const observer = new MutationObserver((mutations) => {
  const banner = document.querySelector('[class*="cookie"]');
  if (banner) {
    banner.remove();
    observer.disconnect();
  }
});

observer.observe(document.body, { childList: true, subtree: true });

ScreenURL Solution: Built-In Banner Blocking

If you're using ScreenURL for screenshot automation, hiding cookie banners is straightforward. ScreenURL provides two approaches:

Option 1: Block Ads Parameter

The block_ads parameter enables built-in ad and tracker blocking, which removes most cookie consent banners automatically:

curl "https://screenurl.com/api/screenshot?url=https://example.com&block_ads=true&apiKey=YOUR_KEY"

This uses filter lists that include common consent management platforms (CMPs) like OneTrust, Cookiebot, and TrustArc.

Option 2: Custom CSS Injection

For complete control, inject your own CSS using the css parameter:

curl "https://screenurl.com/api/screenshot?url=https://example.com&css=%23onetrust-consent-sdk%7Bdisplay%3Anone%21important%7D&apiKey=YOUR_KEY"

The CSS value must be URL-encoded. Here's a Python example:

import requests
from urllib.parse import quote

custom_css = """
#onetrust-consent-sdk,
#CybotCookiebotDialog,
.cc-window,
.cookie-consent {
  display: none !important;
}
"""

params = {
    "url": "https://example.com",
    "css": quote(custom_css),
    "apiKey": "YOUR_KEY"
}

response = requests.get("https://screenurl.com/api/screenshot", params=params)

Option 3: JavaScript Injection

For dynamic banners, use the js parameter to execute removal scripts:

import requests
from urllib.parse import quote

removal_script = """
document.querySelectorAll('[class*="cookie"], [id*="cookie"]')
  .forEach(el => el.remove());
"""

params = {
    "url": "https://example.com",
    "js": quote(removal_script),
    "delay": 2000,  # Wait for banner to load
    "apiKey": "YOUR_KEY"
}

response = requests.get("https://screenurl.com/api/screenshot", params=params)

Common Cookie Banner Selectors Reference

Here's a comprehensive list of selectors for the most popular cookie consent tools:

OneTrust (Most Common Enterprise Solution)

#onetrust-consent-sdk
#onetrust-banner-sdk
#onetrust-pc-sdk
.onetrust-pc-dark-filter
#ot-sdk-btn-floating

Cookiebot

#CybotCookiebotDialog
#CybotCookiebotDialogBodyUnderlay
.CybotCookiebotDialogActive

Cookie Consent (Osano)

.cc-window
.cc-banner
.cc-overlay
.cc-revoke

TrustArc / TRUSTe

#truste-consent-track
#truste-consent-content
.truste_overlay
#consent-banner

Quantcast Choice

.qc-cmp2-container
.qc-cmp2-consent-info
#qc-cmp2-ui

Usercentrics

#usercentrics-root
.uc-banner

Generic Patterns

[class*="cookie-consent"]
[class*="cookie-banner"]
[class*="cookie-notice"]
[class*="gdpr-banner"]
[class*="consent-banner"]
[class*="privacy-banner"]
[id*="cookie-consent"]
[id*="cookie-banner"]
[id*="gdpr"]
.cookie-policy-banner
#cookie-law-info-bar
.evidon-banner

Regional/CMS-Specific

/* WordPress plugins */
#cookie-notice
#cookie-law-info-bar
.cli-modal

/* Drupal */
.eu-cookie-compliance-banner

/* Shopify */
.shopify-privacy-banner

/* Termly */
#termly-code-snippet-support

Code Examples: Before and After

Node.js with ScreenURL

const axios = require('axios');
const fs = require('fs');

async function captureCleanScreenshot(url) {
  const css = encodeURIComponent(`
    #onetrust-consent-sdk,
    #CybotCookiebotDialog,
    .cc-window,
    [class*="cookie-banner"],
    [class*="consent-banner"] {
      display: none !important;
    }
  `);

  const response = await axios.get('https://screenurl.com/api/screenshot', {
    params: {
      url,
      css,
      block_ads: true,
      width: 1920,
      height: 1080,
      apiKey: process.env.SCREENURL_API_KEY
    },
    responseType: 'arraybuffer'
  });

  fs.writeFileSync('clean-screenshot.png', response.data);
  console.log('Screenshot saved without cookie banners!');
}

captureCleanScreenshot('https://example.com');

Python with ScreenURL

import requests
from urllib.parse import quote

def capture_clean_screenshot(url: str, output_path: str):
    css = """
    #onetrust-consent-sdk,
    #CybotCookiebotDialog,
    .cc-window,
    [class*="cookie-banner"],
    [class*="consent-banner"] {
      display: none !important;
    }
    """
    
    params = {
        "url": url,
        "css": quote(css),
        "block_ads": "true",
        "width": 1920,
        "height": 1080,
        "apiKey": "YOUR_API_KEY"
    }
    
    response = requests.get(
        "https://screenurl.com/api/screenshot",
        params=params
    )
    
    with open(output_path, "wb") as f:
        f.write(response.content)
    
    print(f"Clean screenshot saved to {output_path}")

capture_clean_screenshot("https://example.com", "clean.png")

Best Practices and Legal Considerations

When to Hide vs. Accept

Hide banners when:

  • Creating website galleries or directories
  • Marketing screenshots and promotional materials
  • Visual regression testing (where consent state doesn't matter)
  • Archival/documentation purposes

Accept cookies when:

  • Testing cookie-dependent functionality
  • Checking personalized content behavior
  • Compliance testing (verify banner works correctly)
  • Capturing "logged in" user experiences

Legal Considerations

Hiding cookie banners in screenshots doesn't affect the legal requirements for your own website. The banner removal only affects what appears in your captured images.

However, keep these points in mind:

  1. Don't misrepresent — If creating screenshots for a client's website, disclose that cookie banners were hidden
  2. Testing purposes — For QA, capture both with and without banners to ensure proper functionality
  3. Regional differences — Some regions (US) see fewer banners than others (EU), affecting screenshot consistency

Performance Tips

  1. Combine approaches — Use block_ads plus custom CSS for best results
  2. Add delay for dynamic banners — Some CMPs load asynchronously; add 1-2 second delay
  3. Test your selectors — Run against sample sites before bulk processing
  4. Keep selector list updated — CMP vendors occasionally change their markup

Conclusion

Cookie banners are a necessary part of the modern web, but they don't have to ruin your screenshots. Whether you're using CSS injection, JavaScript removal, or an API like ScreenURL with built-in banner blocking, you have multiple options for capturing clean, professional website screenshots.

The key is choosing the right approach for your use case: CSS injection for speed, JavaScript for complex scenarios, and API parameters for convenience at scale.

Ready to capture banner-free screenshots? Get started with ScreenURL — 100 free screenshots per month, no credit card required.