Screenshot a Cookie Banner in Hindi and English for Website Testing

To screenshot a cookie banner in Hindi and English, enable both languages in the consent platform, then capture the same page twice: once with Hindi as the preferred browser language and once with English. Start each first-visit capture from a clean consent state, and keep the URL, region, viewport, and browser version consistent. Record the language and consent state with each image.

A screenshot shows what the site displayed at that moment. It does not prove that the site honored the visitor’s consent choice or blocked the right cookies.

1. Define which consent state you need

Before capturing, decide what the evidence should show. Treat these as separate test cases rather than mixing them:

• First visit: the banner appears before a choice is made.
• Preferences: the detailed settings panel is open.
• After a choice: the page reflects acceptance, rejection, or a saved preference.

Use a fresh profile or isolated browser context for each first-visit language capture. For post-choice evidence, perform the intended action and label it clearly. Do not hide the banner with CSS and describe that as a consent choice; those are different states.

2. Configure Hindi and English

In the consent platform, confirm that Hindi and English are enabled, and identify the configured default language. Then verify how that platform chooses the banner language. Cookiebot documents browser-language selection among configured languages, with a fallback to the configured default when the browser language is unavailable. That behavior is specific to the platform, so check the documentation and settings for the platform under test. Cookiebot’s language documentation

Also check whether the site varies the banner by visitor region. A banner that does not appear in one region may reflect a regional display rule rather than a Hindi translation problem. Record the test region so the screenshots can be interpreted correctly. Figma’s cookie-banner guidance discusses preview, persisted choices, language settings, and region considerations.

3. Capture both languages manually

1. Choose one URL, viewport, browser version, and region for both runs.
2. Create a fresh browser profile or private session for the Hindi run. If using a browser’s language preferences, put Hindi first; a locale such as hi-IN may be appropriate when supported by the browser and site.
3. Open the target URL without accepting, rejecting, or dismissing the banner. Wait for it to finish rendering.
4. Save a full-window or page screenshot. Note the browser language, region, viewport, URL, and state.
5. Start a separate clean session for the English run, set English as the preferred language, then repeat the same steps.
6. Review both images for missing text, untranslated controls, clipping, and legibility.

Browser interfaces differ, so use the browser’s language settings or a dedicated test profile rather than assuming that changing the operating system language changes the browser request. For repeatable evidence, automate a fresh context and its language settings.

4. Automate repeatable captures with Playwright

This Node.js example creates a new browser context for each language, sets its locale, opens the page without interacting with the banner, and saves a screenshot. Install Playwright with npm install playwright and install its Chromium browser with npx playwright install chromium. Save the script as capture-banners.mjs; run it with PAGE_URL=https://example.com node capture-banners.mjs.

import { chromium } from 'playwright';

const url = process.env.PAGE_URL;
if (!url) throw new Error('Set PAGE_URL to the page under test');

const browser = await chromium.launch({ headless: true });

for (const [name, locale] of [['hindi', 'hi-IN'], ['english', 'en-US']]) {
  const context = await browser.newContext({
    locale,
    viewport: { width: 1440, height: 1000 },
    // Each new context starts without this site's cookies or local storage.
  });
  const page = await context.newPage();
  try {
    await page.goto(url, { waitUntil: 'networkidle', timeout: 60000 });
    await page.screenshot({ path: `cookie-banner-${name}.png`, fullPage: true });
  } finally {
    await context.close();
  }
}

await browser.close();

locale sets the browser context locale and language preferences used by the page. If the banner does not switch languages, inspect the platform’s language-selection rules and the request headers in the test context; the site may use a different signal, such as an explicit locale setting or URL. The script deliberately does not click a consent control: add an interaction only when the test case is specifically the post-choice state.

networkidle can wait indefinitely or time out on pages with ongoing network activity. If that happens, use waitUntil: 'domcontentloaded' and then wait for a meaningful page or banner selector with page.locator('YOUR_BANNER_SELECTOR').waitFor(). Replace the placeholder with the actual selector and keep the same wait rule in both runs. If the site renders the banner after a delay, a targeted selector wait is generally more dependable than an arbitrary sleep.

For a post-choice screenshot, click the actual consent control in a separate test case, then capture it. Browserless documents a Playwright workflow that interacts with a consent button before taking a screenshot; that is useful for documenting the result of a choice, but it is not a first-visit capture. Browserless consent-banner automation documentation.

5. Reset consent state between runs

A stored consent choice commonly suppresses the banner on later visits. Figma recommends private browsing or clearing the site’s cookies when checking first-visit behavior. If clearing cookies does not restore the banner, the platform may persist state in local storage or other browser storage; use a fresh isolated browser context and follow the consent vendor’s reset instructions.

• For manual checks, use separate private sessions or browser profiles.
• For automation, create a new browser context per run and do not reuse a persistent profile.
• Keep the Hindi and English test conditions alike, except for the language preference.
• Do not clear state after loading the page; begin each run clean.

Distinguish an absent banner caused by prior consent from one suppressed by regional rules, a site configuration, or a failed page load. A screenshot of a missing banner alone cannot identify which cause applies.

6. Review and label the evidence

Compare the captures at the same dimensions and inspect the banner, not just the page as a whole:

• Is the intended language displayed, including button labels and preference controls?
• Are Hindi glyphs rendered correctly, without missing-character boxes or broken shaping?
• Is any text clipped, covered, or too small at the selected viewport?
• Did both screenshots represent the same consent state and region?
• Did the banner appear only because the test began from a clean state?

Use descriptive filenames such as first-visit-hi-IN-region-a-1440x1000.png and first-visit-en-US-region-a-1440x1000.png. Keep a short record of the URL, date, browser/version, locale, region, viewport, and consent state. Do not treat visual evidence as proof of enforcement: verify separately that the site activates or blocks cookies in line with the submitted choice. Seqrite’s consent-manager documentation addresses multilingual preview, deployment checks, and enforcement.

Or skip the browser setup

ScreenshotNeo accepts a URL in one API request and returns an image or PDF. Its capture flow can accept cookie banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each of those steps can be turned off. For a bilingual test, set the browser language as required by the target site and keep the consent state and region consistent. See the ScreenshotNeo API documentation.

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

import requests

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners, popups, and chat widgets are removed before the shot by default, so disable the relevant cleanup when the test needs to document the banner itself. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed; response headers report the page verdict and billing status. ScreenshotNeo also has an MCP server for AI agents, including Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.

Troubleshooting

Symptom	Likely cause	Fix
Banner is missing in the second run	A previous choice remains stored, or regional/site rules suppress it.	Use a fresh profile or browser context. Check region and display rules before treating it as a language defect.
Both runs show the same language	The browser preference is not being used, the language is unsupported or disabled, or the platform uses another language signal.	Confirm Hindi and English are enabled, verify the platform’s selection rules, and inspect the locale and request headers sent by the browser.
Hindi text appears as boxes or is clipped	The page’s font lacks glyph coverage, shaping is unavailable, or the banner layout is too narrow.	Check font loading and glyph coverage, then inspect at the target viewport and a wider viewport. Record whether the defect is font rendering or layout.
Automation times out at network idle	Analytics, polling, or other persistent requests prevent the page from becoming idle.	Wait for DOM content and then for a specific banner or page selector. Use the same wait condition for both languages.
Screenshot shows the wrong test state	The script clicked a control, reused storage, or captured before the banner rendered.	Use a new context, remove unintended interactions, and wait for the actual banner selector. Keep first-visit and post-choice captures separate.
Banner is absent only in one region	The consent configuration may be region-dependent.	Repeat from the same region or document the regional difference. Do not label it a translation failure without checking the rule.

Performance, reliability, and cost

Two language captures require two independent page loads. Reusing one context can save setup time but risks carrying consent state from one run into the next; isolated contexts are more reliable for first-visit evidence. Keep the viewport and wait strategy fixed so differences are attributable to the intended language condition. Full-page screenshots may include content below the fold and can take longer on long or image-heavy pages.

For local automation, browser execution and page loading are the main costs. Repeated runs should use a controlled test environment and avoid relying on a live site whose content or consent configuration changes during the comparison. For API captures, review the provider’s current pricing and response semantics before building usage assumptions into a test pipeline. ScreenshotNeo lists 1,000 monthly free captures without a card, then plans at $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing gives two months free, and every feature is on every plan.

FAQ

Does the screenshot prove the consent choice was enforced?

No. It records presentation at capture time. Test cookie behavior separately after making each choice.

Should I accept the banner before capturing it?

Only if the test is about the post-choice state. For a first-visit screenshot, leave the banner untouched and begin with clean site state.

What if Hindi is not the browser’s preferred language?

Use an isolated browser context or profile with Hindi configured, and confirm that the consent platform supports the browser-language selection behavior you are testing.

Can a screenshot compare two regions as well as two languages?

Yes, but make region an explicit test variable. Capture each region under otherwise matched conditions so regional display rules are not confused with translation behavior.