How to Screenshot Product Prices on Magento Sites with Puppeteer

Use Puppeteer to open the product page, wait until the price you want is visible, and capture either the page or the price element. Magento does not provide one universal price selector: inspect the rendered markup for the specific storefront and product, and confirm that configurable or other complex product options are in the intended state before taking the screenshot.

For a page image, call page.screenshot(). For a focused image, find the visible price element and call elementHandle.screenshot(). The latter scrolls the element into view if needed, but a page rerender can detach the handle, so reacquire it if capture fails. See the Puppeteer screenshots guide and ElementHandle screenshot API.

1. Install Puppeteer and prepare a product URL

Use a current Node.js installation and install Puppeteer in your project:

npm install puppeteer

Choose the exact product URL and storefront context you want to document. A screenshot shows what the browser rendered at capture time; it does not establish that a price applies to every customer, region, currency, or product configuration.

2. Inspect the price and product state

Open the product page in a browser and inspect the rendered DOM. Identify the element containing the price you intend to capture, including its currency and any regular-price or sale-price distinction. Replace the placeholder selector in the example below with a selector verified on that storefront.

Do not assume a selector works across Magento themes or stores. Simple products can have a defined price, while complex products can have price ranges; a configurable product’s displayed amount may depend on selected options. For option-dependent prices, automate the required selection first, then confirm that the storefront has updated before taking the image. Adobe documents these distinctions in its Catalog Service products query and product schema. The API data can clarify price concepts, but it is not required for a browser screenshot.

3. Capture the product price with Puppeteer

This runnable ES module example captures both the page and the price element. Set PRODUCT_URL and PRICE_SELECTOR in the environment, and replace the example URL with the product page you are authorized to access.

import puppeteer from 'puppeteer';

const productUrl = process.env.PRODUCT_URL;
const priceSelector = process.env.PRICE_SELECTOR;

if (!productUrl || !priceSelector) {
  throw new Error('Set PRODUCT_URL and PRICE_SELECTOR before running.');
}

const browser = await puppeteer.launch({ headless: true });
try {
  const page = await browser.newPage({
    viewport: { width: 1440, height: 1000 },
    deviceScaleFactor: 1,
  });

  await page.goto(productUrl, {
    waitUntil: 'networkidle2',
    timeout: 60000,
  });

  await page.waitForSelector(priceSelector, {
    visible: true,
    timeout: 30000,
  });

  // Keep surrounding product context for evidence.
  await page.screenshot({
    path: 'product-page.png',
    fullPage: true,
    type: 'png',
  });

  // Re-query immediately before capture in case the page rerendered.
  const price = await page.$(priceSelector);
  if (!price) throw new Error(`Price selector not found: ${priceSelector}`);

  await price.screenshot({
    path: 'product-price.png',
    type: 'png',
  });
} finally {
  await browser.close();
}

Run it with environment variables in your shell, adjusting the selector after inspecting the actual page:

PRODUCT_URL='https://store.example/product' PRICE_SELECTOR='.replace-with-inspected-selector' node capture-price.mjs

The URL and selector above are examples, not claims about a real Magento store. If you only need the focused image, omit the page screenshot. If you need the amount in context, keep the page screenshot or use a clip around the price and nearby product details.

4. Choose the screenshot shape and format

Option	Use	Consideration
`path`	Save the image to a file.	Use a distinct path per product or run to avoid overwriting evidence.
`type`	Select `png`, `jpeg`, or `webp` where supported.	PNG is useful for crisp text; lossy formats can reduce file size.
`fullPage`	Capture page content beyond the viewport.	Long product pages create tall images; the price may be small when viewed as a whole.
`clip`	Capture a bounded page region using coordinates and dimensions.	Coordinates are viewport-relative; keep currency and relevant option context inside the crop.
Element screenshot	Capture one selected price node.	It scrolls into view automatically; reacquire the element after page updates.

For a focused but contextual crop, measure a region that includes the price, currency, and the product or option label that explains it. A tightly cropped number alone can be ambiguous when comparing variants or sale prices.

5. Wait for the right price state

waitUntil: 'networkidle2' is a useful navigation example, as in Puppeteer’s screenshot guide, but it is not a universal guarantee that a store’s price logic has finished. Some storefronts continue background requests; others update the price after product options are selected. Wait for the specific price element to be visible, then, when appropriate, verify its rendered text or a known selected-option state.

For an option-dependent product, locate and operate the actual controls found on the page. Select the intended option, wait for the price to update, and only then capture. Avoid fixed sleeps as the sole readiness check: network and rendering time vary. If the store replaces the price node during an update, wait for the updated state and query the selector again.

6. Save useful evidence

For a price comparison or audit, record enough context to interpret each capture: product URL, capture date and time, selected variant or options, displayed currency, and relevant storefront context such as locale. These are practical recordkeeping recommendations: a screenshot documents one rendered browser state, not every possible price offered by the store.

Confirm the screenshot visibly includes the intended product and price.
Keep the currency symbol or code in frame.
For a configurable item, record the selected options that produced the amount.
Use consistent viewport dimensions and image format when comparing captures.
Preserve the original URL and capture time with the image in your own workflow.

7. cURL, Python, and Node.js alternatives

cURL and Python do not run Puppeteer. They are useful when the requirement is simply to request a screenshot from a screenshot API, while the Puppeteer implementation above is the browser-automation method for controlling the page and its rendered state.

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://store.example/product',
});
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('product-page.webp', Buffer.from(await res.arrayBuffer())));

These API calls capture the URL as rendered by the service. They do not perform the Puppeteer-specific option-selection workflow shown above. See the ScreenshotNeo API documentation for request options, including the available capture parameters.

Or skip the browser setup

ScreenshotNeo takes a screenshot from one GET request. Cookie banners are accepted and removed before capture, along with known newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.

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

It also offers an MCP server for AI agents, including 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 screenshots. Every feature is on every plan. This one-call approach is useful for capturing a page, while a Puppeteer browser flow remains appropriate when you need to select product options before capture.

Start free with 1,000 screenshots a month and no card.

Troubleshooting

Symptom	Likely cause	Fix
Price selector times out	The selector is a placeholder, the theme uses different markup, or the price is not yet rendered.	Inspect the live DOM, use a selector for the visible price, and wait for the specific state to appear.
Screenshot shows a range or unexpected amount	The product is complex or option selections have not produced the intended state.	Confirm the product type and selected options; capture the displayed range or intended configured price with its context.
Element screenshot reports a detached node	A storefront rerender replaced the element after it was selected.	Wait for the page update to settle and query the selector again immediately before capture.
Navigation hangs at network idle	Background activity can prevent the chosen network-idle condition.	Use a navigation wait condition suited to the store, then explicitly wait for the visible price and intended state.
Image omits currency or option context	The selected element or crop is too narrow.	Capture the page, a larger clip, or a containing element that includes the explanatory context.
Page screenshot is too tall or unreadable	`fullPage` includes the entire product page.	Use an element screenshot or bounded clip when only the price area is relevant.
Screenshot file is missing	The capture did not complete, the output path is unexpected, or the process exited early.	Check the thrown error and working directory; await the screenshot call and close the browser in `finally`.

Performance, reliability, and cost

A full-page capture of a long storefront page creates a larger artifact and may take longer to capture than a focused element image. Capturing just the price reduces image scope, but you must ensure the crop retains enough context. Reuse a browser process for multiple pages in a controlled batch rather than launching one per URL, and close pages and the browser when work is complete.

Reliability depends on waiting for the page’s actual price state and handling rerenders. A navigation event alone is not evidence that a configurable product has reached the desired amount. For reproducibility, keep the same viewport and locale context and record the URL, options, and capture time.

With local Puppeteer, account for the compute and maintenance of running a browser, plus storage for captured files; no price for those resources is implied here. ScreenshotNeo lists a free allowance of 1,000 shots per month with no card, followed by paid plans: 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. All features are included on every plan; see the documentation for API configuration.

FAQ

Does Magento have one standard price selector?

No. Inspect the actual storefront DOM and verify the selector against the price node you need.

Should I capture the page or only the price?

Capture the page when surrounding product context matters. Use an element screenshot for a focused price image, or a clip when you need a custom region.

Does a screenshot prove that a price applies to every shopper?

No. It records one browser-rendered state. Keep the URL, selected options, currency, storefront context, and capture time with evidence used for comparison.

Can I use ScreenshotNeo to choose a Magento variant?

The one-call screenshot captures the requested page; use the Puppeteer workflow when your task requires interacting with product options before capture.