Playwright Screenshot में Hindi Text कट रहा है: समाधान

When Hindi text is cut off in a Playwright screenshot, first find out whether it is already clipped in the rendered page or only outside the screenshot’s capture bounds. Wait for the page’s fonts to finish loading, confirm the intended Devanagari font is available, inspect the target and its ancestors for tight line-height or overflow rules, then review the screenshot’s clip and fullPage options. Waiting for fonts helps with late rendering; it does not fix CSS that clips glyphs.

1. Capture after fonts are ready

Playwright can take a screenshot before a web font has finished loading. Await the browser’s font set before capture:

import { chromium } from 'playwright';

const url = 'https://example.com';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });

try {
  await page.goto(url, { waitUntil: 'load' });
  await page.evaluate(() => document.fonts.ready);
  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

document.fonts.ready resolves when the document has completed font loading and layout operations and no further font loads are needed, according to MDN’s FontFaceSet.ready reference. That does not guarantee that your intended font declaration is correct or that a remote font request succeeded. Inspect the computed font family and font network requests as well.

Check which font the browser uses

const fontInfo = await page.locator('.hindi-copy').evaluate((element) => {
  const style = getComputedStyle(element);
  return {
    fontFamily: style.fontFamily,
    fontSize: style.fontSize,
    lineHeight: style.lineHeight,
    elementHeight: element.getBoundingClientRect().height,
    fontsStatus: document.fonts.status,
  };
});
console.log(fontInfo);

Replace .hindi-copy with the selector for the text. In DevTools, inspect the element’s rendered font and check whether the font file request succeeded. A font-family declaration is only a preference list; the browser may use a fallback if the intended face is unavailable.

2. Check vertical clipping in CSS

Devanagari glyphs can extend beyond the space a tightly constrained line or box provides. Inspect computed line-height, element height, padding, and the styles of ancestor elements. Fixed heights and overflow: hidden or overflow: clip are common constraints to investigate. CSS line-height determines the line box height in horizontal writing modes; the exact correction depends on the page’s font and layout.

const boxInfo = await page.locator('.hindi-copy').evaluate((element) => {
  const rows = [];
  for (let node = element; node instanceof HTMLElement; node = node.parentElement) {
    const style = getComputedStyle(node);
    const rect = node.getBoundingClientRect();
    rows.push({
      tag: node.tagName,
      className: node.className,
      height: rect.height,
      lineHeight: style.lineHeight,
      overflowX: style.overflowX,
      overflowY: style.overflowY,
      whiteSpace: style.whiteSpace,
    });
  }
  return rows;
});
console.table(boxInfo);

As a diagnostic, temporarily remove fixed heights and clipping on the target and its ancestors, or provide more vertical space. If the full glyphs then appear, restore constraints one at a time and adjust the specific rule responsible. Avoid copying a numeric line-height without checking the actual font, size, and design.

3. Check horizontal truncation and wrapping

If the right side of a line disappears, inspect the combination of narrow width, white-space: nowrap, and overflow. text-overflow controls how clipped inline overflow is signaled, but does not cause overflow by itself; other conditions must create and clip the overflow. See MDN’s text-overflow reference.

const layout = await page.locator('.hindi-copy').evaluate((element) => {
  const s = getComputedStyle(element);
  const r = element.getBoundingClientRect();
  return {
    width: r.width,
    scrollWidth: element.scrollWidth,
    height: r.height,
    scrollHeight: element.scrollHeight,
    whiteSpace: s.whiteSpace,
    overflowX: s.overflowX,
    overflowY: s.overflowY,
    textOverflow: s.textOverflow,
  };
});
console.log(layout);

When wrapping is intended, test with normal whitespace and visible overflow. If a one-line layout is intentional, ensure its width and truncation behavior are also intentional. Check ancestors too: an element can have visible overflow while a parent clips it.

4. Inspect the screenshot bounds

Playwright’s screenshot clip option captures a specified rectangle. A rectangle that is too small can cut off glyph pixels even when the page itself looks correct. Remove the clip temporarily or enlarge its coordinates and dimensions. If the goal is the whole scrollable document, set fullPage: true; it defaults to false. See the Playwright screenshot documentation.

// Whole scrollable page
await page.screenshot({ path: 'full-page.png', fullPage: true });

// A deliberate rectangle; measure it so it contains the complete target
await page.screenshot({
  path: 'target.png',
  clip: { x: 80, y: 120, width: 720, height: 240 },
});

scale: 'css' produces one output pixel per CSS pixel; scale: 'device' uses device pixels. This changes output image dimensions, not the page’s CSS layout, so changing scale alone will not fix a clipped line box.

5. Use a repeatable debugging sequence

Reproduce with the same route, content, browser project, viewport, and screenshot options as the failing capture.
Look at the page before capture. If the text is already clipped on screen, investigate fonts and CSS first.
Await document.fonts.ready; then confirm the intended Devanagari font is actually loaded and used.
Inspect the target and ancestor computed styles, bounding rectangles, line-height, dimensions, and overflow.
Temporarily remove clipping rules and restore them one at a time to isolate the cause.
Remove or enlarge clip. Use fullPage: true only when the desired output is the full scrollable page.
For visual regression comparisons, keep the host operating system, browser version, settings, and headless mode consistent. Playwright notes that rendering may vary across these conditions; use the same environment for baselines and current screenshots. See Playwright’s visual comparisons guidance.

6. Troubleshooting

Symptom	Likely cause to check	What to do
Text looks wrong only in the screenshot	Font or layout was not ready when captured	Await `document.fonts.ready`; inspect computed font and font requests.
Glyph tops or bottoms are cut on screen too	Tight line-height, fixed height, padding, or ancestor clipping	Inspect the target and ancestors; temporarily relax dimensions and overflow, then correct the constraining rule.
End of a line is missing	Narrow box combined with no wrapping and clipped overflow	Check width, `white-space`, `overflow`, and `text-overflow`; allow wrapping or provide intended space.
Only the captured region is cut	`clip` rectangle excludes part of the target	Remove `clip` to compare or enlarge the rectangle using the page coordinates.
Lower content is absent	Viewport screenshot used where full document was expected	Use `fullPage: true` when the whole scrollable page is the intended capture.
Image dimensions differ from expectation	`scale` or device scale factor differs	Choose CSS-pixel or device-pixel output deliberately; this does not alter CSS clipping.
Screenshot baselines vary across machines	Different OS, browser, settings, or headless environment	Capture and compare in a consistent environment.

7. Performance, reliability, and cost

Waiting for font readiness adds only the time needed for the current document’s font loading and associated layout to settle, but a page with slow or stalled font requests can delay capture. Diagnose the request itself rather than adding an arbitrary long sleep. A fixed delay may waste time and still fail under variable network conditions. Use a selector wait or an application-specific readiness condition as needed, while recognizing that it does not replace checking font status.

For reliable screenshot comparisons, pin the browser and run captures in a consistent environment. Keep viewport, device scale, content, and capture bounds stable. Full-page captures may create larger images and take longer than viewport captures; select the smallest region that meets the use case. The research dossier provides no measured timing or cost figures for this issue.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return an image or PDF without setting up Playwright in your project:

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}`);
await Bun.write('shot.webp', res);

See the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. This is a different capture route, so if the Hindi text itself is clipped by the page’s CSS, fix the page styling there too.

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

9. FAQ

Does Playwright have a Hindi text clipping bug?

The title alone does not establish a Playwright defect. First distinguish page CSS clipping, font loading, and screenshot bounds using the checks above.

Will `fullPage: true` fix clipped glyphs?

Only if the missing pixels fall outside the captured viewport area. It will not undo clipping caused by the page’s CSS.

Does waiting for fonts guarantee the correct Hindi font?

No. It waits for font loading and layout to settle, but you still need to verify that the intended face loaded and is used.

Does a larger screenshot scale fix the cut text?

No. Scale changes output pixel dimensions. Fix the CSS or capture rectangle responsible for the clipping.