How to Take a Playwright Screenshot of a Bengali Website with Web Fonts Loaded

To take a Playwright screenshot after a Bengali website’s requested web fonts have finished loading, navigate to the page, wait for document.fonts.ready, then capture it. This waits for the document’s font-loading set to settle; it does not prove that the intended font was selected or that every Bengali glyph rendered correctly.

import { chromium } from 'playwright';

const url = 'https://example.com';
const browser = await chromium.launch();
const page = await browser.newPage();

try {
  await page.goto(url);
  await page.evaluate(() => document.fonts.ready);
  await page.screenshot({ path: 'bengali.png', fullPage: true });
} finally {
  await browser.close();
}

Replace https://example.com with the page you want to capture. Install Playwright in your project and run this as an ES module, or adapt the imports to your existing setup. The example saves a full-page PNG.

Why wait for document.fonts.ready?

A page can initially render with fallback fonts while web fonts are still being requested. Evaluating document.fonts.ready waits until the browser’s document font-loading set has finished loading or failed. It is a browser API used through Playwright’s page evaluation, not a Playwright guarantee that a particular font or glyph is correct.

After the wait, the screenshot may still show fallback text if a font request failed, CSS selected another font, or the chosen font lacks a needed glyph. Inspect the resulting image to confirm the Bengali text looks right.

Capture a Bengali page step by step

1. Choose a stable URL and environment. Use the same URL, browser version, operating system, and fonts for repeat captures when you compare screenshots.
2. Navigate to the page. page.goto(url) uses Playwright’s navigation API. If your application has a known readiness condition beyond navigation, wait for that condition too.
3. Wait for the font set to settle. Run await page.evaluate(() => document.fonts.ready).
4. Capture the image. Use page.screenshot(); set fullPage: true when the entire page is needed. Consult the current Page API for format, scale, and other options.
5. Review Bengali text in the image. Look for missing characters, unexpected fallback shapes, clipping, or layout changes. A resolved font promise is not a visual correctness check.

Full runnable example with a configurable URL

import { chromium } from 'playwright';

const url = process.argv[2];
if (!url) {
  throw new Error('Usage: node screenshot.mjs https://example.com');
}

const browser = await chromium.launch();
const page = await browser.newPage();

try {
  await page.goto(url);
  await page.evaluate(() => document.fonts.ready);
  await page.screenshot({ path: 'bengali.png', fullPage: true });
  console.log('Saved bengali.png');
} finally {
  await browser.close();
}

Save it as screenshot.mjs and run node screenshot.mjs https://your-bengali-page.example. For a viewport-only screenshot, remove fullPage: true. The Page API supports other screenshot options; check the current documentation before relying on specific format or scale settings.

For visual regression tests

If the goal is to detect visual changes against a maintained baseline, use Playwright Test’s screenshot assertion rather than only saving an image:

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

test('Bengali page renders consistently', async ({ page }) => {
  await page.goto('https://example.com');
  await page.evaluate(() => document.fonts.ready);
  await expect(page).toHaveScreenshot('bengali.png');
});

toHaveScreenshot() retries until two consecutive screenshots match, then compares the last screenshot with its expected image. It is a Playwright Test feature. Keep the browser and host platform consistent between baseline generation and later runs: font availability and rendering can vary across environments.

What to check when Bengali text looks wrong

• Inspect the image itself. Check representative Bengali text, including the characters and combinations that look wrong in your page.
• Check whether font requests failed. Playwright identifies font as a request resource type. Use request observation or your browser’s network diagnostics to look for failed font requests.
• Check the page’s CSS and fallback behavior. A settled font set can include failed requests; the browser may render with a fallback. The wait does not confirm which font rendered each element.
• Keep the rendering environment fixed. Use the same browser and platform for visual baselines and comparisons. Different environments can produce different rendering.
• Wait on readiness, not an arbitrary delay. A fixed sleep does not establish that font loading finished. Playwright discourages time-based waits in production tests because they can be flaky.

Common problems and fixes

Symptom	Likely cause	What to do
Bengali text still appears as a fallback	The requested font failed, CSS chose a fallback, or the font does not cover the needed glyphs.	Inspect the screenshot and font requests; review the page’s font loading and CSS. document.fonts.ready does not validate font choice or glyph coverage.
The screenshot assertion changes across machines	Browser, platform, or available fonts differ.	Generate and compare baselines in a consistent browser and host environment.
A fixed timeout sometimes captures too early	Elapsed time does not track whether fonts have completed loading.	Wait for document.fonts.ready instead of guessing a delay.
The image omits content below the viewport	The screenshot captures only the visible viewport by default.	Set fullPage: true for a full-page capture.

Performance and reliability notes

Waiting on document.fonts.ready ties the capture to font-loading completion rather than an arbitrary sleep. A slow or failed font request can still affect how long the page takes to reach that state, and completion does not establish visual correctness. For repeatable visual checks, control the browser and host environment and inspect failures when results differ.

Full-page screenshots can include substantially more page content than viewport captures. Choose the capture extent that matches your task, and keep the screenshot options consistent when comparing results. Avoid adding a fixed delay as a substitute for a page readiness signal.

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 configuration.

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

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. 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.

Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does document.fonts.ready guarantee Bengali glyph coverage?

No. It indicates that the document’s font-loading set settled, including requests that failed. It does not guarantee the intended font was selected or that it contains every required glyph.

Should I use a fixed sleep after navigation?

No. Wait for the font-loading signal and any application-specific readiness condition you need. A fixed delay can be too short on one run and unnecessarily long on another.

Should I use a one-off screenshot or a screenshot assertion?

Use page.screenshot() to produce an image artifact. Use expect(page).toHaveScreenshot() in Playwright Test when you need automated comparison with a reference image.