How to Take a Full-Page Screenshot of a Long Hindi Webpage with Playwright

Use Playwright’s full-page screenshot option: fullPage: true in JavaScript or full_page=True in Python. Set the viewport before navigation if the page’s responsive layout matters, wait for the content you need—including lazy-loaded sections and images—and inspect the result for missing Hindi glyphs or unexpected font fallback.

Playwright defines a full-page screenshot as an image of the full scrollable page, as if it fit on a very tall screen. The option defaults to false, so set it explicitly. See the Playwright screenshot guide and Page screenshot API.

1. Capture the full page with Playwright JavaScript

Install Playwright and its Chromium browser, then save this as capture.js. Replace the example URL with the Hindi page you want to capture.

npm init -y
npm install playwright
npx playwright install chromium

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const page = await browser.newPage({
      viewport: { width: 1440, height: 900 },
      deviceScaleFactor: 1,
    });

    await page.goto('https://example.com/hindi-page', {
      waitUntil: 'networkidle',
      timeout: 60_000,
    });

    await page.screenshot({
      path: 'hindi-page.png',
      fullPage: true,
      scale: 'css',
    });
  } finally {
    await browser.close();
  }
})();

Run it with node capture.js. The try/finally ensures Chromium closes even if navigation or capture fails. If a site maintains background network requests and never reaches network idle, use waitUntil: 'domcontentloaded' and wait explicitly for the content you need instead.

2. Capture the full page with Playwright Python

Install the Python package and Chromium, then run this script. Python uses the snake_case option full_page.

python -m pip install playwright
python -m playwright install chromium

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    try:
        page = browser.new_page(
            viewport={"width": 1440, "height": 900},
            device_scale_factor=1,
        )
        page.goto(
            "https://example.com/hindi-page",
            wait_until="networkidle",
            timeout=60_000,
        )
        page.screenshot(
            path="hindi-page.png",
            full_page=True,
            scale="css",
        )
    finally:
        browser.close()

3. Make long pages and Hindi text render reliably

Set viewport dimensions when creating the page or browser context, before goto. Responsive sites may select a layout during initial load, and changing the viewport after load can produce a different or unexpected page state. If screen dimensions also matter, configure the browser context’s viewport and screen settings together as described in the browser context API.

Wait for lazy-loaded content

fullPage: true controls how much of the document Playwright captures; it does not guarantee that application data or images loaded only during scrolling are ready. For pages that load sections on scroll, scroll through the document first, wait for the target content, and then capture. A simple helper for pages whose height grows as you scroll is:

async function scrollToLoad(page) {
  await page.evaluate(async () => {
    await new Promise((resolve) => {
      let previousHeight = 0;
      const step = Math.max(400, window.innerHeight);
      const timer = setInterval(() => {
        window.scrollBy(0, step);
        const height = document.documentElement.scrollHeight;
        if (height === previousHeight) {
          clearInterval(timer);
          resolve();
        }
        previousHeight = height;
      }, 250);
    });
  });
}

await scrollToLoad(page);
await page.waitForTimeout(500);
await page.screenshot({ path: 'hindi-page.png', fullPage: true });

This is a practical starting point, not a universal readiness detector. Some sites load content after a longer delay, only when a particular section enters view, or from an explicit “load more” control. Prefer waiting for a known selector when available, for example await page.locator('.article-end').waitFor().

Check Hindi glyph coverage in the output

Playwright captures the browser’s rendered page. Inspect the image for missing glyphs, tofu boxes, or an unexpected font fallback, especially when running in a new container or host. This is a practical rendering check; Playwright’s documentation does not define a Hindi-specific font setting or checklist. If the text is broken, check whether the page’s font request loaded and whether the capture environment has the fonts the page expects.

Select output scale deliberately

scale: 'css' produces one output pixel per CSS pixel and is a good default for compact captures.
scale: 'device' uses device pixels. With a high device scale factor, the image may be substantially larger and contain more pixel detail.

For large full-page captures, CSS scale can keep output dimensions and file size more manageable. Choose device scale when extra pixel detail matters, and check the resulting image dimensions and memory use.

4. Choose full-page or element capture

Use fullPage: true when the deliverable should include the document’s full scrollable height. For a single article section or component, capture its locator instead; this avoids creating an extremely tall image.

await page.locator('article').screenshot({ path: 'article.png' });

For repeatable visual comparisons, keep the browser and host environment consistent. Rendering can vary with the host operating system, browser version, browser settings, hardware, power source, and headless mode. See Playwright’s visual comparison guidance.

5. Troubleshoot common capture problems

Symptom	Likely cause	What to do
Only the viewport appears	The full-page option was omitted or misspelled.	Set `fullPage: true` in JavaScript or `full_page=True` in Python.
The bottom sections or images are blank	Content is lazy-loaded or appears after scrolling.	Scroll to trigger loading, wait for a known selector or image state, then take the screenshot.
Navigation times out at network idle	The page keeps polling or streaming requests.	Use `domcontentloaded` or another suitable navigation wait condition, then explicitly wait for the required page element.
Hindi characters appear as boxes or are missing	The page’s font did not load, or the environment renders with a fallback lacking the required glyphs.	Inspect the font request and output image; use a stable environment with the expected fonts available.
The image is unexpectedly huge	The page is very tall, or device scale multiplies output pixels.	Use `scale: 'css'`, capture only the relevant element, or reduce the viewport/device scale when the layout permits.
The capture differs between runs	Dynamic page content or environment-dependent rendering changed.	Stabilize browser, host, viewport, and page state; wait for content that changes asynchronously.

6. cURL: capture the same page through an API

Playwright is useful when you need browser automation or control over page interactions. If you only need an image from a URL, a screenshot API avoids installing and managing a browser. ScreenshotNeo accepts a URL in a single GET request. The following cURL command saves a WebP capture; see the ScreenshotNeo API docs for options.

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

7. Python: request a screenshot by URL

import requests

response = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com/hindi-page",
    },
    timeout=90,
)
response.raise_for_status()
with open("hindi-page.webp", "wb") as image_file:
    image_file.write(response.content)

8. Node.js: request a screenshot by URL

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/hindi-page',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(({ writeFile }) =>
  writeFile('hindi-page.webp', image)
);

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a screenshot or PDF, without installing a local browser. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; responses identify page verdict and billing status in headers. AI agents can take screenshots through its MCP server. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

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

See the ScreenshotNeo documentation and sign up for 1,000 free screenshots a month with no card.

Performance, reliability, and cost

Local Playwright: You manage browser installation and execution. Full-page captures of very tall documents can produce large images and require more memory. Use CSS scale or an element screenshot when the full document is unnecessary.
Repeatability: Keep browser version, host, viewport, and page state stable for visual comparisons. Wait for dynamic content and inspect the output rather than assuming the page is complete.
API costs: ScreenshotNeo’s free plan includes 1,000 shots per month; paid options are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Check the current plan details on ScreenshotNeo.

FAQ

Does `fullPage` work for a page containing Hindi?

Yes. It captures the browser-rendered page. Check the output for glyph or font fallback issues in your specific environment.

Will `fullPage: true` load every image and section?

No. It requests a capture of the full scrollable document. Trigger and wait for content that the website loads on scroll or asynchronously.

Should I use Chromium, Firefox, or WebKit?

Use the browser engine that matches the rendering you need to capture. Keep it fixed across runs when comparing screenshots.

Can I take a screenshot of only the Hindi article?

Yes. Capture the article locator or element instead of the full page when the rest of the document is not needed.