How to Capture Screenshots of Hindi Websites with Cypress

To capture a reliable screenshot of a Hindi website with Cypress, visit the page, assert that the target Devanagari content is visible, wait for the browser’s used fonts and layout to settle, then call cy.screenshot(). Choose viewport for the visible area, fullPage for the page from top to bottom, or an element screenshot for one region. Keep the viewport and browser environment stable when comparing images.

This guide uses a JavaScript Cypress test. The same sequence works whether the page’s Hindi content is static or rendered by a client-side application, though dynamic pages may need additional app-specific readiness checks.

1. Add a Cypress test that waits for Hindi content and fonts

Put a test like this in a Cypress spec, for example cypress/e2e/hindi-page.cy.js. Change the route, expected Hindi text, and selectors to match your application.

describe('Hindi page screenshot', () => {
  it('captures the rendered Hindi page', () => {
    cy.visit('/hi/')

    // Confirm the expected Devanagari content has rendered and is visible.
    cy.contains('body', 'नमस्ते').should('be.visible')

    // Wait for fonts used by the document and their layout work to finish.
    cy.document().its('fonts').its('ready')

    cy.screenshot('hindi-page', { capture: 'fullPage' })
  })
})

The font wait uses the browser’s document.fonts.ready promise. It resolves after the document’s used fonts have loaded and font-related layout work has completed. It does not guarantee that every font declared in CSS, including optional fonts that the page did not use, loaded successfully. Check the actual screenshot if a glyph looks wrong. MDN documents the ready property.

Cypress commands are asynchronous and run in sequence. Put assertions and readiness checks before the screenshot so the capture follows the state you intend to inspect. Cypress supports manual screenshots in both cypress open and cypress run; it also captures screenshots automatically when a test fails during cypress run. See Cypress’s screenshot and video guide.

2. Run the test and find the screenshot

Start Cypress interactively with npx cypress open, select your end-to-end testing setup and spec, and run the test; or run it in automation with npx cypress run --spec cypress/e2e/hindi-page.cy.js.
Look in the configured screenshots folder. The default is cypress/screenshots; the spec name and screenshot name are reflected in the output path.
Open the image and inspect the Hindi text, page layout, and any content that loads after the initial page visit.

Use a descriptive screenshot name such as hindi-page-desktop. Cypress creates folder structure for paths in a screenshot name. The overwrite option controls whether a duplicate name can replace an existing file. The screenshot output directory can be configured in Cypress configuration; see the screenshot command reference for naming and options.

3. Pick the capture scope

Capture	Use it for	Example
`viewport`	The currently visible browser area	`cy.screenshot('hindi-viewport', { capture: 'viewport' })`
`fullPage`	The application from top to bottom; this is the default for manual screenshots	`cy.screenshot('hindi-full-page', { capture: 'fullPage' })`
`runner`	The browser viewport including the Cypress Runner interface and Command Log	`cy.screenshot('hindi-debug', { capture: 'runner' })`
Element	A single matched element, such as the article or a translated content panel	`cy.get('main article').screenshot('hindi-article')`

For an element capture, Cypress screenshots the selected element rather than the whole page. Make the selector specific and ensure the intended element exists before capturing it. For example:

cy.get('main article')
  .should('be.visible')
  .screenshot('hindi-article', { padding: 12 })

The padding option applies to element captures. For a rectangular crop of an application screenshot, use clip, whose coordinates and dimensions are in pixels:

cy.screenshot('hindi-crop', {
  capture: 'viewport',
  clip: { x: 20, y: 20, width: 700, height: 500 },
})

Cypress stitches full-page captures while scrolling. Fixed and sticky elements can therefore appear more than once in the result. If that affects your image, temporarily change the relevant element’s positioning before the capture and restore it afterward, or capture the viewport or a specific element instead. Cypress describes this behavior and the capture options.

4. Make Hindi rendering repeatable

Set a fixed viewport

Choose the viewport that matches the artifact you need and set it explicitly before visiting the page. For example:

describe('Hindi page screenshot', () => {
  beforeEach(() => {
    cy.viewport(1280, 900)
  })

  it('captures the page', () => {
    cy.visit('/hi/')
    cy.contains('body', 'नमस्ते').should('be.visible')
    cy.document().its('fonts').its('ready')
    cy.screenshot('hindi-desktop', { capture: 'fullPage' })
  })
})

For mobile output, use a smaller fixed viewport or a Cypress device preset supported by your project, then keep that choice consistent across runs. A viewport change can alter line wrapping, responsive layouts, and total page height.

Keep the rendering environment consistent

For screenshot comparisons, use the same operating system, browser version, display scaling, installed fonts, and viewport. These differences can change rendered pixels even when the application code is unchanged. Cypress recommends generating and comparing screenshots in the same environment with a fixed viewport. Read the Cypress visual-testing guidance.

Verify the glyphs, not only font readiness

A resolved font-ready promise is a timing signal, not a proof that the chosen font contains every Devanagari glyph in your content. If text is missing or unexpectedly shaped, inspect the captured image and the browser’s font requests. Confirm that the intended font files are reachable and that the page’s font stack includes a font with the needed glyph coverage. The supplied Cypress and browser references do not specify a particular Hindi typeface or CI font package.

Wait for content that appears after fonts

Font readiness does not mean every application task is complete. If Hindi text is fetched after navigation, rendered after a user action, or placed in a lazy-loaded section, wait for the relevant state explicitly before waiting for fonts:

cy.visit('/hi/articles/')
cy.get('[data-cy="article-content"]').should('be.visible')
cy.contains('[data-cy="article-content"]', 'यहाँ लेख का पाठ है').should('be.visible')
cy.document().its('fonts').its('ready')
cy.get('[data-cy="article-content"]').screenshot('hindi-article')

Replace the example selector and text with stable application-specific values. If the page displays a consent dialog or a loading placeholder, handle that state according to the purpose of the test rather than assuming the font wait will resolve it.

5. Useful screenshot options

Option	What it controls	Notes
`capture`	`viewport`, `fullPage`, or `runner`	For element captures, the option is ignored.
`blackout`	Selectors whose matching elements are blacked out	Does not apply to runner captures. Useful when a changing region makes an image hard to compare.
`clip`	Pixel crop: `{ x, y, width, height }`	Use for a viewport screenshot when only a defined rectangle is needed.
`disableTimersAndAnimations`	Whether Cypress pauses JavaScript timers and CSS animations while capturing	Defaults to `true`; consider the effect if the page’s visible state depends on animation or a timer.
`padding`	Space around an element screenshot	Accepts a number or up to four values using CSS shorthand. Element captures only.
`scale`	Whether the app is scaled to fit the browser viewport	Defaults to `false`; runner capture always scales.
`timeout`	How long the screenshot command waits before timing out	Defaults to Cypress’s `responseTimeout`.
`overwrite`	Whether an existing file with the same name can be replaced	Defaults to `false`.
`onBeforeScreenshot`, `onAfterScreenshot`	Callbacks immediately before or after a manual screenshot	The after callback receives screenshot details such as its path and dimensions.
`log`	Whether to show the command in the Cypress Command Log	Defaults to `true`.

For example, black out a changing timestamp while capturing the full page:

cy.screenshot('hindi-page-stable', {
  capture: 'fullPage',
  blackout: ['.last-updated'],
  overwrite: true,
})

Check the option’s exact behavior against your Cypress version in the Cypress API reference.

6. Troubleshooting

Symptom	Likely cause	What to do
Hindi text is blank or uses an unexpected fallback	The intended font request failed, the font lacks a glyph, or the capture happened before used fonts finished loading.	Wait for the target content and `document.fonts.ready`. Inspect font requests and the resulting image in the target browser.
The screenshot omits text that appears later	The application content is asynchronous or lazy-loaded; font readiness does not wait for application data.	Assert the target text or content container is visible before capturing. Trigger the app’s normal lazy-load behavior if needed.
The screenshot is an unexpected size	The capture mode differs from the intended scope, or viewport dimensions changed.	Set the viewport explicitly and choose `viewport`, `fullPage`, or an element capture deliberately.
A sticky header repeats in the full-page image	Full-page capture scrolls and stitches sections, so fixed or sticky elements may recur.	Capture the viewport or element, or temporarily adjust the sticky element’s positioning around capture.
The screenshot command times out	Capture or page rendering took longer than the configured timeout, or the page is still unstable.	Resolve page readiness first; if a large page genuinely needs longer, set an appropriate screenshot `timeout`.
Repeated runs produce pixel differences	Browser, operating system, display scaling, installed fonts, viewport, or dynamic page content changed.	Fix the rendering environment and viewport; mask only the intentionally variable regions.
The screenshot is saved under an unexpected path	Screenshot names are relative to the screenshots folder and spec path, or the configured output folder differs.	Check the screenshot name, Cypress configuration, and the spec’s folder structure.
A new tab or external link disrupts capture	Chromium may pause the Cypress tab when another tab opens.	Keep the test on the application tab and inspect Cypress’s documented tab behavior for your browser setup.

Cypress can also automatically take a screenshot on a failure during cypress run. These failure screenshots use runner capture behavior, so they are useful for debugging but may not match a manually requested clean page image. The command reference covers failure capture and browser-specific details.

7. Performance, reliability, and cost

A screenshot adds browser work to a test. Full-page capture can take longer than a viewport capture because Cypress scrolls through and stitches the page; element capture can keep the artifact focused. Use the smallest scope that answers your question, and avoid taking duplicate images when one artifact is sufficient.

Reliability comes primarily from waiting for the state you care about and controlling the rendering environment. A font-ready check addresses used-font loading and related layout, while visible-content assertions address application state. Neither one proves that every network request, animation, or optional font has completed, so inspect the artifact in the same CI/browser environment used for comparisons.

Cypress screenshot capture is part of the test workflow; the cited documentation does not establish a per-image Cypress charge. Account for the compute time and storage used by your own CI or visual-testing setup. Cypress’s built-in screenshot command captures images but does not itself compare them; visual comparison is a separate workflow.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. If you need a screenshot from a URL without setting up a Cypress browser run, make one GET request. See the ScreenshotNeo API documentation for request options.

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

import requests

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

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

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; response headers indicate 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. Sign up for free and capture 1,000 screenshots a month with no card.

FAQ

Does Cypress need a special Hindi encoding setting?

The cited guidance does not establish a Hindi-specific encoding fix for screenshots. The relevant checks are whether the browser rendered the expected text and whether the fonts and layout were ready before capture.

Does `document.fonts.ready` guarantee every declared font loaded?

No. It resolves when the document’s used fonts and associated layout work are ready. Optional or unused fonts are not proof of successful loading; inspect the rendered glyphs.

Can I use a Cypress screenshot as a visual regression baseline?

Yes, as an image artifact, but cy.screenshot() itself does not compare images. A separate comparison workflow is needed.

Where do automatic failure screenshots go?

They are saved with Cypress screenshots, normally under cypress/screenshots, subject to project configuration and run settings.