Create Indian Marketplace Listing Thumbnails from URLs with Node.js Playwright
Build a repeatable Playwright workflow to capture marketplace listing pages or product cards as local thumbnails, with guidance on format, size and reliability.
Use Playwright to open each marketplace listing URL, wait for the page or product card to render, and save a screenshot to a distinct local file. First decide whether the thumbnail should show the visible viewport, one product card, or the full scrollable page; then set its format and resolution deliberately. The examples below use Node.js and Playwright. A browser screenshot is useful for review, documentation, or comparison, but it is not automatically suitable as a seller-upload product image.
1. Install Playwright and create a capture script
Start a Node.js project and install Playwright. The browser install command downloads the browser binaries Playwright needs.
npm init -y
npm install playwright
npx playwright install chromium
Save this as capture-listings.js. It captures each URL into a separate file, uses a stable viewport, waits for the page load event, and reports failures without stopping the remaining URLs.
const { chromium } = require('playwright');
const path = require('node:path');
const urls = [
'https://example.com/marketplace/listing-one',
'https://example.com/marketplace/listing-two',
];
(async () => {
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
viewport: { width: 1365, height: 900 },
deviceScaleFactor: 1,
});
try {
for (const [index, url] of urls.entries()) {
const page = await context.newPage();
const outputPath = path.resolve(`thumbnail-${index + 1}.png`);
try {
const response = await page.goto(url, {
waitUntil: 'domcontentloaded',
timeout: 45000,
});
if (response && !response.ok()) {
throw new Error(`HTTP ${response.status()} ${response.statusText()}`);
}
await page.screenshot({ path: outputPath, type: 'png' });
console.log(`Saved ${outputPath}`);
} catch (error) {
console.error(`Could not capture ${url}: ${error.message}`);
} finally {
await page.close();
}
}
} finally {
await context.close();
await browser.close();
}
})();
Replace the example URLs with the listing URLs you need. Run the script with node capture-listings.js. It writes PNG files in the current directory. Playwright documents page.goto() navigation and page.screenshot() file capture in its Page API.
2. Choose what the thumbnail shows
A “thumbnail” can mean different things. Set the capture area to match the destination and the information readers need to see.
| Capture | Use when | Playwright approach |
|---|---|---|
| Viewport | You need a predictable, fixed-size preview of the page as initially displayed. | page.screenshot({ path }) |
| Product card | You need just one listing tile, without surrounding page content. | Locate a stable CSS selector, then call locator.screenshot(). |
| Full page | You need the whole scrollable page for review or reference. | page.screenshot({ path, fullPage: true }) |
For a specific card, inspect the target page and choose a selector that uniquely matches the intended product. Marketplace markup can change, and there is no universal selector across Indian marketplaces. Check the match count before capturing so a changed page does not silently produce the wrong image.
const card = page.locator('[data-testid="product-card"]').first();
await card.waitFor({ state: 'visible', timeout: 15000 });
await card.screenshot({ path: 'product-card.png', type: 'png' });
Replace the sample selector with one found on the target page. Playwright’s screenshot documentation covers page and element capture; a full-page screenshot and an element target are separate capture modes. See Playwright screenshot options.
3. Wait for the content and images you need
Marketplace pages often render content after the initial document response. domcontentloaded is a quick starting point, but it does not guarantee that a product image or card is ready. Prefer waiting for the actual element or image relevant to the capture:
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 45000 });
const card = page.locator('.replace-with-card-selector').first();
await card.waitFor({ state: 'visible', timeout: 15000 });
await card.screenshot({ path: 'card.png' });
For a page screenshot, wait for a meaningful page-specific marker, such as a product title, if one is available. Avoid relying on networkidle as a universal signal: pages with analytics, streaming requests, or frequent background activity may never become idle. If the page uses lazy-loaded images, scroll the intended region into view before capturing and allow the image to load. Confirm the resulting screenshot includes the content you need.
4. Select format, dimensions, and scale
Playwright can save PNG, JPEG, or WebP screenshots. The file extension can determine the format, or set type explicitly. PNG is lossless and suitable when crisp text matters; JPEG is often smaller for photographic content; WebP can be useful when the next system accepts it. Verify the receiving system’s supported formats rather than assuming it accepts every type.
Viewport dimensions are in CSS pixels. With deviceScaleFactor: 1, a viewport screenshot is typically one image pixel per CSS pixel. A higher device scale factor produces more image pixels for the same CSS viewport, at the cost of larger files and more capture work. Choose it based on the target display and file-size limit.
// JPEG with explicit quality
await page.screenshot({ path: 'listing.jpg', type: 'jpeg', quality: 85 });
// WebP output, where supported by the installed Playwright/browser version
await page.screenshot({ path: 'listing.webp', type: 'webp', quality: 85 });
// Full scrollable page
await page.screenshot({ path: 'listing-full.png', fullPage: true });
Check output dimensions and file size after capture if a downstream uploader or catalog system has limits. Full-page images can become very tall and unwieldy; for compact previews, a viewport or product-card capture is usually easier to consume.
5. Make repeated captures more consistent
For a repeatable batch, keep the browser version, operating environment, viewport, device scale, color settings, and page readiness rule consistent. Playwright notes that screenshots can vary with host operating system, browser version, settings, hardware, power state, and headless mode. A capture from a different environment may therefore differ even when the script is unchanged. See Playwright visual comparisons.
- Use a fixed viewport and device scale factor.
- Wait for a page-specific element rather than an arbitrary delay when possible.
- Disable or wait out animations only when that is appropriate for the intended image.
- Use descriptive, unique output paths to prevent overwriting earlier captures.
- Keep a record of the input URL and capture outcome alongside batch outputs.
Do not treat a successful navigation as proof that the page is complete or that automated capture is permitted. Check the current access rules and terms for every marketplace you target. The research for this guide did not establish a current automated-capture policy for Amazon India, Flipkart, or other marketplaces.
6. Know when a screenshot is not a seller product image
A browser screenshot of a listing page can include prices, badges, navigation, text, or other page elements. Amazon India’s seller guidance concerns images uploaded as product images; it is not a general specification for internal screenshots or documentation. If your output is intended as an Amazon seller-upload image, consult the current Amazon India product image requirements.
That guidance lists JPEG, TIFF, PNG, and non-animated GIF as supported formats and recommends JPEG. It sets the longest side at 500 to 10,000 pixels, recommends 1,000 pixels or more for customer experience, and says images below 500 pixels on the longest side cannot be uploaded. For main images, it says the product should be fully shown, appear once, and occupy 85% of the image; it also restricts text, pricing, review imagery, seller-specific information, and Amazon marks, subject to limited exceptions. These rules apply when the generated output is intended as an Amazon product image. A listing-page screenshot does not become compliant product photography merely because it has the right dimensions.
7. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return an image or PDF for a URL, with capture options available in the ScreenshotNeo docs. This can be useful when you do not want to install and maintain a local browser for URL captures.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));
Replace the example target URL with your listing URL. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. 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.
8. Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Navigation times out | The page is slow, waits on background activity, or blocks the browser. | Use a suitable timeout and a targeted waitUntil such as domcontentloaded; then wait for the specific element required. Review the marketplace’s access rules. |
| Screenshot is blank or missing a product image | The capture happened before the relevant content or lazy image rendered. | Wait for the card or image to be visible and loaded; scroll the target into view if it is lazy loaded. |
| Wrong card is captured | The selector matches multiple elements or page structure changed. | Inspect the selector, assert the expected match count, and narrow it using stable page attributes. |
| Output file was overwritten | Multiple inputs used the same output path. | Generate a unique path per URL, such as a sequence number or a sanitized product identifier. |
| Image is too large or too small | Viewport or device scale does not match the destination requirement. | Set viewport and device scale intentionally; inspect resulting pixel dimensions and resize only when appropriate. |
| Capture differs between runs | Browser, host, page state, animation, or dynamic content changed. | Keep the runtime and settings consistent; wait for a stable element and manage animations where appropriate. |
| Marketplace returns an access challenge | The site may restrict automated traffic or require an interactive flow. | Do not assume retries solve this. Check the marketplace’s current terms and technical access rules before deploying capture automation. |
9. Performance, reliability, and cost
Local Playwright capture uses your machine or server resources, including browser memory and CPU. Reuse a browser and context for a batch, create a fresh page per URL, and close pages promptly. Limit concurrency to what your environment can handle; many heavy pages at once can consume substantial memory. Add bounded retries only for transient navigation failures, and record failed URLs for review rather than silently dropping them.
Playwright itself is an open-source browser automation library, but operating the workflow still has infrastructure costs: compute, storage, and maintenance of browser binaries and runtime compatibility. Screenshot size affects disk and transfer costs. A hosted screenshot API shifts browser operation to the service and charges according to its plan and billing rules. ScreenshotNeo states that only clean shots are billed; its responses include X-Page-Verdict and X-Billed headers so a caller can see the outcome. 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; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. For product details and supported capture options, see the API documentation.
10. FAQ
Can one script capture many listing URLs?
Yes. Iterate through a URL list, assign a distinct output path per input, and report each success or failure. For larger batches, use bounded concurrency and retain a record of failed captures.
Should I use a full-page screenshot for a thumbnail?
Usually only if the thumbnail is meant to show the whole page. A viewport or single product-card capture is more compact and easier to read at small sizes.
Does a successful Playwright screenshot mean the marketplace allows automation?
No. Rendering success does not establish permission. Check the current terms and technical access rules for the specific marketplace and use case.
Can I upload the listing screenshot as an Amazon product image?
Do not assume so. Amazon India’s seller image requirements apply to uploaded product images, and page screenshots can include material those requirements restrict. Review the current seller guidance and prepare compliant product photography for that purpose.


