How to screenshot a cookie banner before and after accepting cookies

To screenshot a cookie banner before and after accepting cookies, capture the page in a fresh browser context, click the site’s actual Accept control, wait for the page to settle, and capture it again. Keep the URL, browser, viewport, zoom, and page position the same, and save the images under different filenames.

This records the visible change caused by the click. It does not, by itself, prove which cookies were stored or whether the site’s consent behavior meets a legal standard. If you need to investigate storage or requests, inspect those separately.

1. Prepare a clean, repeatable browser session

A previously saved consent choice can suppress the banner. Start with a fresh context for the “before” image:

1. For a one-off capture, open a private or incognito window. It starts without the normal profile’s site cookies, so the site is more likely to treat the visit as new.
2. For a test in your ordinary profile, clear that site’s cookies and site data. In Chrome, open DevTools, go to Application > Storage > Cookies, select the site origin, and use the clear action. The table also exposes cookie properties such as domain, path, expiry, HttpOnly, Secure, and SameSite. Clearing site state can affect more than consent; it may sign you out or reset preferences. See Chrome DevTools cookie inspection.
3. Open the exact URL you intend to document. Record the browser and version, viewport dimensions, zoom, and region if another person needs to reproduce the result.
4. Wait until the page and banner are visible. Do not hide or remove the banner element: that would not test what the site’s Accept control does.

Region and browser privacy settings can change the banner or the available choices. If you change Chrome’s temporary third-party-cookie setting, reload for it to apply and record that condition; do not mistake it for the site’s consent choice. For region-dependent comparisons, keep the region the same. Sitepager’s workflow guidance also calls out fresh-session setup and regional variation (Sitepager guide).

2. Capture the banner before accepting cookies

In Firefox, you can capture the full page or just the banner. Mozilla’s documentation covers both page and element screenshots.

1. For a full-page image, open DevTools settings and enable Take a screenshot of the entire page under Available Toolbox Buttons. Click the screenshot icon. Firefox saves the image to Downloads.
2. For a banner-only image, open the Inspector, select the banner element, right-click its node, and choose Screenshot Node.
3. Alternatively, open the Web Console and run the documented screenshot helper with a distinct filename. For example:
   :screenshot cookie-banner-before.png --fullpage

Use a full-page capture when the surrounding page context matters; use a node capture when you need to show the banner’s appearance alone. The console helper also supports a delay, device-pixel ratio, filename, full-page capture, and CSS selector. For example, a selector-limited capture can include one element and its descendants; a delay can preserve a transient state. Keep the capture method and device-pixel ratio consistent across both images.

For viewport-only framing, use Firefox’s screenshot capture in Responsive Design Mode. If you capture the full page, dynamic or lazy-loaded content may change the page length; wait for relevant content before capturing and use the same conditions for both images.

3. Click Accept and capture the page after

1. Save the first file as cookie-banner-before.png.
2. Click the site’s actual Accept control. Use the wording shown by the site; some banners offer a more specific choice than “accept cookies.”
3. Wait for the banner to disappear and for the page layout, overlays, and relevant content to settle. If the click opens another panel or requires a second confirmation, document the exact action sequence.
4. Capture again with the same browser, URL, viewport, zoom, page position, capture scope, and device-pixel ratio. Save as cookie-banner-after.png.
5. Keep both original files and note the date, browser/version, region, and action taken. Firefox warns that capturing again to the same filename overwrites the earlier file.

A useful full-page pair might be captured in the Firefox console like this:

:screenshot cookie-banner-before.png --fullpage
# Click the page's real Accept control and wait for the layout to settle.
:screenshot cookie-banner-after.png --fullpage

The comment is an instruction for you, not a console command. If your Firefox version’s console helper uses different option spelling, check the current Mozilla screenshot documentation linked above. To capture only the banner before acceptance, use the Inspector’s Screenshot Node command or the helper’s selector option; after acceptance, that selector may no longer match.

4. Compare the two images fairly

• Confirm both files show the same URL and comparable framing.
• Compare whether the banner and backdrop disappeared, what page content became visible, and whether the layout shifted.
• Do not infer cookie storage or consent compliance from pixels alone.
• If the banner did not return in the fresh context, check whether the site stores consent in local storage, session storage, or another state mechanism, and clear the relevant site data or use a new browser profile. A private window can also retain state for the duration of that private session.

For a functional follow-up, inspect cookie storage and network traffic before and after the click. Chrome’s DevTools cookie view helps inspect stored cookie attributes; Firefox’s Network Monitor has a Cookies tab showing cookies sent with requests and returned in responses (Firefox Network Monitor request details). These observations help investigate behavior but are not a compliance verdict.

5. Troubleshooting

Symptom	Likely cause	What to do
The banner is missing in the “before” image.	A saved choice or other site state suppresses it; the site may also vary by region.	Use a new private window or clear the site’s cookies and site data. Confirm the URL and region. If needed, use a new profile for a cleaner reset.
The banner remains after clicking Accept.	The click missed the real control, opened a submenu, or the page has not finished updating.	Click the labeled control itself, complete any follow-up choice the site requires, then wait for the page to settle. Do not remove the node manually.
The “after” image overwrote the “before” image.	Both captures used the same filename.	Capture again with a different filename. Firefox documents that a repeated capture to the same filename overwrites it.
The images differ in scale or framing.	Viewport, zoom, device-pixel ratio, scroll position, or capture scope changed.	Match those settings and repeat the pair. Record them with the files.
A full-page image is unexpectedly long or content differs.	Lazy content loaded at a different time, or page length changed after dismissal.	Wait for the same relevant content in both states. If only the banner matters, capture the element before acceptance and use a matched viewport capture for the page states.
The screenshot helper does not save a file.	The command may be copying to the clipboard or options may differ in your Firefox version.	Use a filename and the documented file option when needed; check the current Firefox docs. The enabled screenshot toolbar button is another full-page route.
The click appears to work, but cookie state is unclear.	A visual dismissal is not evidence of the site’s storage or network behavior.	Inspect the relevant storage and Network Monitor request/response cookies before and after the action.

Performance, repeatability, and cost

For two manual screenshots, browser-native capture has no service setup and is usually the shortest path. The main reliability risk is state drift: stored consent, changing content, viewport differences, region, or timing. A short capture record and distinct filenames make the pair easier to reproduce.

For repeated checks across many pages, automation can reduce repetitive clicking and saving, but it adds selector maintenance and setup. A selector may change when a site redesigns its banner, and visual comparison still does not establish what consent was stored. Scope an automated check to representative pages and separately inspect functional behavior when that is the question.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Use its click-element option to capture after interacting with the page; the documented one-call examples below show a screenshot request. Review the ScreenshotNeo API docs for available options and the exact click configuration. A single screenshot call does not itself produce a before-and-after pair: request one capture before the click and another after it, using the documented click option for the latter.

Cookie banners, popups, and chat widgets are removed before the shot by default, and each step can be turned off. That default is useful for clean page captures, but for documenting the banner itself, turn off the relevant banner-removal step in the documented settings. Bot checks, blank pages, timeouts, failed loads, and cache hits are never billed; response headers say which page verdict and billing result applied. An 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.

cURL

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

Python

import requests

r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

These examples capture the given target URL; replace it with your page. Store the API key securely and use separate output filenames for the before and after captures. ScreenshotNeo supports caching with a chosen TTL, async jobs with signed webhooks, and bulk capture of up to 100 URLs per call; consider cache settings when you need a fresh visual state.

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

FAQ

How do I make a cookie banner appear again?

Open the page in a fresh private window or clear that site’s stored data, then reload. If the banner still does not appear, other site state, region, or browser settings may affect it.

Should I screenshot the whole page or only the banner?

Use a full-page image to show page context and a node capture to document banner details. For a before-and-after comparison, choose a scope that remains meaningful in both states.

Does the after screenshot prove that cookies were accepted?

No. It proves only what was visible after the click. Inspect storage or network requests to investigate the site’s behavior.

Can I use Chrome for the whole process?

Yes. Use Chrome to reset or inspect cookie state through DevTools. The Firefox-specific screenshot button and :screenshot helper described above are Firefox instructions.