Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
After opening the page in Playwright, use page.screenshot() for the visible viewport, add fullPage: true for the full scrollable page, or call locator.screenshot() to capture a specific element. The example below works for a target URL you are permitted to automate; the site is not specified, so its access rules and exact behavior must be checked separately.
Set up Playwright and capture a page
In a new Node.js project, install Playwright and its browser:
npm init -y
npm install playwright
npx playwright install chromiumSave this as screenshot.mjs. Replace the example address with the page you want to capture:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallimport { chromium } from 'playwright';
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'page.png' });
} finally {
await browser.close();
}Run it with node screenshot.mjs. With no additional screenshot options, Playwright saves the current viewport. The code illustrates the documented API; it does not represent a test of a particular Indian ecommerce site.
#1 Best Overall
Choose what to capture
Visible viewport
Use page.screenshot({ path: 'page.png' }) to save what is currently visible in the browser viewport. This is usually the right choice for a screenshot of the initial screen or a particular scrolled position.
Full scrollable page
Use fullPage: true to capture the page as if it were laid out on a very tall screen, including content below the fold:
await page.screenshot({ path: 'full-page.png', fullPage: true });A full-page capture can be much taller and larger than a viewport image. If the page loads images or product listings only as you scroll, verify that the content you need has loaded before capturing; the screenshot option alone does not establish how a particular site handles lazy-loaded content.
Recommended Free Tools
One element
Use a locator screenshot to isolate a product card, header, login form, or another element identified by a CSS selector:
await page.locator('.product-card').screenshot({ path: 'product-card.png' });Replace .product-card with a selector that matches the target page. If it matches multiple elements, make the locator specific, for example with a product name, parent container, or an appropriate locator filter.
Precise rectangular region
For a fixed region rather than a DOM element, the screenshot API supports a rectangular clip area. Set its coordinates and dimensions to the region you need, and ensure the requested area is valid for the page; an element locator is generally more robust when the target has a stable selector.
Choose image format and pixel scale
Playwright supports PNG, JPEG, and WebP screenshots. The output format can be inferred from the file extension; use a matching path such as page.png, page.jpeg, or page.webp. Choose PNG for lossless output, or JPEG/WebP when a smaller file is more useful and their compression is acceptable.
Free tools Windows power users keep installed
One-click scans. No signup required.
The scale option controls output dimensions:
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 configuration.
For example, await page.screenshot({ path: 'page.webp', type: 'webp', scale: 'css' }); explicitly selects WebP and CSS-pixel scale. Match format and scale to the downstream use, such as visual review, documentation, or storage.
Represent a mobile or India-localized browser view
A site being Indian does not by itself determine the browser viewport, locale, timezone, or device. Set those values to match the scenario you are documenting. Playwright’s device registry provides presets describing browser behavior such as user agent, screen size, viewport, and touch support; a context can use a preset and its viewport can be overridden. Browser locale and timezone can also be configured on a context.
For a custom context, for example:
const context = await browser.newContext({
viewport: { width: 390, height: 844 },
locale: 'en-IN',
timezoneId: 'Asia/Kolkata'
});
const page = await context.newPage();Use a registered device preset when its modeled browser properties suit the capture, or set the needed context properties explicitly. A configured viewport, locale, and timezone describe browser settings; they do not prove the image matches a physical phone or a visitor physically located in India.
Make capture timing deliberate
Navigate before taking the screenshot, and choose a point at which the content you need is ready. The example waits for the page’s load event, but ecommerce pages may continue updating after that event. Playwright also supports waiting for a selector, a delay, or network idle when appropriate. A selector wait is useful when a specific visible component signals readiness:
await page.goto(targetUrl);
await page.locator('.product-card').waitFor();
await page.screenshot({ path: 'page.png' });Use a selector that exists on the target page. Network idle or an arbitrary delay may not be a reliable readiness signal for a page with continuous background requests; choose the condition that corresponds to the content needed in the artifact.
Check site access before automating
No particular ecommerce domain is named here, so its terms, consent behavior, and automation restrictions cannot be inferred. Before capturing a named site, check its current access terms and applicable rules. Playwright’s general screenshot API documentation does not establish that a given retailer permits automated access.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common capture problems
- Browser executable is missing: install the browser for the installed Playwright package with
npx playwright install chromium. - The saved image is only the first screen: add
fullPage: truewhen the full scrollable page is required. - The element locator fails: inspect the page structure and replace the example selector with one that matches the target element; wait for it if it appears after navigation.
- Content is absent or still changing: wait for the relevant selector or another suitable readiness condition before capture. A navigation event does not guarantee every dynamically loaded component is ready.
- The output is unexpectedly large: use CSS scale instead of device scale, choose a compressed format if suitable, or capture only the viewport or required element.
- The screenshot does not look like a real visitor’s phone or location: review the chosen device properties, viewport, locale, and timezone. These emulate browser conditions rather than establish physical device or geographic identity.
- The site blocks or disallows automated access: do not attempt to bypass the site’s restrictions. Review its current terms and use an authorized capture method.
Or skip the browser setup
ScreenshotNeo takes a screenshot through one GET request. For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. ScreenshotNeo accepts cookie or 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 and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month with no card.
Quick Recap
Official Playwright references
- Playwright screenshots for screenshot scope and output options.
- Playwright emulation for device, locale, and timezone configuration.
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.
