Shopify Screenshots with Playwright: Step-by-Step

Updated 14 November 2026 · Standard formula, shown below

This guide shows you how to automate capturing full-page or element-specific screenshots of any Shopify storefront using Playwright. You’ll write a small script that opens a store URL, waits for the page to load, and saves high-quality PNG images — perfect for visual regression testing, client reports, or archiving designs. You’ll need Node.js installed and a basic familiarity with the command line.

What You’ll Need

Node.js (version 16 or later) installed on your computer
A code editor (like VS Code) and a terminal
An internet connection to install Playwright and access the storefront
The URL of the Shopify store you want to capture (public pages only, no login required)

Step-by-Step

Create a new project folder (e.g., shopify-screenshots) and open it in your terminal.
Initialize a Node project by running npm init -y. This creates a package.json file.
Install Playwright by running npm install playwright. This adds the Playwright library to your project.
Install the browser binaries with npx playwright install chromium. This downloads the Chromium browser that Playwright will control. You can also install Firefox or WebKit if needed.
Create a script file named capture.js in your project folder.

Write the basic script to launch a browser, open a page, and take a screenshot. Start with this minimal example:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://your-store.myshopify.com');
  await page.screenshot({ path: 'homepage.png', fullPage: true });
  await browser.close();
})();

Replace the URL with the actual store URL.

Run the script with node capture.js. After it finishes, you should see a homepage.png file in your project folder.
Customize the viewport to match the device you want to capture. Add a viewport option to browser.newPage():
```
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
```
Wait for the page to fully load before taking the screenshot. Use await page.waitForLoadState('networkidle') after goto to ensure all images and scripts have loaded.
Capture a specific element (like a product image or a header) by using a CSS selector. For example, to capture the first product card:
```
const element = await page.$('div.product-card');
await element.screenshot({ path: 'product-card.png' });
```

Capture multiple pages by looping over an array of URLs. This is useful for capturing a whole collection or several product pages.

const urls = ['/collections/all', '/products/example-product'];
for (const path of urls) {
  await page.goto('https://your-store.myshopify.com' + path);
  await page.screenshot({ path: path.replace(/\//g, '_') + '.png', fullPage: true });
}

Add a delay if you need to wait for animations or lazy-loaded content. Use await page.waitForTimeout(2000) before the screenshot.
Handle cookie banners that might cover content. You can dismiss them by clicking a button if present, or use Playwright’s built-in page.click() with a selector. For example: await page.click('button:has-text("Accept")').
Save screenshots in a dedicated folder to keep things organized. Use fs.mkdirSync('screenshots', { recursive: true }) and include the folder in the path.

Common Mistakes

Forgetting to install the browser – running npm install playwright alone doesn’t download the browser binaries. You must run npx playwright install.
Not waiting for the page to load – screenshots taken immediately after goto may capture a blank or partially rendered page. Always use waitForLoadState('networkidle') or a specific selector wait.
Using the wrong selector – if you target an element that doesn’t exist, Playwright will throw an error. Verify selectors using the browser’s DevTools.
Taking screenshots of pages that require login – Shopify admin pages and customer accounts will redirect to a login page. Only capture public storefront pages.
Overwriting files – if you capture multiple pages with the same filename, the last one wins. Use unique names based on the URL or timestamp.

Tips

Use fullPage: true to capture the entire scrollable page, not just the visible viewport. This is great for long product pages.
Set a consistent viewport for all captures to make comparisons easier. For desktop, 1280×800 is a common choice; for mobile, 375×667.
Use deviceScaleFactor: 2 in the viewport to capture retina-quality images, but be aware they’ll be larger in file size.
For visual regression testing, consider using Playwright’s built-in expect(page).toHaveScreenshot() in a test runner, which automatically compares against a baseline.
Add a timestamp to filenames to avoid overwriting and to track when screenshots were taken: const date = new Date().toISOString().slice(0,10);
If the store uses heavy animations, disable them by injecting CSS: await page.addStyleTag({ content: '* { animation: none !important; transition: none !important; }' });

Troubleshooting

Error: “browserType.launch: Executable doesn’t exist” – This means the browser binaries aren’t installed. Run npx playwright install chromium and try again.
Screenshot is blank or white – The page might not have loaded fully. Increase the wait time or use waitForLoadState('networkidle'). Also check if the URL is correct and the store is accessible.
Element not found when using page.$() – The selector might be wrong or the element loads dynamically. Use page.waitForSelector() before taking the element screenshot.
Script hangs or times out – Some Shopify stores have heavy third-party scripts that never fully reach ‘networkidle’. Use waitForLoadState('domcontentloaded') instead, or set a timeout: page.goto(url, { timeout: 60000 }).
Captured images look blurry or low-res – Increase the deviceScaleFactor in the viewport. For example, { deviceScaleFactor: 2 } gives 2x resolution.
Cookie banner covers content – Use Playwright to click the accept button before screenshotting. If the selector is unknown, use a text-based selector: page.click('text=Accept').

Frequently Asked Questions

Can I capture a Shopify store without installing anything?

No, you need Node.js and Playwright installed. However, you can use Playwright’s online code generator (via npx playwright codegen) to interactively record steps and generate the script for you.

Does this work for password-protected Shopify stores?

Only if you can bypass the password page. Playwright can fill in the password field if you provide it, but you must have access to the store’s password. For public stores, no login is needed.

Can I capture screenshots of mobile versions?

Yes, simply set the viewport to a mobile size (e.g., 375×667) and optionally use a mobile user agent. Playwright can also emulate mobile devices using devices['iPhone 13'].

How do I capture a specific product image instead of the whole page?

Use a CSS selector that targets the image element, for example img.product-image, and call element.screenshot(). You may need to scroll the element into view first: await element.scrollIntoViewIfNeeded().

Can I schedule screenshots to run automatically?

Yes, you can use a cron job (on Linux/macOS) or Task Scheduler (on Windows) to run your Node script at regular intervals. Alternatively, you can use a CI service like GitHub Actions to trigger captures on a schedule.

What if the store uses lazy loading for images?

Lazy-loaded images may not appear in the screenshot if they haven’t been scrolled into view. Use page.evaluate() to scroll through the page or use await page.waitForTimeout() after scrolling to let images load.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.