How to Capture Hindi Webpages as Full-Page Screenshots with Playwright
Use Playwright’s fullPage option to capture a Hindi webpage from top to bottom. Learn how to check Devanagari rendering, handle long or lazy-loaded pages, and save consistent screenshots.
To capture a Hindi webpage from top to bottom with Playwright, navigate to it and call page.screenshot({ path: 'hindi-page.png', fullPage: true }). The fullPage option captures the full scrollable page instead of only the current viewport. It does not guarantee that Hindi glyphs or fonts render correctly: inspect the saved image in the browser environment you plan to use.
This guide uses Playwright’s JavaScript library. The examples use a placeholder URL; replace it with the Hindi page you want to capture. See the official Playwright screenshot guide and Page API for version-specific details.
1. Install Playwright and a browser
In a new Node.js project, install Playwright and its Chromium browser:
npm init -y
npm install playwright
npx playwright install chromiumSave the following as capture-hindi.js. It opens the target URL, waits for navigation to reach the load event, and writes a full-page PNG. The finally block closes the browser even if navigation or capture fails.
const { chromium } = require('playwright');
(async () => {
const url = 'https://example.com/hindi-page';
const browser = await chromium.launch();
try {
const page = await browser.newPage({ viewport: { width: 1365, height: 900 } });
await page.goto(url, { waitUntil: 'load', timeout: 60_000 });
await page.screenshot({ path: 'hindi-page.png', fullPage: true });
console.log('Saved hindi-page.png');
} finally {
await browser.close();
}
})();Run it with node capture-hindi.js. The viewport sets the page’s layout width, which can affect line wrapping and therefore the final image’s height.
2. Check Hindi glyphs and page readiness
Playwright captures what the selected browser renders. A screenshot can contain missing-glyph boxes, fallback typography, clipped text, or content that appears after capture. Playwright’s visual comparison guidance notes that screenshots can vary across browsers and platforms, including because of fonts; when comparing screenshots, use the same browser and host conditions as the baseline. See Playwright visual comparisons.
There is no Hindi-specific font setup established by the cited Playwright documentation. If Devanagari looks wrong, inspect the screenshot and the page in the same browser environment; check whether the page’s intended fonts loaded and whether the environment has suitable font support. Do not assume that fullPage: true changes font availability.
The example waits for the browser’s load event, but some pages continue updating afterward. If a known heading or content container indicates readiness, wait for it explicitly:
await page.goto(url, { waitUntil: 'load', timeout: 60_000 });
await page.locator('main').waitFor({ state: 'visible', timeout: 15_000 });
await page.screenshot({ path: 'hindi-page.png', fullPage: true });Replace main with a selector that exists on the target page. For a page with a known delayed update, a short explicit pause can help, but it is less reliable than waiting for a meaningful page element:
await page.waitForTimeout(1_000); // Use only when the page needs a known delay.3. Choose output dimensions and format
By default, PNG is a straightforward choice for preserving text edges. The Page screenshot API also supports JPEG and WebP, along with options such as quality for lossy formats. Choose the output based on how you will use the image.
| Option | Use it when | Consider |
|---|---|---|
fullPage: true |
You need the full scrollable page in one image. | Very long pages can produce large images. |
scale: 'css' |
You want one image pixel per CSS pixel. | Usually produces a smaller image than device-pixel capture. |
scale: 'device' |
You want output at device-pixel resolution. | High-DPI output can be twice as large or larger. |
deviceScaleFactor |
You need to configure the emulated device’s pixel ratio. | This is a browser-context setting and defaults to 1. |
For example, capture at CSS-pixel scale:
await page.screenshot({
path: 'hindi-page.png',
fullPage: true,
scale: 'css'
});Or set a device scale factor in the browser context and capture at device scale:
const context = await browser.newContext({
viewport: { width: 1365, height: 900 },
deviceScaleFactor: 2
});
const page = await context.newPage();
await page.goto(url, { waitUntil: 'load' });
await page.screenshot({ path: 'hindi-page.png', fullPage: true, scale: 'device' });Use one approach deliberately: the context controls device emulation, while the screenshot’s scale controls screenshot pixel scaling. See the screenshot API and browser context options.
4. Handle lazy-loaded and infinite-scroll content
fullPage: true requests a screenshot of the full scrollable page. It does not establish that every site’s lazy-loaded images or content appended during scrolling will load automatically. Inspect the result for blank image areas, missing sections, and an unexpected cutoff.
If the target loads content only as it approaches the viewport, scroll through the page before taking the screenshot. This example advances by viewport heights until it reaches the bottom, then returns to the top for capture:
await page.goto(url, { waitUntil: 'load', timeout: 60_000 });
await page.evaluate(async () => {
const step = window.innerHeight;
while (window.scrollY + window.innerHeight < document.documentElement.scrollHeight) {
window.scrollBy(0, step);
await new Promise(resolve => setTimeout(resolve, 250));
}
window.scrollTo(0, 0);
});
await page.screenshot({ path: 'hindi-page.png', fullPage: true });This is a generic preparation pattern, not a guarantee for every site. Some pages append content after a longer delay, require a particular interaction, or keep loading indefinitely. Adapt the stopping condition to the page and verify that the captured image contains the expected final section.
5. Common problems and fixes
| Symptom | Likely cause | What to try |
|---|---|---|
| Only the visible screen appears. | The screenshot call omitted the full-page option. | Set fullPage: true. |
| Hindi characters appear as boxes or unexpected symbols. | The browser or host rendered the page with missing or different fonts. | Inspect the page in the same environment, check font loading and availability, and compare the saved image with the browser view. Playwright does not guarantee Hindi-specific font setup. |
| The bottom section or images are missing. | Content may load on scroll or after the initial page load. | Scroll through the page or wait for a page-specific readiness selector before capture, then inspect the output. |
| Navigation times out. | The site is slow, unavailable, or keeps network activity open. | Use an appropriate timeout and a readiness condition suited to the page. Do not treat a timeout as proof that the screenshot is complete. |
| Text wraps differently from another screenshot. | Viewport size, browser, operating system, fonts, or other host conditions differ. | Match the baseline’s environment and viewport before comparing images. |
| The output file is unexpectedly large. | The page is tall, or device-pixel scaling increased the image dimensions. | Try scale: 'css' and choose JPEG or WebP if lossy output is acceptable. |
6. Reliability, performance, and cost
- Consistency: Keep browser, operating system, fonts, viewport, and device scale consistent for visual baselines. The Playwright documentation identifies browser and platform rendering differences, including font differences, as sources of screenshot variation.
- Capture time: Page navigation, site-side rendering, and any scroll preparation determine how long a capture takes. Long pages and pages that load content progressively may need more time and checks.
- Image size: Full-page captures can become tall and large. CSS-pixel scaling can reduce pixel dimensions compared with device-pixel output; lossy formats can reduce file size if appropriate for the use case.
- Cost: Running Playwright yourself has no per-screenshot API charge from Playwright, but your machine or hosted browser environment still consumes compute, storage, and bandwidth. The cited sources provide no benchmark or cost estimate.
- Repeatability: Save screenshots from a consistent environment and inspect them when fonts or page content matter. A successful screenshot call alone does not verify visual correctness.
7. Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Its capture flow accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
For Hindi pages, inspect the returned image just as you would a Playwright capture. The API avoids browser installation and request plumbing; it does not remove the need to verify that the page rendered as intended.
See the ScreenshotNeo API documentation. Example using cURL:
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.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={
"access_key": "YOUR_API_KEY",
"url": "https://example.com/hindi-page",
},
timeout=90,
)
r.raise_for_status()
with open("hindi-page.webp", "wb") as image:
image.write(r.content)Node.js:
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());
require('node:fs').writeFileSync('hindi-page.webp', image);Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Create a free ScreenshotNeo account.
8. FAQ
Does Playwright translate Hindi text before taking a screenshot?
No. It captures the page as rendered by the browser; it does not translate the page.
Can I capture just one Hindi article section?
Yes. Use a locator’s screenshot method for an element rather than the page’s full-page screenshot; see the Playwright screenshot guide.
Which browser should I use for Hindi?
The supplied sources do not establish a Hindi-specific browser ranking. Use the browser and environment your audience or visual baseline requires, then inspect the result.
