Playwright में Indian Website का सही Mobile Viewport Screenshot कैसे लें

For a reliable mobile screenshot of an Indian website, choose either a Playwright device preset that matches your target phone or an explicit CSS viewport for the breakpoint you want to inspect. Keep the preset’s mobile behavior when you need it, set the browser locale and timezone if the page depends on language or local time, then choose a viewport or full-page capture deliberately. A small viewport alone does not reproduce every mobile browser behavior.

Playwright’s emulation documentation describes testing with browser emulation for real devices such as phones and tablets. The configuration below gives you a repeatable screenshot setup without assuming that one viewport represents every phone in India.

1. Decide what “mobile” means for this screenshot

Before writing the capture code, decide which behavior the screenshot should represent. These settings answer different questions:

• Named device preset: Use a preset when you want a particular device profile. Playwright presets bundle values such as user agent, screen size, viewport, and touch support. Choose one present in the device registry of your installed Playwright version.
• Custom viewport: Use explicit width and height to check a responsive breakpoint. These dimensions describe the test you chose; they are not a standard for every Indian phone.
• Mobile emulation: A narrow viewport does not enable every mobile behavior. The preset’s isMobile setting relates to meta viewport handling, and touch support is a separate part of the device profile. Keep those settings when that is what you intend to test.
• Locale and timezone: Set a locale such as en-IN when the page should receive that browser language and use relevant formatting rules. Set Asia/Kolkata when dates or time-based content should reflect Indian Standard Time. A .in domain alone does not require either setting.
• Geolocation: Set this only if the site uses the visitor’s location, such as for local stores or delivery areas. Geolocation is distinct from timezone and may require granting the page permission.
• Capture extent and scale: A default screenshot captures the visible viewport. Use fullPage only when you need the scrollable page. Choose CSS or device scale based on the desired output pixels.

Locale, timezone, geolocation, and viewport are separate controls. For example, an English-language layout in Kolkata time does not imply that the browser is physically located in Kolkata.

2. Capture with a device preset in JavaScript

Install Playwright in your project and use a preset available in that version’s device registry. The example uses Chromium, Pixel 7, English for India, and Kolkata time. Confirm the device name against your installed registry before publishing or running the example; device entries can depend on the Playwright version.

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const context = await browser.newContext({
      ...devices['Pixel 7'],
      locale: 'en-IN',
      timezoneId: 'Asia/Kolkata',
    });
    const page = await context.newPage();
    await page.goto('https://example.in', { waitUntil: 'load' });
    await page.screenshot({ path: 'indian-mobile-viewport.png' });
    await context.close();
  } finally {
    await browser.close();
  }
})();

Replace https://example.in with the target page. This takes a viewport screenshot: it captures what is visible in the emulated viewport at capture time.

If the goal is a responsive breakpoint rather than a named phone, override the preset viewport after spreading the preset. Keep the preset’s mobile settings unless you specifically intend to test a different browser context:

const context = await browser.newContext({
  ...devices['Pixel 7'],
  viewport: { width: 390, height: 844 },
  locale: 'en-IN',
  timezoneId: 'Asia/Kolkata',
});

The order matters because the preset supplies viewport values of its own. The dimensions above are an explicit test viewport, not a claim about all Indian devices.

3. Capture with a device preset in Python

Python’s synchronous API supports the same approach. Install the Python Playwright package and its browser binaries as described in the official Playwright Python documentation. Select a device key available in your installed version.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    try:
        context = browser.new_context(
            **p.devices['Pixel 7'],
            locale='en-IN',
            timezone_id='Asia/Kolkata',
        )
        page = context.new_page()
        page.goto('https://example.in', wait_until='load')
        page.screenshot(path='indian-mobile-viewport.png')
        context.close()
    finally:
        browser.close()

For a breakpoint check, place an explicit viewport in the context options after unpacking the preset:

context = browser.new_context(
    **p.devices['Pixel 7'],
    viewport={'width': 390, 'height': 844},
    locale='en-IN',
    timezone_id='Asia/Kolkata',
)

4. Choose locale, timezone, and location intentionally

Test need	Context setting	What it affects
English-India browser language and formatting	locale: 'en-IN' / locale='en-IN'	Browser language, the Accept-Language request header, and locale-sensitive formatting.
Hindi or another language	Set the locale appropriate to the test	Use the locale your scenario requires; en-IN is only an English-India example.
Indian local time	timezoneId: 'Asia/Kolkata' / timezone_id='Asia/Kolkata'	Browser-context timezone behavior for page code and displayed time.
Location-based content	Set geolocation and grant the required permission	Location APIs and site logic that depends on the visitor’s coordinates.

The test runner’s own timezone can differ from the browser context timezone. If assertions calculate dates outside the browser, account for that separately. A site can also use account settings, IP-based routing, or its own language selector; browser locale does not guarantee that every site will display the expected language.

5. Select viewport, full-page, and image scale

Playwright’s screenshot parameters distinguish screenshot extent and output scale:

• Viewport screenshot: page.screenshot({ path: 'shot.png' }) in JavaScript or page.screenshot(path='shot.png') in Python captures the visible viewport.
• Full-page screenshot: Set fullPage: true in JavaScript or full_page=True in Python to capture the full scrollable page. Use this when the whole document is the artifact you need, not as a substitute for a first-screen capture.
• scale: 'css': Keep one screenshot pixel per CSS pixel. This is useful when the output should map directly to CSS viewport dimensions.
• scale: 'device': Produce pixels according to device scale, which can make the image dimensions larger for high-DPI profiles.

For example, these options create a full-page PNG at CSS scale:

await page.screenshot({
  path: 'indian-mobile-full-page.png',
  fullPage: true,
  scale: 'css',
});

page.screenshot(
    path='indian-mobile-full-page.png',
    full_page=True,
    scale='css',
)

Do not compare the CSS viewport dimensions directly with a device-scale image’s physical pixel dimensions. For visual regression, compare like with like: use the same device profile, viewport, locale, timezone, screenshot extent, scale, browser version, and page state.

6. Wait for the page state you need

A screenshot records the page at the moment the capture runs. The examples wait for the page load event, but a site may render important content later, load images lazily, redirect, or require authentication. Choose a wait condition that matches the page and test; there is no single wait that guarantees every site is visually complete.

For a page element that marks readiness, wait for that element before capture:

await page.goto('https://example.in', { waitUntil: 'domcontentloaded' });
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({ path: 'indian-mobile-viewport.png' });

Python equivalent:

page.goto('https://example.in', wait_until='domcontentloaded')
page.locator('main').wait_for(state='visible')
page.screenshot(path='indian-mobile-viewport.png')

Use a selector meaningful to the page rather than assuming that main exists everywhere. For a full-page image, consider whether below-the-fold lazy images have loaded; a viewport capture does not need the entire document to be ready. Cookie consent, popups, bot checks, and login flows are site-specific state that may require their own handling.

7. cURL and Node.js alternatives with ScreenshotNeo

Playwright is useful when you need browser automation, a chosen device context, or custom page interactions. For a straightforward website screenshot without installing and managing a browser, ScreenshotNeo provides a website screenshot API and MCP server from ScreenshotNeo. The API returns an image or PDF from one GET request. Review the ScreenshotNeo API documentation for request options and response details.

Or skip the browser setup:

cURL:

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

Python:

import requests

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

Node.js:

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

These calls use the API’s default capture configuration; use the documentation for viewport, device, locale, timezone, and other supported options. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are not billed; response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots each month without a card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account to get started.

8. Troubleshooting

Symptom	Likely cause	Fix
Device key is undefined or unknown	The preset name is missing from the installed Playwright version’s device registry.	Inspect the installed registry and choose an available name. Keep the chosen Playwright version pinned for repeatable captures.
Page looks responsive but not like a mobile browser	Only viewport width was changed, or mobile/touch settings were omitted.	Use a device preset, or explicitly configure the mobile behavior relevant to the test. A narrow desktop viewport is not a complete mobile emulation.
Viewport does not match the intended breakpoint	The preset’s viewport was not overridden, or the override was placed before the preset spread.	Put viewport after ...devices[name] in JavaScript or after **p.devices[name] in Python.
Page language or number/date format is unexpected	The browser locale differs from the expected locale, or the site overrides browser language.	Set the intended locale and check the site’s own language, account, or routing behavior.
Displayed time is shifted	The browser context timezone or test runner timezone differs from the expectation.	Set Asia/Kolkata in the browser context and make date assertions use a deliberate timezone as well.
Location-specific content is wrong	Timezone was set, but geolocation was not, or the site uses a different location signal.	Configure geolocation and permission where required; investigate IP or account-based location separately.
Screenshot is blank or misses content	Capture ran before the page’s relevant content appeared, or navigation failed/redirected.	Check the final URL and page state, then wait for a page-specific readiness selector. Handle authentication and consent as the site requires.
Full-page image misses lazy content	Content loads only after scrolling into view.	Trigger the page’s lazy-loading behavior before capture and wait for the needed content; confirm that full-page capture is actually required.
Image dimensions are larger than expected	scale: 'device' follows device pixels rather than CSS pixels.	Use scale: 'css' when you need one image pixel per CSS pixel, or retain device scale intentionally.
Screenshot differs between runs	Page state, dynamic content, browser version, locale, timezone, or device settings changed.	Keep context and capture settings fixed, wait for a stable page marker, and account for dynamic timestamps, ads, and personalized content.

9. Performance, reliability, and cost

A Playwright capture includes launching or connecting to a browser, navigating to the page, waiting for the state your test requires, and writing the image. Reusing a browser process across multiple captures can avoid repeatedly launching it, while separate browser contexts keep per-test settings such as locale and viewport explicit. Page readiness waits should be as specific as the test allows: waiting for an unnecessary condition adds time, while capturing too early creates incomplete artifacts.

Full-page screenshots can be taller and larger than viewport captures, particularly at device scale. Use viewport screenshots for first-screen checks and CSS scale when matching CSS pixel dimensions matters. For repeatable comparisons, pin the Playwright version and browser installation and hold device, viewport, page state, locale, timezone, extent, and scale constant.

Playwright itself does not charge per screenshot; the operational costs are the compute and storage for the environment running the browser and the time required to capture and retain artifacts. ScreenshotNeo’s listed 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; and Business, $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Only clean shots are billed; cache hits, bot checks/CAPTCHAs, blank pages, timeouts, and failed loads cost nothing.

10. Frequently asked questions

Is en-IN the right locale for every Indian site?

No. It is an example for English in India. Select the locale that matches the language and formatting scenario you need to test.

Does a .in domain mean I should set geolocation?

No. Set location only when the site’s behavior depends on the visitor’s coordinates. Domain suffix, timezone, and geolocation represent different things.

Should I use a phone preset or a custom viewport for visual regression?

Use the same choice and settings across the baseline and later captures. A preset represents a device profile; a custom viewport targets a particular responsive size.

Can a screenshot confirm how a page behaves on every Indian phone?

No single preset or viewport covers every device. Capture the device profiles or breakpoint sizes that matter to your project.

References

• Microsoft Playwright: Emulation
• Microsoft Playwright: API parameters
• Microsoft Playwright for Python: Introduction
• ScreenshotNeo API documentation