How to Take Playwright Screenshots of a Regional-Language News Website

Use Playwright to set the browser context’s locale before navigation, choose a fixed viewport, and capture the viewport, full page, or a specific element. Add a timezone or geolocation only if the site uses those signals to select its edition. Then verify the edition label and rendered script in the screenshot: browser emulation cannot prove that the site served the intended language.

The example below uses Hindi for India (hi-IN) as a template. Replace the URL and locale with the news site and edition you need. A site may choose its edition through a language selector, URL, cookie, or account preference instead of browser locale.

1. Install Playwright and prepare a capture

In a Node.js project, install Playwright and its Chromium browser:

npm install playwright
npx playwright install chromium

Save this as regional-news.mjs. It sets locale and viewport at the browser-context level before opening the page, waits for the DOM, optionally checks an edition indicator, and saves a full-page screenshot.

import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com/news';
const browser = await chromium.launch();

try {
  const context = await browser.newContext({
    locale: 'hi-IN',
    viewport: { width: 1365, height: 900 },
    // Add timezoneId only if the site uses local time for its edition.
    // timezoneId: 'Asia/Kolkata',
  });
  const page = await context.newPage();

  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 });

  // Replace this with an edition label or headline specific to the site.
  // For example:
  // await page.getByText('Hindi', { exact: true }).waitFor({ timeout: 10_000 });

  await page.screenshot({ path: 'regional-news.png', fullPage: true });
  console.log(`Saved regional-news.png from ${page.url()}`);
  await context.close();
} finally {
  await browser.close();
}

Run it with a target URL:

node regional-news.mjs https://example.com/news

Playwright’s locale, viewport, timezone, and geolocation are context emulation settings. Pages created in that context inherit them. Set them before navigation so the first document request and page scripts see the intended settings. See the [Playwright emulation guide](https://playwright.dev/docs/emulation) and [browser context API](https://playwright.dev/docs/api/class-browsercontext).

2. Select the intended news edition

Locale is a browser preference, not a command that forces a publisher to serve a particular edition. Websites can make that choice using other state, so follow the target site’s actual behavior:

Check whether the site has a language or edition selector. Use it if the URL and locale alone do not select the edition.
Check for an edition-specific URL path or query parameter and navigate directly to it where appropriate.
If selection is stored in a cookie or local storage, reproduce the site’s normal selection flow in the browser context rather than assuming the locale set it.
Wait for a visible edition label, a known article heading, or another page-specific signal before capturing.

Do not treat a successful navigation or a screenshot file as evidence that the correct edition loaded. Inspect the visible edition indicator and the actual script in headlines and article text.

3. Add timezone or geolocation only when needed

Locale and physical location are separate settings. A language-region tag such as hi-IN may affect language preferences and formatting. Geolocation supplies coordinates to pages that request location; it does not change the browser locale. A site may ignore either setting.

For a site whose edition depends on location, create the context with coordinates and grant the browser permission before navigating:

const context = await browser.newContext({
  locale: 'hi-IN',
  timezoneId: 'Asia/Kolkata',
  geolocation: { latitude: 28.6139, longitude: 77.2090 },
  permissions: ['geolocation'],
  viewport: { width: 1365, height: 900 },
});

Use coordinates and timezone that match the edition you intend to reproduce. Do not add these settings by default: they can change location-dependent content and make captures less representative of readers elsewhere. Playwright’s [codegen documentation](https://playwright.dev/docs/codegen) also demonstrates language, timezone, and geolocation emulation.

4. Choose viewport, full-page, or element capture

Use the capture mode that matches what you need to inspect. The screenshot API supports viewport and full-page screenshots, element screenshots, format and scale choices, and clipping; see the [Playwright screenshot API](https://playwright.dev/docs/screenshots) and [Page API](https://playwright.dev/docs/api/class-page).

Goal	Call	Things to check
Capture the visible viewport	`await page.screenshot({ path: 'viewport.png' })`	Content below the fold is omitted.
Capture the scrollable page	`await page.screenshot({ path: 'full.png', fullPage: true })`	Very long pages produce large images; lazy content may need scrolling or site-specific waiting.
Capture one article or headline	`await page.locator('article').screenshot({ path: 'article.png' })`	Replace `article` with a selector that uniquely identifies the desired region.
Capture a defined rectangle	`await page.screenshot({ path: 'region.png', clip: { x: 0, y: 0, width: 900, height: 600 } })`	The clip uses page coordinates and must fit the rendered page.

Keep the viewport fixed for comparisons. CSS scale keeps screenshot dimensions in CSS pixels; device scale produces a higher-resolution image and changes pixel dimensions. Set the context’s deviceScaleFactor when you want to emulate a particular device scale, or select the screenshot scale explicitly where supported by the Playwright version in your project.

// Example of a high-density context:
const context = await browser.newContext({
  locale: 'ta-IN',
  viewport: { width: 390, height: 844 },
  deviceScaleFactor: 2,
});

// Viewport screenshot in PNG:
await page.screenshot({ path: 'mobile.png', type: 'png' });

// JPEG with explicit quality (JPEG only):
await page.screenshot({ path: 'mobile.jpg', type: 'jpeg', quality: 85 });

Supported formats and options can depend on the installed Playwright version. Check that version’s API when setting scale, clipping, or output format. Record locale, timezone, coordinates if used, viewport, device scale, browser, and capture mode alongside visual baselines.

5. Wait for the page to be ready

domcontentloaded waits for initial HTML parsing, not necessarily for client-rendered articles, web fonts, or late images. Use the narrowest reliable signal for the site: a visible edition label, expected headline, or article container. Avoid arbitrary long sleeps when a page condition is available.

await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 });
await page.locator('article h1').waitFor({ state: 'visible', timeout: 15_000 });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'article.png', fullPage: true });

Selectors are site-specific; the example selector may not exist on your target. If images or stories load as you scroll, scroll through the relevant page region before a full-page capture and wait for the content you need. For repeatable visual checks, Playwright screenshot assertions wait for consecutive screenshots to match and offer controls for animations and the caret; see [visual comparisons](https://playwright.dev/docs/test-snapshots). A stable image still does not establish that the correct edition was selected.

6. Inspect script rendering and layout

Review the saved image at its intended display size. Regional scripts can expose missing fonts or fallback-font differences that are hard to spot from a successful page load alone.

Confirm the edition label, URL, and a known headline match the intended edition.
Check representative characters, diacritics, conjuncts, punctuation, and numerals for missing glyphs or clipping.
Look for unexpected line breaks, overlapping headlines, truncated article text, and layout shifts.
Compare content above and below the fold when using a full-page capture.
For visual regression, hold the browser version, locale, viewport, device scale, timezone, and geolocation constant.

7. Common problems and fixes

Symptom	Likely cause	Fix
The page remains in the default language.	The site selects editions by URL, selector, cookie, or account preference rather than browser locale.	Use the site’s edition selector or edition URL, then wait for a page-specific indicator.
The wrong regional edition appears.	Locale, timezone, and location are being treated as interchangeable, or the site uses a different signal.	Verify each signal independently and inspect the site’s visible edition state. Add geolocation only if the site requests and uses it.
Text is missing or looks like boxes.	The required font did not load, or the browser lacks a suitable fallback font.	Wait for fonts, check network/font loading and browser environment, and install or make available the needed fonts in the runtime.
The headline or article is absent from the screenshot.	Client rendering or lazy loading had not completed before capture.	Wait for a meaningful locator, scroll the relevant content into view, and capture after it is visible.
Navigation times out on a busy news page.	Analytics, ads, or streaming requests keep the page active; a network-idle condition may never occur.	Use `domcontentloaded` or a specific content locator, then capture once the needed content is ready.
Full-page screenshot is unusually tall or incomplete.	The site has long feeds, lazy sections, sticky behavior, or content that only appears while scrolling.	Capture the article element or viewport, or scroll through the required sections and verify the result.
Images differ between runs.	Content, ads, fonts, animation, or viewport changed between captures.	Keep emulation settings fixed, wait on stable page signals, and use screenshot assertion controls for animations or caret where appropriate.
Geolocation has no effect.	The site does not use browser geolocation, or permission was not granted in the context.	Check whether the page requests location and configure the permission before navigation; otherwise use the site’s edition controls.

8. Performance, reliability, and cost

A local Playwright capture uses your runtime and browser installation, so account for browser startup, page loading, and screenshot encoding in job time. Reuse a browser process for batches of captures, while creating separate contexts when locale or device settings differ. Give navigation and content waits finite timeouts, close contexts after use, and record failures with the target URL and emulation settings.

Full-page images and device-scale captures can consume more memory and storage than viewport captures. Use the smallest viewport, scale, and capture area that meet the review goal. A fixed configuration improves comparability, but news content itself changes; do not interpret a changing headline or ad as an emulation failure without checking the page.

There is no universal per-capture cost for local Playwright: it depends on the machine and how the browser is run. If you need a hosted screenshot request instead of managing a browser installation, ScreenshotNeo provides a website screenshot API and MCP server. Its documented feature set includes full-page capture, custom viewport and device options, locale-related controls such as timezone, and other capture settings. See the ScreenshotNeo API documentation for current request parameters.

Or skip the browser setup

ScreenshotNeo takes a screenshot from one API request. For example, this cURL command saves a WebP capture of the news page; use the intended edition URL if the site requires one:

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

Equivalent Python:

import requests

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

Equivalent Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/news',
});
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);

Use the API parameters in the documentation to configure the capture for your workflow. ScreenshotNeo accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents the take_screenshot, get_page_info, and capture_pdf tools. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

FAQ

Does setting `locale` translate the page?

No. It emulates the browser’s locale preference. The website decides whether and how to use it.

Should I use geolocation for every regional-language capture?

No. Use it only when the site’s edition selection depends on the browser’s location permission.

Which screenshot mode should I use for a whole news article?

Use an element screenshot when the article container is identifiable; use full-page capture when you need the page context and content below the fold.

Can I tell from the screenshot alone whether the correct edition loaded?

Not reliably. Check an edition label, expected headline, URL, and rendered script against the intended edition.