How to Capture Full-Page Screenshots of a Hindi Website with Loki

Short answer: Loki is a Storybook visual-regression tool for capturing and comparing component stories; the available Loki documentation does not show a way to capture an arbitrary public website URL. To capture a live Hindi website, use browser automation such as Puppeteer with fullPage: true. Treat that as a separate workflow, not a Loki feature.

1. What Loki can and cannot do here

The screenshot-specific Loki material describes screenshots of Storybook stories and image-diff visual regression. It does not demonstrate entering a public URL and taking a full-page screenshot. Grafana Loki is a different project: a log aggregation system, not a screenshot tool.

Use Loki when your target is a component rendered in your Storybook setup and you want repeatable screenshot comparisons. For a one-off capture of an arbitrary live page, use browser automation or a screenshot service. The Browserless guide demonstrates navigating with Puppeteer and calling page.screenshot({ path: 'fullpage.png', fullPage: true }) for the latter workflow. Browserless deployment guide.

2. Capture a live Hindi website with Puppeteer

This runnable example opens a URL, waits for the page load event, and writes a full-page PNG. It uses Puppeteer directly; it does not use Loki. Replace the example URL with the page you can access.

npm init -y
npm install puppeteer

// capture.mjs
import puppeteer from 'puppeteer';

const url = process.argv[2] ?? 'https://example.com';
const browser = await puppeteer.launch({ headless: true });

try {
  const page = await browser.newPage({
    viewport: { width: 1365, height: 900 },
    deviceScaleFactor: 1,
  });

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

  await page.screenshot({
    path: 'fullpage.png',
    fullPage: true,
    type: 'png',
  });
} finally {
  await browser.close();
}

Run it with node capture.mjs https://example.com. The output is fullpage.png in the current directory.

Wait for content that appears after page load

A load event does not guarantee that a site’s client-side content, web fonts, or lazy-loaded images have finished rendering. If the site exposes a stable element that indicates the main content is ready, wait for it before capturing:

await page.goto(url, { waitUntil: 'load', timeout: 60_000 });
await page.locator('main').wait();
await page.evaluate(() => document.fonts.ready);

await page.screenshot({ path: 'fullpage.png', fullPage: true });

Change main to a selector that exists on the target page. A font-ready wait is a practical rendering check; the cited material does not establish Hindi-specific font behavior. If the page uses lazy-loaded images, scroll through the document before capture and allow content to settle. This can trigger loading, but very long pages may take longer and consume more memory.

Choose the capture settings deliberately

fullPage: true asks Puppeteer to capture the full document rather than only the current viewport.
path sets the output filename. Use a different extension and screenshot type only when the selected format is supported by your Puppeteer version.
viewport sets the layout width and initial viewport height. The width can change responsive layout and line wrapping, including the shape and placement of Hindi text.
deviceScaleFactor controls pixel density. A larger value produces more pixels and a larger image, with increased memory and processing cost.
timeout bounds navigation waiting time. Increase it only when the target is known to load slowly; do not leave automation waiting indefinitely.

For pages that never become network-idle because of analytics or persistent connections, avoid treating network idle as a universal readiness signal. Wait for the content you need, then capture.

3. Check Hindi text in the captured image

Open the PNG at full resolution and inspect representative Devanagari text near the top, middle, and bottom of the page. Look for missing glyph boxes, substituted characters, clipped matras, awkward line breaks, or text that has not appeared yet. The available sources do not verify Hindi font availability or rendering behavior, so the image itself needs to be checked for the target site and browser environment.

If glyphs are missing or substituted, first confirm that the live page itself renders correctly in the same browser environment. Then check whether the site’s font requests loaded and whether the capture happened after fonts and page content were ready. A screenshot cannot repair a font or content problem that was already present in the rendered page.

4. If the target is a Storybook component, use Loki for regression

For a component or story you control, Loki’s documented context is Storybook screenshot capture and pixel-diff comparison. Set up the project according to its own instructions, capture the story baseline, and compare later captures as part of the component workflow. Keep the browser, viewport, fonts, and test data consistent between runs so that visual differences are easier to interpret.

This is a repeatable regression workflow for stories, while the Puppeteer example above navigates to a live URL for a page capture. Do not pass a Hindi website URL to Loki expecting the Browserless/Puppeteer fullPage option to apply to Loki.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Make one GET request for a screenshot; see the API documentation for options and response details.

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

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Get 1,000 free screenshots a month with no card.

6. Troubleshooting

Problem	Likely cause	What to do
The image shows only the visible screen	The screenshot call omitted `fullPage: true` or a different code path made the capture.	Set `fullPage: true` on the Puppeteer screenshot call and confirm the output is from that call.
The page is blank or incomplete	Navigation failed, content loads after the load event, or the site blocks the browser.	Check navigation errors and the page URL, wait for a meaningful content selector, and inspect the page before capturing. Do not assume a browser automation example bypasses bot checks.
Hindi glyphs look wrong	The site’s font may not have loaded, or the screenshot was taken before rendering settled.	Inspect the rendered page, wait for `document.fonts.ready`, then capture again. Verify glyphs visually; no Hindi-specific guarantee is established by the cited sources.
Images are missing lower down	Images may load lazily only when they approach the viewport.	Scroll through the page before capture and wait for the needed images. Very long pages can take more time and memory.
Navigation times out	The page is slow, or the selected readiness condition never occurs.	Use a bounded, appropriate timeout and wait for a relevant selector rather than requiring an idle network on a page with ongoing requests.
Text wrapping differs from the browser you expected	Viewport width, device scale, browser, or font availability differs.	Keep the browser environment and viewport consistent, and use the intended width for the responsive layout.
You expected Loki to open a public URL	The screenshot-specific Loki evidence is about Storybook stories, not arbitrary live URLs.	Use a browser automation workflow such as the separate Puppeteer example, or a screenshot API.

7. Performance, reliability, and cost

Full-page captures of long documents require more image memory and can take longer than viewport captures. High device scale factors increase output dimensions and file size. For repeatable captures, use a fixed browser version, viewport, scale, and readiness condition; keep a copy of the source image when comparing changes. These are practical automation considerations, not Loki-specific guarantees.

A local Puppeteer workflow has no per-screenshot API charge, but you provide and maintain the browser runtime and compute environment. A hosted browser or screenshot API shifts that setup to a service and may charge according to its plan. ScreenshotNeo’s stated plans are Free: 1,000 shots/month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. Only clean shots are billed; failed loads, timeouts, blank pages, bot checks/CAPTCHAs, and cache hits cost nothing.

8. FAQ

Can Loki take a full-page screenshot of any Hindi URL?

The available screenshot-specific Loki material does not show arbitrary URL capture. It describes Storybook story screenshots and visual comparison.

Is Grafana Loki the screenshot tool?

No. Grafana Loki is a log aggregation project, separate from the Storybook visual-regression tool.

Does this workflow guarantee correct Devanagari rendering?

No. Rendering depends on the page and browser environment. Inspect the saved image for missing or incorrectly shaped glyphs.

Does Puppeteer’s `fullPage` option belong to Loki?

No. It is used in the separate Puppeteer browser-automation example for capturing a live URL.