How to Capture Screenshots of Websites With Cookie Banners

To capture a website with its cookie banner visible, start from a browser state where consent has not already been saved, reload the page, confirm the banner appears, and capture the viewport or the banner element. For repeatable screenshots, use a fresh Playwright browser context and verify the banner before saving the image. Capture the initial banner state separately from any screenshot taken after accepting, rejecting, or customizing consent.

A screenshot records what was visible; it does not prove how the site stored consent or whether third-party cookies were blocked. Inspect browser storage in DevTools when cookie behavior itself is part of the issue.

1. Choose which consent state to document

Decide what the screenshot needs to show before you capture it. These states answer different questions:

Evidence goal	Browser state	Useful capture
Show the banner as a first-time visitor sees it	No saved consent for the site; reload and check that the banner is visible	Viewport for page context, plus an element capture if the banner is hard to read
Show the page after a consent choice	Make the choice you want to document, then wait for the page to settle	A separate screenshot labeled with the choice made
Compare the banner across builds	Use the same controlled browser context, viewport, browser version, and capture conditions	Repeatable viewport or element screenshots
Investigate stored consent or cookie blocking	Inspect the browser’s cookie and privacy settings	Screenshot the page as supporting evidence; inspect DevTools separately

Do not treat a post-choice screenshot as evidence of the initial banner. Keep each state as a separate file and label it clearly.

2. Make the cookie banner appear again in Chrome

1. Open the website in Chrome and open DevTools.
2. Go to Application > Storage > Cookies and select the site’s origin.
3. Inspect the listed cookies. Delete the consent-related cookie if you know which one it is, or clear the site’s cookies if you need a clean starting point.
4. Reload the page and confirm visually that the banner appears before taking the screenshot.

Chrome documents inspecting and deleting cookies in its DevTools cookie guide. Clearing cookies does not guarantee that a banner will return: a site may preserve consent in local storage or another mechanism, or show the banner only under certain conditions. If the banner is still absent, use a fresh browser profile or private session, check site storage, and verify that you are testing the expected URL and region.

If the question concerns third-party cookie restrictions, Chrome’s Privacy and security panel can temporarily limit third-party cookies and show whether they were allowed or blocked. Reload after changing the setting. See the Chrome DevTools Privacy and security panel guide. A visible banner alone does not establish whether cookies were stored or blocked.

3. Take a manual screenshot

1. Choose a viewport that includes the banner and enough surrounding page to explain where it appeared.
2. Wait for the page and banner to finish rendering. Check that text, buttons, and any backdrop are visible.
3. Use your operating system’s screenshot function to capture the visible browser area. Save the original image without cropping away useful context.
4. If you also need the result after a consent action, make that choice, wait for the page to update, and save a second image with a distinct filename.

For a bug report, note the URL, date and time, browser and version, viewport size, and the action taken. These notes help someone reproduce the state; they are not necessarily recorded in the screenshot itself.

4. Automate captures with Playwright

Playwright can capture the visible page, the full scrollable page, or a selected element. Start with a fresh browser context for each initial-state run so state from a previous run does not silently suppress the banner. Then assert that the banner is visible before saving the screenshot. The locator in the example is a placeholder: replace it with a selector that matches the site’s actual banner.

Install Playwright and its Chromium browser in your project using the official Playwright installation guide. Save the following as capture-cookie-banner.mjs and run it with node capture-cookie-banner.mjs:

import { chromium } from 'playwright';

const url = process.env.TARGET_URL ?? 'https://example.com';
const bannerSelector = process.env.BANNER_SELECTOR ?? '[role="dialog"]';
const browser = await chromium.launch({ headless: true });

try {
  // A new context starts without cookies or local storage from earlier runs.
  const context = await browser.newContext({
    viewport: { width: 1440, height: 1000 },
    deviceScaleFactor: 1,
  });
  const page = await context.newPage();

  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 45_000 });
  const banner = page.locator(bannerSelector).first();
  await banner.waitFor({ state: 'visible', timeout: 15_000 });

  // Capture page context, then the banner itself for readable detail.
  await page.screenshot({ path: 'cookie-banner-viewport.png' });
  await banner.screenshot({ path: 'cookie-banner-element.png' });

  // Capture the long page separately if it is useful for this report.
  await page.screenshot({ path: 'cookie-banner-full-page.png', fullPage: true });

  // Optional: make a consent choice and save a separate post-choice image.
  // Replace this selector with the site's actual accept button.
  // await page.locator('button:has-text("Accept")').click();
  // await page.screenshot({ path: 'after-consent-accept.png' });

  await context.close();
} finally {
  await browser.close();
}

Set the URL and selector for the target site before running, for example: TARGET_URL=https://example.com BANNER_SELECTOR='[data-testid="consent-banner"]' node capture-cookie-banner.mjs. The example assumes the banner can be identified by a stable selector. A generic selector such as [role="dialog"] may match another dialog or nothing at all; inspect the page and use a site-specific selector.

Viewport, full-page, and element captures

• Viewport: page.screenshot({ path: 'viewport.png' }) captures the current visible area. Use it when page context matters.
• Full page: page.screenshot({ path: 'full.png', fullPage: true }) captures the full scrollable page. A fixed banner may appear differently in a stitched long-page image, so use a viewport capture as the primary record of its on-screen position.
• Element: page.locator(selector).screenshot({ path: 'element.png' }) captures the selected banner. It is useful for checking wording and control layout, but omits surrounding page context.

Playwright also supports returning screenshot bytes in memory and screenshot options such as scale and image quality. See the Page API and the Playwright screenshots guide for the relevant API details. Use PNG when you need a lossless reference for visual comparison; choose another supported format or scale only when your downstream workflow calls for it.

5. Keep visual comparisons reliable

Browser rendering can vary with the operating system, browser version, settings, hardware, power state, and headless mode. For visual comparisons, keep the environment and viewport consistent with the baseline, and use the same browser version where possible. Playwright explains these sources of variation in its visual comparisons guide.

• Keep the cookie banner in the capture if the banner is what you are testing. Hiding it removes the subject of the test.
• Wait for a stable banner state and use a selector-based wait instead of relying only on a fixed delay.
• Filter unrelated animation or volatile page content only when it is not part of the behavior under test.
• When the consent choice matters, begin each run from a controlled context and record the choice made.
• For a useful bug report, save a viewport capture, a focused banner capture if needed, and a separately labeled post-choice image when relevant.

6. Troubleshoot missing or unusable captures

Symptom	Likely cause	What to try
Banner does not appear after clearing cookies	Consent may be stored in local storage or another site mechanism; display may also depend on region, timing, or page conditions.	Use a fresh profile or context, inspect other site storage, reload, and confirm the banner visually before capture.
Playwright times out waiting for the banner	The selector is wrong, the banner has not loaded, or the site did not show it in this context.	Inspect the page DOM, set a specific banner selector, check the URL and browser state, and distinguish a truly absent banner from a slow page.
Screenshot is blank or only partly rendered	Navigation may have completed before visible content rendered, or the page may have failed to load.	Wait for the relevant banner locator to become visible. Check the page and console for load failures; do not treat a blank capture as a valid banner screenshot.
Full-page image is unusually tall or awkward	The page is long, or fixed and sticky elements behave differently in a full-page capture.	Use a viewport image to document the banner’s actual on-screen placement; add a focused element capture for detail.
Repeated visual tests differ unexpectedly	Browser, machine, viewport, headless mode, fonts, or changing page content differs from the baseline.	Match the baseline environment and viewport; stabilize or filter unrelated volatile content while keeping the banner visible.
Image shows a consent choice but not the original banner	A previous run or manual action saved consent.	Start with a fresh context or clear the site’s consent state, reload, verify the initial banner, and save that image separately.

7. Performance, reliability, and cost

A manual screenshot is usually the simplest choice for a one-off support report. Playwright adds setup and browser execution, but makes the navigation, viewport, state, and output repeatable. Reuse an installed browser in a controlled environment for repeated jobs, but create a fresh context when you need a clean consent state. Wait for the banner or other relevant page condition rather than adding a long fixed sleep to every run.

Full-page screenshots can produce much taller files and take more work to render than viewport or element captures. Capture only the framing needed for the evidence. Playwright is an open-source browser automation option; the cited sources do not establish a universal runtime or cost, which depends on where and how you run it.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for request options. This call captures the target URL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

For this cookie-banner workflow, account for the fact that ScreenshotNeo removes known consent banners before capture, so it is suited to clean page screenshots rather than documenting the banner itself. Cookie banners, popups, and chat widgets are removed before the shot, and each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; the response identifies page verdict and billing status in headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Can a screenshot prove that a site saved my cookie choice?

No. It shows the visible page state. Inspect browser storage in DevTools to check cookies and other stored state.

Should I use a full-page screenshot for a consent banner bug?

Usually start with a viewport image because it preserves the banner’s on-screen relationship to the page. Add an element capture for text or control detail; use full-page when the rest of the long page is relevant.

Why does my banner reappear in one browser but not another?

Each browser profile can have different saved consent and privacy settings. Compare using controlled, documented browser states and inspect storage when the difference matters.

Should I hide the banner in a visual regression test?

No, if the banner is the feature being evaluated. Keep it visible and stabilize unrelated content around it.

Primary references

• Chrome DevTools: View, add, edit, and delete cookies
• Chrome DevTools: Privacy and security panel
• Playwright Page API
• Playwright screenshots guide
• Playwright visual comparisons