How to Compare Hindi Website Screenshots with Reg-suit

Reg-suit compares image files; it does not capture the website for you. First render your Hindi page to a screenshot with browser automation, then place the current image in Reg-suit’s configured actualDir. Reg-suit synchronizes the expected baseline, compares the images, and produces a report for review. For meaningful Hindi comparisons, keep the browser, viewport, fonts, and page readiness consistent between captures.

This guide uses Reg-suit for the image comparison stage and Puppeteer for the separate capture stage. Reg-suit’s README documents setup and comparison options; the project’s Puppeteer demo shows the capture-then-compare pattern.

1. Understand what Reg-suit compares

Reg-suit receives current screenshot files in actualDir, obtains expected snapshots from the configured publisher, compares the images, and generates an HTML report. Capture and comparison are separate operations: Puppeteer, another browser automation tool, or a screenshot service can produce the images Reg-suit compares.

A practical workflow is:

Render the page at a fixed URL, browser build, viewport, and device scale factor.
Wait for the page’s relevant content and Hindi web fonts to settle.
Write screenshots into the configured actual-image directory.
Synchronize or select the expected baseline for the revision you intend to compare against.
Run Reg-suit and inspect its HTML report.
Update the baseline only after reviewing whether the differences are intentional.

Reg-suit’s run command covers the normal synchronization, comparison, publishing, and optional notification workflow. Use compare when iterating locally, and confirm the installed version’s CLI behavior before wiring commands into CI. Reg-suit documentation

2. Set up a reproducible Hindi screenshot capture

The example below captures one page with Puppeteer and waits for the document’s fonts to load before saving a PNG. It assumes your project has Puppeteer installed and that the target site can be reached from the environment running the script. Adapt the URL and viewport to your application. The script creates actual/, which the Reg-suit configuration below uses.

// capture.mjs
import fs from 'node:fs/promises';
import puppeteer from 'puppeteer';

const url = process.env.TARGET_URL ?? 'http://localhost:3000/hi/';
const outputDir = 'actual';

await fs.mkdir(outputDir, { recursive: true });
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: 'networkidle0', timeout: 60_000 });
  await page.evaluate(async () => {
    if (document.fonts?.ready) await document.fonts.ready;
  });

  // Replace this with an app-specific readiness check when the page has
  // asynchronous content that network idle does not represent.
  await page.screenshot({
    path: `${outputDir}/hindi-home.png`,
    fullPage: true,
  });
} finally {
  await browser.close();
}

Save as capture.mjs and run with TARGET_URL=http://localhost:3000/hi/ node capture.mjs. If you use a different browser automation library, the essential contract is the same: create stable image files in actualDir. The project’s Puppeteer example illustrates that separation.

Wait for the state you actually want to test

networkidle0 can be unsuitable for pages with persistent requests, and it does not prove that all application content is ready. Use the page’s own readiness signal where possible, such as a selector that appears after data rendering. A fixed sleep can help diagnose a timing issue, but it is less reliable than a condition tied to the desired state.

Font readiness matters because a screenshot captured during web-font loading can contain temporary fallback rendering. Chrome explains how font-display affects text while custom fonts load. Awaiting document.fonts.ready can reduce this timing mismatch, but also confirm that the intended font files loaded successfully; readiness alone does not guarantee the correct font was selected. Chrome font-display guidance

Keep Hindi typography in the test

If the test is intended to catch Hindi typography regressions, capture real Hindi content with the intended font stack. Review Devanagari glyph shapes, conjuncts, matras, line breaks, and clipping. Chromium’s testing guidance identifies font selection, fallback, text flow, and typography as cases where a general rendering-variance workaround is not appropriate. Replacing the Hindi text with a geometry-only font would undermine a test whose purpose is to verify Hindi rendering. Chromium: Writing Web Tests

For comparisons where only layout geometry matters, make that a separately scoped test. Do not use that test as evidence that the production Hindi typography is correct.

3. Configure Reg-suit and run a comparison

Install the Reg-suit CLI using the package manager and versioning policy your project follows. The project describes this basic setup: install the CLI, run reg-suit init, configure a publisher and core.actualDir, then run reg-suit. Check the project README and the package registry for current installation details and version-specific behavior; the research available for this guide does not establish the latest release.

npm install --save-dev reg-suit
npx reg-suit init

In the generated configuration, point core.actualDir at the directory produced by your capture script. A minimal conceptual configuration looks like this; preserve the publisher configuration generated for your chosen storage plugin:

{
  "core": {
    "actualDir": "actual",
    "workingDir": ".reg"
  }
}

actualDir is required. workingDir defaults to .reg. In an initialized project, retain the complete configuration and publisher settings rather than replacing the file with this illustrative core fragment.

Run capture, then compare locally while tuning or run the normal pipeline:

node capture.mjs
npx reg-suit compare
# In the configured CI or publish workflow:
npx reg-suit run

Use the report to inspect changed areas. The exact publisher, synchronization, and notification steps depend on your initialized configuration. Reg-suit documents S3 and GCS publisher plugins and notifier plugins for GitHub, GitLab, Slack, and Chatwork; choose access controls and retention to fit your environment. Reg-suit README

4. Control visual noise without hiding Hindi regressions

First stabilize the capture environment. Hold constant the browser build, operating system or container image, viewport dimensions, device scale factor, browser launch settings, font files, and page readiness condition. Browser and platform differences can change screenshot pixels; Playwright’s visual comparison documentation also calls out environment-sensitive snapshots and browser/platform-specific naming. Playwright visual comparisons

Only after captures are stable should you consider Reg-suit thresholds. Its documented controls include:

Option	What it controls	Hindi screenshot guidance
`thresholdRate`	Allowed ratio of differing pixels, from 0 to 1. The documented default is zero.	Keep low; a broad tolerance can hide small but meaningful glyph or line-wrap changes.
`thresholdPixel`	Alternative absolute differing-pixel threshold. The documented default is zero.	Choose only after examining repeatable noise in the report.
`matchingThreshold`	YUV color-distance match threshold, from 0 to 1; smaller values are more sensitive.	Do not use color tolerance as a substitute for fixing inconsistent fonts or capture timing.
`enableAntialias`	Ignore pixels detected as anti-aliased during comparison.	May help with expected edge-rendering variation, but inspect text edges and small marks carefully.
`ximgdiff`	Adds detailed difference information to the HTML report.	Useful when locating which regions changed; it does not determine whether a change is acceptable.
`concurrency`	Number of comparison processes to run in parallel; documented default is 4.	Increase only if resource capacity and pipeline time justify it.

The README’s sample configuration includes thresholdRate: 0.05; that is an example, not a Hindi-text recommendation. A larger threshold can reduce noisy failures while allowing unintended changes through. Inspect actual Hindi glyphs and wrapping in the report before accepting a tolerance. Reg-suit also documents a global --test dry-run option for scripts that should not mutate state; verify its behavior against your installed package version before relying on it. Reg-suit options

5. Review the report and manage baselines

Use the report as a review aid, not an automatic approval signal. For each change, ask:

Did the intended content change, or did a different page state load?
Did the expected Hindi font load, or did the browser capture fallback text?
Are matras, conjuncts, punctuation, and line wrapping rendered as expected?
Did a viewport, scale factor, browser build, or system font change?
Is the change consistent across repeated captures in the same environment?

Update expected snapshots only for reviewed, intentional changes. Reg-suit’s S3 publisher documentation describes fetching prior snapshots for expected images and uploading actual snapshots and comparison reports. The Puppeteer demo uses a particular S3/CircleCI example stack; treat that as an example rather than a requirement. Reg-suit README · Puppeteer demo

6. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. It can produce an image you then place in Reg-suit’s actualDir; Reg-suit still handles the baseline comparison and report.

For example, request a WebP screenshot of a page, then save the response as an image for your comparison workflow:

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

See the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

7. Troubleshooting

Symptom	Likely cause	What to do
Every run reports many differences	Browser, OS/container, viewport, scale factor, font files, or launch options changed.	Pin the capture environment and compare repeated captures from the same environment before adjusting thresholds.
Hindi text changes between captures	A web font was still loading, failed to load, or fallback selection differed.	Wait for `document.fonts.ready`, verify the intended font loaded, and keep the font files and environment consistent. Review the site’s `font-display` behavior. Chrome guidance
Text wraps differently or matras appear clipped	Different font metrics, viewport width, scale factor, or page state changed the layout.	Confirm the capture dimensions and font, then inspect the actual page and diff at the same state. Do not raise tolerance until the cause is understood.
Capture hangs or times out	The page keeps network requests open, or application content never reaches the assumed ready state.	Use a page-specific selector or readiness signal instead of relying on network idle alone; set a timeout appropriate to the page and report genuine failures.
Reg-suit says actual images are missing	The capture wrote files to a different location or did not finish before comparison.	Check the capture output path against `core.actualDir`, and make the pipeline run capture successfully before Reg-suit.
Baseline synchronization or publishing fails	Publisher configuration, credentials, permissions, or remote storage access is incorrect.	Review the selected publisher’s configuration and CI credentials; confirm the intended baseline revision and storage access.
A threshold makes the job pass but a Hindi regression is visible	The configured tolerance is too permissive for the text change.	Lower or remove the tolerance, stabilize rendering, and review the report before accepting baselines.
Local and CI results disagree	They use different browser builds, platform images, font installations, or launch settings.	Run captures in the same pinned container or otherwise align those inputs; retain environment information with the workflow.

8. Performance, reliability, and cost considerations

Capture time and comparison time are separate. Browser startup, navigation, font loading, and full-page rendering affect capture duration; Reg-suit’s documented concurrency setting controls parallel comparison processes and defaults to 4. More parallelism can consume more resources, so tune it against the capacity of your CI workers. The dossier provides no benchmark figures, so measure your own representative pages and pipeline.

Reliability improves when the same browser environment, font files, and readiness condition are used on every run. Keep baselines tied to the intended revision, preserve enough report and snapshot history for your review process, and make baseline updates deliberate. Reg-suit supports publisher and notifier plugins, but storage cost, retention, and CI cost depend on your chosen infrastructure and usage; there is no single cost figure for this workflow in the available project documentation.

Reg-suit is an image comparison stage, so its cost and operational needs do not include a browser capture service unless you choose one separately. ScreenshotNeo’s free allowance and plan prices are listed above; review its current product page for the service details supplied here. This article makes no performance comparison between capture methods.

FAQ

Can Reg-suit take a screenshot of my Hindi page?

Reg-suit compares image files. Use browser automation or a screenshot service to capture the page, then put the resulting image in the configured actual directory.

Should I use a Hindi-specific font in this guide?

Use the font stack your site intends to serve. The right choice depends on the target browser and application; this guide does not prescribe a font.

Should I turn on antialias filtering?

Only if stable captures show edge-rendering noise that you want to ignore. Check the report carefully because text edges are part of Hindi typography.

Does a passing comparison prove the page is correct?

No. It means the images are within the configured comparison criteria. Review the page and report for the behavior your test is meant to protect.