DEV Community

DevToolsmith
DevToolsmith

Posted on

Cookie banner auto-dismiss patterns for 12 CMPs (open source rules)

#webdev #api #opensource #javascript

If you take screenshots of websites programmatically, the GDPR cookie banner is your number-one enemy. Most APIs make you write CSS overrides per site, or charge extra for "stealth mode."

I built a JS dismiss-rules library covering 12 major Consent Management Platforms automatically: OneTrust, Cookiebot, Quantcast, TrustArc, Sourcepoint, Didomi, Iubenda, Usercentrics, Borlabs, Complianz, CookieYes, GDPR Plugin. Plus a generic text-matching fallback ("Accept all" / "I agree" / etc).

The shape of a rule 

{
  cmp: "OneTrust",
  accept_selectors: ["#onetrust-accept-btn-handler", "[data-cy='accept-all-cookies']"],
  container_selectors: ["#onetrust-banner-sdk", "#onetrust-consent-sdk"],
}
Enter fullscreen mode Exit fullscreen mode

The dismiss script:

  1. Iterates rules in order
  2. For each rule, tries every accept_selector and clicks the first visible match
  3. If no accept button works, hides containers via display: none
  4. Falls back to button text matching (/^(accept all|accept|i agree|got it|ok)$/i)

Where to use it

Drop into Page.evaluate() before screenshot capture. Saves ~10s per shot of CSS overrides per site.

We use it on captureapi.dev with ?clean=true. Free tier 200 captures/month if you want to test, or copy the rules file from the repo. PRs adding new CMPs welcome.

Why I'm sharing

This pattern bites everyone building screenshot APIs. I spent 4 days curating the selectors so you don't have to. If you find a CMP my library doesn't cover, ping me — adding it is 4 lines of code.

Live demo: https://captureapi.dev/screenshot-api

What's next

Same library is used in our WordPress plugin to generate clean Open Graph images. Plugin is free on the WP Plugin Directory if you run a content site.

Top comments (0)