How to Hide Cookie Banners When Taking a Screenshot with Puppeteer

Capturing clean and professional screenshot on websites is a critical activity for developers, marketers and QA team as well as content creators. Being able to take a clear screenshot may be important whether it is targeted to visual testing, marketing materials, or tracking of changes on the web sites.

But there's one common issue: cookie banners.

These banners that seem to be applied mainly as a GDPR compliance appear on practically every web page. It is also capable of obscuring significant elements on a page, especially when the user agent is not properly configured, causing the screenshot to appear sloppy or unfinished.

In this blog, we’ll explore:

• How to hide cookie banners when using Puppeteer, a popular tool used by developers.
• How ScreenshotAPI.net offers a much easier and faster way to achieve the same goal without writing much code.
• A comparison of both tools to help you decide which one fits your needs best.

Let’s start by understanding what cookie banners are and why they can be a problem in screenshots.

What Is a Cookie Banner and Why Hide It in Screenshots?

A cookie banner is a small message that appears on many websites when you visit them. It normally requests you to accept cookies which are tiny files designed to keep track of your visit. Most countries have privacy regulations such as GDPR that require the use of these banners.

Although cookie banners should be taken seriously in relation to the privacy of the user, they may pose some issues in becoming a challenge when trying to take a screenshot of a particular webpage.

Here’s why you might want to hide them:

• They block content: Cookie banners often appear at the top or bottom of the page, covering important buttons, text, or images.
• They make screenshots look unprofessional: If you're taking screenshots for a client, presentation, or marketing material, having a cookie banner visible looks messy.
• They are not part of the actual website layout: The banner isn’t part of your design, so including it in screenshots gives a false impression of what the site really looks like.
• They appear on every page: If you’re taking multiple screenshots across different pages, you’ll see the banner over and over again.

Because of these reasons, many people want to hide or remove cookie banners automatically when taking screenshots.

Using Puppeteer to Hide Cookie Banners

Puppeteer is a free and open-source Node.js library made by Google. It allows developers to control a browser (like Chrome or Chromium) through code.

With Puppeteer, you can do things like:

• Open a webpage
• Click buttons or fill out forms
• Take screenshots or create PDFs
• Run custom JavaScript on a page

It’s a powerful tool, mostly used for testing websites, scraping data, or automating browser tasks.

Step-by-Step: Hiding a Cookie Banner in Puppeteer

To hide a cookie banner with Puppeteer, we need to do the following:

1. Launch a browser
2. Open the webpage
3. Find the cookie banner using a CSS selector
4. Hide it using JavaScript
5. Take the screenshot

Here's an actual working example:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Go to the website
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });

  // Wait a bit in case the cookie banner loads late
  await page.waitForTimeout(2000);

  // Hide the cookie banner using its CSS class or ID
  await page.evaluate(() => {
    const banner = document.querySelector('.cookie-banner'); // Replace with the correct selector
    if (banner) {
      banner.style.display = 'none';
    }
  });

  // Take a screenshot after hiding the banner
  await page.screenshot({ path: 'screenshot.png', fullPage: true });

  await browser.close();
})();

Note: You must know the correct CSS selector (like .cookie-banner or #cookiePopup) used by the website you are working with. It changes from site to site.

Limitations of Puppeteer for This Task

While Puppeteer gives you full control, it also comes with some challenges:

• You must know the exact CSS selector to hide the banner
• Every website may use a different class or ID
• It requires writing and running code (JavaScript + Node.js)
• You need to install and set up Puppeteer on your machine or server
• For bulk screenshots or multiple websites, the process becomes more complex

That’s why many people look for an easier option, especially if they want to take screenshots at scale.

A Simpler Alternative: ScreenshotAPI.net

ScreenshotAPI.net is a cloud-based tool that lets you capture screenshots of websites just by making a simple API call. It works without any setup, even when dealing with lazy loaded images, no need to install a browser, write code, or manage servers.

With ScreenshotAPI.net, you can:

• Take full-page or partial screenshots
• Emulate mobile or desktop devices
• Delay the capture to wait for animations or popups to load
• Automatically remove elements, like cookie banners, with just a parameter

It’s designed to be fast, scalable, and easy to use even for non-developers.

How to Hide Cookie Banners with ScreenshotAPI.net

Hiding cookie banners with ScreenshotAPI.net is very simple. All you need is the CSS selector of the element you want to remove, and you pass it as a parameter called remove_selector in your API request.

Here’s an example:

https://shot.screenshotapi.net/screenshot
  ?token=YOUR_API_TOKEN
  &url=https://example.com
  &no_cookie_banners=true
  &output=image
  &file_type=png
  &full_page=true

What this does:

• token: Your API key
• url: The website you want to capture
• no_cookie_banners: Tells the API to remove cookie banner before the screenshot
• full_page: Captures the entire page
• output=image: Returns the image directly
• file_type=png: Sets the format to PNG

Benefits Over Puppeteer

Here’s why ScreenshotAPI.net is easier than using Puppeteer for this task:

• No coding required: Just copy and paste a URL with parameters
• No setup: No need to install Node.js, Chromium, or anything else
• Fast and reliable: Hosted in the cloud with fast response times
• Great for bulk tasks: Take screenshots of hundreds of pages using the API or dashboard

In short, ScreenshotAPI.net makes hiding cookie banners and capturing clean screenshots simple and accessible to everyone, even if you're not a developer.

Conclusion

Cookie banners are everywhere and, although they fulfil a valuable purpose in the legal requirements, they become annoying when you want clean, clear screenshots of a webpage, especially in headless mode.

In this blog, we demonstrated to you how to block cookie banners by using Puppeteer which is a powerful browser automation library. Puppeteer allows you to have complete control, including using the evaluate function, but you need to know how to code, have time to set it up as well as technical know how.

We also explored ScreenshotAPI.net, a simple but a powerful alternative which only requires you to add a parameter to the request, or generate a new file, one single parameter and cookie banners vanish, no configuration, no code.

To quickly recap:

• Use Puppeteer if you want full browser control and you're comfortable with JavaScript.
• Use ScreenshotAPI.net if you want clean screenshots fast without writing code or managing infrastructure.

FAQs

1) How do I turn off cookie banners?

You can hide them using custom CSS or browser automation tools like Puppeteer or ScreenshotAPI by targeting their CSS selectors or just passing no_cookie_banners=true.

2) Can Puppeteer take screenshot?

Yes, Puppeteer can take screenshots of any web page, including full-page or specific sections.

3) How to clear cookies in Puppeteer?

Use page.deleteCookie() or context.clearCookies() in your Puppeteer script to remove cookies.

4) How do I hide pop up cookies?

You can write a script to find and remove the popup using Puppeteer, or use ScreenshotAPI’s remove_selector option to hide it automatically.