Use Playwright’s page.screenshot() after opening the page: by default it saves the visible viewport; set fullPage: true for the full scrollable page, or use locator.screenshot() to capture one element. The site in this guide is deliberately represented by a placeholder URL: no specific Indian ecommerce website was named, so its access rules and page behavior must be checked separately.
Choose what the screenshot should include
Playwright offers three practical capture scopes. The right one depends on whether you need the page as currently visible, all scrollable content, or a particular component.
As an Amazon Associate I earn from qualifying purchases.
| Capture | Playwright call | What it includes |
|---|---|---|
| Viewport | page.screenshot({ path: 'page.png' }) |
The currently visible browser viewport. |
| Full page | page.screenshot({ path: 'page.png', fullPage: true }) |
The full scrollable page, laid out as a tall image. |
| One element | page.locator('selector').screenshot({ path: 'element.png' }) |
The selected element, such as a product card or page header. |
These are Playwright’s documented screenshot methods. For visual inspection, screenshots show rendered appearance; accessibility snapshots serve a different purpose, exposing page structure and text for interaction. See the Playwright screenshot documentation.
Install Playwright and capture a page
In a Node.js project, install Playwright and its browser binaries, then run a script. The example uses https://example.com; replace it with the page you are permitted to access. It demonstrates the API and is not a test of an Indian ecommerce website.
#1 Best Overall
npm init -ynpm install playwrightnpx playwright install chromium- Save the following as
capture.mjs.
import { chromium } from 'playwright';
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}Run it with node capture.mjs. The resulting screenshot.png is a full-page PNG. To capture only the initial viewport, remove fullPage: true.
Capture a product element or a precise region
Capture a locator
Use a CSS selector that identifies the target. For example, after inspecting the page and confirming its product-card selector:
await page.locator('.product-card').screenshot({ path: 'product-card.png' });The selector is illustrative; ecommerce sites use different markup, so identify a selector that exists on the target page. If the locator matches multiple elements, make the selection specific, such as with a product name or a locator filter, before taking the screenshot.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Clip a rectangle
For a fixed rectangular portion of the page rather than a DOM element, use the screenshot API’s clip option with page coordinates and dimensions:
await page.screenshot({
path: 'region.png',
clip: { x: 0, y: 0, width: 800, height: 600 }
});Choose coordinates and dimensions that fit the page’s intended viewport and content. An element locator is generally more robust when the target is a component that may move as the layout changes.
Choose format and output scale
Playwright’s screenshot interface supports PNG, JPEG, and WebP. The filename extension can determine the format; use an extension that matches the image you want, such as .png or .webp. For CSS-based formats and behavior, see the page screenshot API reference.
scale: 'css'produces one output pixel per CSS pixel.scale: 'device'uses device-pixel density and can create a larger image on a high-DPI display.
Example:
await page.screenshot({ path: 'page.webp', type: 'webp', scale: 'css' });Use CSS scale when predictable CSS-pixel dimensions matter. Use device scale when you need the additional pixel density of the emulated or actual device configuration.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRepresent a mobile or localized view
A device preset configures browser characteristics such as user agent, screen size, viewport, and touch support. You can also override the viewport and set the browser context’s locale or timezone. Playwright describes this as device emulation; it does not establish that an image exactly matches a real phone or a visitor physically located in India.
Example using a Playwright device preset:
import { chromium, devices } from 'playwright';
const browser = await chromium.launch();
try {
const context = await browser.newContext({
...devices['iPhone 13'],
locale: 'en-IN',
timezoneId: 'Asia/Kolkata'
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'mobile-page.png', fullPage: true });
} finally {
await browser.close();
}Choose a preset and locale/timezone that correspond to the scenario you are documenting. A mobile emulation is a browser configuration, not proof of behavior on every physical device or network. See Playwright’s emulation documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use a reliable capture sequence
- Confirm the permitted target. Check the chosen ecommerce site’s current terms and automation rules. No site-specific access policy can be inferred from Playwright’s general documentation.
- Decide the scope. Choose viewport, full-page, locator, or clip capture before writing the script.
- Set the scenario. Pick a viewport or device preset; add locale and timezone only if they matter to the view being recorded.
- Navigate and capture. Use
page.screenshot()orlocator.screenshot()after navigation. - Save deliberately. Choose a path, supported image format, and CSS or device scale appropriate to your intended output.
For pages whose content appears asynchronously, a screenshot immediately after navigation may not show the desired state. Wait for a known page element before capture, for example with await page.locator('.product-title').waitFor(), using a selector that actually exists on the target page.
Troubleshoot common capture problems
- The file shows only the first screen: that is the default viewport capture. Set
fullPage: truewhen you need scrollable content. - The element screenshot fails or captures the wrong thing: verify the selector in the page, wait for the element to appear, and narrow the locator if it matches several items.
- The image is larger or smaller than expected: check the viewport dimensions and whether
scaleis'css'or'device'; device scale can increase output pixel dimensions. - The page looks like a desktop view instead of mobile: create the context with the intended device preset before opening the page, and verify the viewport and user agent settings.
- Localized content differs from the expected view: configure the context locale and timezone for the scenario. Those settings do not guarantee that the site will show a particular inventory, currency, or India-specific content.
- Content is missing because it loads later: wait for a meaningful selector or page state before capture. A fixed delay may be less reliable when load time varies.
- Navigation is blocked or behaves unexpectedly: the specific site may restrict automation or require user interaction. Check its current access terms and rules; a general Playwright example cannot establish permission or site behavior.
Or skip the browser setup
ScreenshotNeo offers a one-request screenshot API. Replace the example URL with the page you are authorized to capture. 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 -o shot.webpScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, 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 per month with no card; paid plans start at $5 for 3,000 shots. Learn more at ScreenshotNeo. Sign up free for 1,000 screenshots a month, with no card.
Frequently Asked Questions
Can I take a screenshot of just the login form?
Yes. Locate the form with a selector and call locator.screenshot(), as with any other page element.
Does an India locale make the capture equivalent to browsing from India?
No. Locale and timezone configure browser settings; they do not establish a physical location or guarantee what content the site serves.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
