Fix Java Playwright Screenshots of Indian Websites Where Devanagari Text Is Clipped

When Devanagari text is clipped in a Java Playwright screenshot, first find out whether the clipping is already visible in the browser or appears only in the saved image. If it appears only in the image, check the screenshot crop, full-page setting, or element bounds. If it is visible in the browser too, inspect the page’s font state and layout CSS. If it changes between local and CI runs, compare the browser and host environments. The title alone does not establish which cause applies to a particular site.

Playwright Java asks a browser to capture a page; Java itself does not render the Devanagari glyphs. The relevant layers are the browser rendering environment, the page’s font and CSS state, and the screenshot options. The diagnostic sequence below isolates them before you change the site or test.

1. Locate where the clipping happens

Open the same URL in the same browser build and viewport used for the screenshot.
Inspect the affected text on the page before taking a screenshot. Check whether its top, bottom, or side is cut off.
Compare the browser view with the saved image. If only the image is clipped, start with screenshot boundaries. If both are clipped, investigate the DOM, font, and CSS.
Record the URL, browser engine and version, operating system or container, headless mode, viewport, device scale factor, and whether the capture targets the page or an element.

This separation matters: changing a crop cannot repair text that the page itself has clipped, and changing CSS is unnecessary if the screenshot clip alone excludes part of the text.

2. Start with a minimal Java capture

The following example launches Chromium, opens a page, waits for the page’s fonts to settle, and writes a full-page PNG. Replace the URL with the affected page. It assumes the project already has the Playwright Java dependency configured; see the official Java installation guide for project setup.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import java.nio.file.Paths;

public class CapturePage {
  public static void main(String[] args) {
    String url = args.length > 0 ? args[0] : "https://example.com";
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.chromium().launch(
          new BrowserType.LaunchOptions().setHeadless(true));
      Page page = browser.newPage(new Browser.NewPageOptions()
          .setViewportSize(1440, 1000));
      page.navigate(url);
      page.evaluate("() => document.fonts.ready");
      page.screenshot(new Page.ScreenshotOptions()
          .setPath(Paths.get("screenshot.png"))
          .setFullPage(true));
      browser.close();
    }
  }
}

For a basic viewport screenshot, omit .setFullPage(true). Playwright Java’s screenshot API also supports saving a page or an element; see the screenshots guide and Page API.

Check a clip rectangle

If you use a clip, its coordinates and dimensions define the captured region. Make sure it covers the entire affected text. For example, this captures a 900 by 600 CSS-pixel region starting at the viewport origin:

page.screenshot(new Page.ScreenshotOptions()
    .setPath(Paths.get("clipped-region.png"))
    .setClip(0, 0, 900, 600));

Adjust those numbers to the intended capture area. A clip is a viewport-relative rectangle, so a correct page layout can still be cut by an undersized or misplaced capture rectangle.

Capture an element

An element screenshot is limited to the target element’s box. If the text extends beyond that box, or the element’s own layout clips it, inspect both the box and its CSS:

import com.microsoft.playwright.Locator;

Locator target = page.locator(".article-title");
target.screenshot(new Locator.ScreenshotOptions()
    .setPath(Paths.get("element.png")));

Replace .article-title with a selector present on the page. Element capture is useful for isolating a component, but it does not automatically correct a too-short element or overflowing line box.

3. Check whether the expected text and font are present

Before adjusting CSS, verify that the expected string is in the DOM, identify the computed font family, and check whether the browser considers that font ready for the sample text. The following browser-side diagnostic returns useful evidence from the target element. Replace the selector and sample string with the affected element and actual Devanagari text.

String selector = ".article-title";
String sample = "नमस्ते";
Object diagnostics = page.evaluate("([selector, sample]) => {"
    + "const el = document.querySelector(selector);"
    + "if (!el) return {found: false};"
    + "const style = getComputedStyle(el);"
    + "const rect = el.getBoundingClientRect();"
    + "return {"
    + "found: true, text: el.textContent, fontFamily: style.fontFamily,"
    + "fontSize: style.fontSize, lineHeight: style.lineHeight,"
    + "overflow: style.overflow, overflowY: style.overflowY,"
    + "height: style.height, maxHeight: style.maxHeight,"
    + "bounds: {x: rect.x, y: rect.y, width: rect.width, height: rect.height},"
    + "fontsReady: document.fonts.status,"
    + "fontCheck: document.fonts.check(style.font, sample)"
    + "};"
    + "}", new Object[] {selector, sample});
System.out.println(diagnostics);

The fontCheck result is a diagnostic, not proof that a particular font file has the desired glyph design. Confirm that the intended font loaded, that it covers the text, and that the rendered result looks correct. A fallback font can render text differently even when the text is present.

If the page loads fonts after navigation, waiting for document.fonts.ready can help ensure font loading has settled before capture. If the site continues to update content asynchronously, wait for a stable page-specific signal as well; font readiness does not mean every application request or animation has finished.

4. Inspect page CSS when the browser view is clipped

If the browser itself shows clipped glyphs, inspect the affected element and its ancestors for layout constraints. These are diagnostic possibilities, not confirmed causes for every Devanagari clipping issue:

height or max-height that is too small for the rendered line.
overflow: hidden or overflow: clip on the text element or a containing block.
A tight line-height, especially with a font whose glyph metrics need more vertical space.
Transforms, clipping paths, or positioned containers that cut into the visible glyph area.
A font fallback or font file without the required Devanagari coverage.

Compare the computed element bounds with the visible text. Temporarily disabling a suspected height or overflow rule in browser developer tools can help identify whether it is responsible. If the font did not load, fix its delivery or configure an appropriate font with Devanagari coverage. If the font loaded but its glyphs are cut off, correct the relevant line box or container constraints.

5. Compare local and CI browser environments

Playwright documents that screenshot output can vary with the host environment, browser version, fonts, settings, hardware, and headless mode. Use the same browser build and execution environment as the screenshot baseline before diagnosing a visual difference as a page regression. See Playwright’s visual comparison guidance.

Compare	Record or align	Why it matters
Browser	Engine and exact browser version	Rendering can change between browser builds.
Host	Operating system or pinned container image	System font availability and rendering conditions may differ.
Launch mode	Headless or headed	Playwright’s default browser launch is headless, and rendering can vary with mode.
Viewport	Viewport width and height	Line wrapping and element dimensions depend on available space.
Scale	Device scale factor and screenshot scale option	Pixel dimensions and rasterization can differ.
Page state	Font readiness, content readiness, animation state	A capture made before the page settles may not match a later capture.

A repeatable container can reduce platform differences, but it cannot fix incorrect page CSS or guarantee that a Devanagari font is installed. Playwright documents Linux browser dependency installation and CI setup separately. For Linux browser dependencies, its Java guide gives this command:

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install-deps chromium"

This installs browser system dependencies; do not treat it as proof that a specific Devanagari font is present. See the browser installation guide and CI guide. Pin a repeatable CI image and verify the needed font separately.

6. Troubleshoot common symptoms

Symptom	Likely area to inspect	Next action
Text is fine in browser, clipped only in PNG	Screenshot clip, viewport screenshot, or element bounds	Remove or enlarge the clip; try full-page capture; inspect the element screenshot box.
Text is clipped in browser and screenshot	Page CSS or font rendering	Check computed font, text content, line-height, height, max-height, and overflow on the element and ancestors.
Local works, Linux CI clips or changes glyphs	Different browser build, host fonts, or runtime settings	Align the container and browser version; verify the required font in that runtime.
Some Devanagari characters are missing or replaced	Font coverage or failed font request	Inspect font loading and coverage; correct font delivery or choose a font that supports the text.
Capture changes between runs	Page not settled, changing content, or different environment	Wait for the relevant content and fonts, stabilize the page state, and capture with a pinned environment.
Full-page screenshot is unexpectedly short	Page dimensions or content that appears only after interaction/scroll	Check document height and lazy-loaded content; wait for the page’s own loading behavior before capturing.
Screenshot has unexpected pixel dimensions	Viewport and screenshot scale	Check the configured viewport and screenshot scale option; compare CSS pixels with output pixels.

For every symptom, first reproduce with the same URL and runtime. The dossier sources do not establish a universal Devanagari-specific defect or a single font fix; the actual page and environment determine the cause.

7. Capture options and practical tradeoffs

Playwright Java’s page screenshot options include full-page capture, a clip rectangle, and scale controls. Choose the narrowest option that matches what you need to compare:

Viewport capture: captures the current visible page area. Use it when the test concerns what a visitor sees at a fixed viewport.
Full-page capture: captures the full scrollable page. It changes the capture dimensions; it does not repair clipped CSS or missing fonts.
Element capture: isolates one component. The component’s own dimensions and overflow still matter.
Clip: gives explicit capture bounds. Confirm the rectangle encloses the complete text.
Scale: controls screenshot pixel scaling. Keep it consistent across baseline and comparison runs; changing scale is not a font fix.

Use the official Java Page API reference for the current option names and details. A changed viewport, full-page mode, clip, or scale can change the output even if the page itself is unchanged.

8. Reliability, performance, and cost

For stable screenshot checks, pin the browser and CI image, use a fixed viewport and scale, wait for the font and relevant page state, and keep the capture target consistent. This reduces avoidable differences but cannot ensure a site’s remote content, font server, or application state remains unchanged.

Full-page captures can produce larger images and take longer than viewport captures because more content is involved. Element captures can reduce the amount of output when only one component matters. Avoid arbitrary long sleeps as the only readiness strategy: wait for a meaningful page or font condition where possible, then use a bounded timeout so a stalled page fails visibly.

Playwright is browser automation run in your own environment, so its direct cost depends on your browser and CI infrastructure. This dossier provides no benchmark or universal runtime estimate. Track capture duration and output size in your own CI if they matter to your pipeline.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. It includes 1,000 screenshots a month free with no card, and paid plans start at $5 for 3,000. 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,
)
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}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.

FAQ

Does Java Playwright itself need a Devanagari rendering library?

The screenshot comes from the browser engine. Check the browser’s font availability and the page’s font and CSS state rather than assuming the Java client renders the text.

Will full-page capture fix Devanagari clipped by CSS?

No. It changes the captured page extent; it does not remove an element’s height or overflow constraint.

Does installing Chromium dependencies install an Indian script font?

The documented Linux dependency command installs browser system dependencies. Verify the specific font and its Devanagari coverage separately.

Can a screenshot difference alone prove the page regressed?

No. First align browser version, host, fonts, headless mode, viewport, scale, and page state, then compare the result.