How to Test a Multilingual Indian Website with Percy

To test a multilingual Indian website with Percy, capture each supported language and regional variant in the same Percy build and branch, and give every locale, page, and state a distinct snapshot name. Percy uses snapshot names to associate images with baselines, so a Hindi checkout should compare with its own previous Hindi checkout—not with an English page.

Then review the diffs for the rendering and layout outcomes that matter to your product: glyph presence, shaping, wrapping, clipping, controls, and responsive behavior. Select locales from your own product’s locale catalogue. There is no universal language list or definitive current browser-and-device compatibility matrix in the sources cited here.

1. Choose locales, pages, and states from your product

Start with the languages and regional variants your site actually supports. Record each locale’s route or locale-switch mechanism, then choose pages where script rendering or translated text can change the experience.

High-impact pages: navigation, landing pages, registration, forms, checkout, and content-heavy pages users depend on.
Useful states: initial load, validation errors, confirmation or error messages, expanded menus, and any state where translated content appears.
Viewports: include the narrow and wide layouts your product supports, prioritizing layouts where wrapping or control width can affect usability.

This is a project-specific coverage plan, not a universal list prescribed by Percy. Keep it small enough to review every build, and expand it when changes affect additional locales, pages, or states.

2. Install Percy for Playwright

Percy’s documented Playwright workflow uses the CLI and Playwright SDK, calls percySnapshot(page, name), and runs the test command under percy exec with the project token. Follow the current setup instructions in the Percy Playwright SDK repository for package and configuration details.

npm install --save-dev @percy/cli @percy/playwright

Store the Percy project token as a secret in your local environment or CI settings. Do not commit it to source control. For a local shell, set it before running the command:

export PERCY_TOKEN=YOUR_PERCY_PROJECT_TOKEN
npx percy exec -- npx playwright test

Use your project’s existing Playwright test script if it differs. The percy exec wrapper supplies the Percy build context while the test suite runs.

3. Capture locale-specific snapshots

Use stable names that identify the locale, page, and state. The example below is a runnable pattern once you adapt the base URL and supported locale list to your application. It assumes the site exposes each locale at /{locale}/checkout and that Playwright is already configured with a browser project.

import { test, expect } from '@playwright/test';
import percySnapshot from '@percy/playwright';

const baseUrl = process.env.BASE_URL ?? 'http://127.0.0.1:3000';
const supportedLocales = ['en-IN', 'hi-IN', 'bn-IN', 'ta-IN'];

test('checkout renders for every supported locale', async ({ page }) => {
  for (const locale of supportedLocales) {
    await page.goto(`${baseUrl}/${locale}/checkout`, {
      waitUntil: 'networkidle',
    });

    await expect(page.locator('main')).toBeVisible();
    await percySnapshot(page, `${locale} – checkout – initial`);
  }
});

Replace the sample locale codes with the site’s actual locale identifiers. If your app changes language through a selector, cookie, or user setting rather than a URL segment, use that mechanism and verify the resulting language before taking the snapshot. If a page remains active on network connections, wait for a meaningful selector or app-ready condition instead of relying on networkidle.

Run the test through Percy:

export PERCY_TOKEN=YOUR_PERCY_PROJECT_TOKEN
BASE_URL=https://staging.example.com npx percy exec -- npx playwright test

The example’s loop and naming scheme are an adaptation for locale testing. Percy documents the named snapshot call and the wrapped test-run workflow; the route and readiness condition must match your site.

4. Keep baselines associated with the right locale

BrowserStack recommends running all locale variants in one build on one branch. Give every variant its own snapshot name so Percy can track the corresponding baseline. See the Percy multi-locale baseline guidance.

Include locale, page, and state in each name, such as hi-IN – checkout – validation error.
Keep naming stable across runs. Renaming a snapshot can make Percy treat it as a different snapshot rather than continuing the expected history.
Run related locales together in the same build and branch where practical.
When you see broad unexpected diffs, check locale names, build/branch context, and missing baselines before concluding that the interface regressed.

Mixing locales under one name or separating them across unrelated builds can lead to confusing comparisons. Percy’s guide identifies cross-locale comparisons, missing baselines, and unexpectedly large diffs as signs to inspect baseline structure.

5. Review scripts and responsive behavior deliberately

A snapshot tells you that pixels changed; your review plan determines whether the change matters. For each supported script and relevant viewport, inspect:

Glyphs and shaping: characters and marks appear as intended, including joined forms where applicable.
Wrapping and clipping: headings, labels, error messages, and buttons fit without overlap or cut-off text.
Layout under text expansion: translated copy does not push important controls off-screen or hide nearby content.
Usability: fields, menus, links, and buttons remain visible and operable.
Viewport changes: repeat important states at narrow and wide widths because font metrics and text length can affect each layout differently.

These are recommended inspection points, not claims that a particular language or browser currently has a known rendering defect. A 2020 multilingual-internet report discussed possible font and script rendering problems on mobile screens, but it is historical context only and does not establish present-day compatibility for any browser-and-script pairing: 2020 multilingual-internet report.

6. Include right-to-left layouts only where your product uses them

Do not assume that every Indian-language locale uses a right-to-left layout. If your application does support RTL states, test them explicitly. The Percy Storybook SDK documents an additional-snapshot pattern using a query parameter such as direction=rtl and a matching-story inclusion rule. See the Percy Storybook SDK guidance, and check its current repository instructions before copying configuration into your project.

7. Stabilize captures and review diffs

Capture after the page has reached the state users should see. Use a page-ready selector or application-level readiness signal when content loads asynchronously; ensure the chosen state is deterministic across runs. Percy’s Playwright SDK documents named snapshots and options including full-page capture. Choose full-page or scoped capture based on whether the whole page or a specific region is relevant to the review.

Run the locale suite in a Percy build on the intended branch.
Confirm each expected locale, page, and state appears with its own recognizable name.
Review diffs against the matching locale baseline.
Investigate meaningful changes in glyphs, wrapping, clipping, and responsive layout.
Update a baseline only after the change is understood and intended.

Common problems and fixes

Symptom	Likely cause	Fix
Locales compare against the wrong image	Two variants share a snapshot name, or locale naming changed.	Include a stable locale identifier in every name and run the variants together where practical.
Snapshots are missing	The test did not reach the snapshot call, the route failed, or Percy was not run through `percy exec`.	Check the Playwright result and route, then run the test command under `percy exec` with the project token set.
Percy cannot create or associate a build	The project token is absent or invalid, or the build context is not being supplied by the CLI wrapper.	Check the token in the local or CI environment and verify the command uses `percy exec --`.
Large diffs appear across many locales	Baselines may be missing, locale variants may be mixed, or capture timing may differ.	Verify each locale has a distinct name and expected baseline; make the page-ready condition deterministic.
Text is cut off in only one locale	The translated string, script shaping, or font metrics may change the layout.	Inspect that locale at the affected viewport, then adjust layout or content rules and capture the same state again.
Snapshots vary between runs	Capture happens before dynamic content settles or the test reaches inconsistent states.	Wait for a meaningful ready selector or stable app state; avoid arbitrary delays when a specific readiness condition is available.

Performance, reliability, and cost considerations

Locale coverage grows with the number of locales, pages, states, and viewports you capture. Prioritize high-impact routes and states first, then add coverage where a change or user need justifies it. Group related locale variants in one build to keep baseline associations coherent. Deterministic readiness conditions reduce noisy diffs and unnecessary review work.

This guide does not make claims about Percy pricing, screenshot limits, or processing speed. Check Percy’s platform page and your account terms for current product and plan details. The research sources do not establish a present-day browser/device compatibility matrix for Indian scripts, so validate the actual combinations your users rely on.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. Its API accepts familiar screenshot parameter names, which can make switching straightforward.

Here is a one-call screenshot request for a page in your staging site; replace the URL and API key with your own:

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

See the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step 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. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Should every locale have a separate Percy build?

Percy’s multi-locale guidance recommends one build on one branch for all locale variants, with distinct snapshot names for their separate baselines.

Does this establish which Indian scripts work in each browser?

No. The cited Percy guidance does not provide a definitive current browser/device compatibility matrix. Test the scripts, devices, and viewports your product supports.

Do I need RTL snapshots for every Indian locale?

No. Add RTL states only if your product actually supports right-to-left layouts.