BrowserStack Screenshots vs Playwright for Automated Website Captures

Short answer: choose Playwright when screenshots belong inside your browser tests and you want local visual assertions with reference images stored in your project. Choose BrowserStack Screenshots when you need hosted captures of a URL across selected browser and operating system configurations. Choose Percy when you need cloud visual comparisons and a shared review and baseline approval workflow. If your main need is a screenshot API with clean captures and usage-based billing, try ScreenshotNeo first.

These tools overlap, but they are not interchangeable. Playwright is an automation framework with screenshot and testing APIs. BrowserStack Screenshots is a hosted URL capture workflow. BrowserStack Percy is a separate visual testing service that can integrate with Playwright.

1. Quick comparison

Need	Best fit	Why
Capture pages during scripted browser tests	Playwright	Capture directly from a page in the test environment.
Check for visual changes using project-owned reference images	Playwright Test	toHaveScreenshot() compares a capture against a local snapshot.
Capture a URL on selected hosted browser and OS configurations	BrowserStack Screenshots	Choose browser, version, OS, resolution, device, and wait time in the hosted workflow.
Review visual changes as a team and approve a new baseline	Percy	Cloud builds provide a shared comparison and approval workflow.
Get a screenshot file from one API request	ScreenshotNeo	It returns an image or PDF; cookie banners, popups, and chat widgets are removed before capture.

Playwright visual comparisons, the BrowserStack Screenshots API, and Percy visual analysis describe distinct workflows. BrowserStack Screenshots is for image generation; do not assume it includes Percy’s visual review and baseline approval features.

2. Capture a website with Playwright

Playwright’s Page API can save the current page to an image file. The following runnable Node.js example installs Playwright, opens a URL in Chromium, captures a full-page PNG, and closes the browser.

npm init -y
npm install playwright
npx playwright install chromium

// capture.mjs
import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto(url, { waitUntil: 'networkidle', timeout: 60_000 });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
  console.log('Saved screenshot.png');
} finally {
  await browser.close();
}

node capture.mjs https://example.com

Choose the right readiness condition

page.goto() supports load-state choices. networkidle can be useful for pages that settle after requests finish, but pages with analytics, polling, or long-lived network connections may never become idle. For those sites, wait for a meaningful element or use a deliberate delay instead:

await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60_000 });
await page.locator('main h1').waitFor({ state: 'visible', timeout: 15_000 });
await page.screenshot({ path: 'screenshot.png', fullPage: true });

Capture one element or a viewport

Use a locator screenshot when you only need a component, such as a pricing table. Omit fullPage to capture the current viewport rather than the whole document.

await page.locator('.pricing-table').screenshot({ path: 'pricing.png' });
await page.screenshot({ path: 'viewport.png' });

3. Add visual assertions with Playwright Test

A file capture is not itself a regression test. Playwright Test’s toHaveScreenshot() creates a local reference on the first run and compares later captures against it. The assertion waits for two consecutive screenshots to match before comparing with the expectation.

npm install --save-dev @playwright/test
npx playwright install chromium

// tests/home.spec.js
import { test, expect } from '@playwright/test';

test('home page visual baseline', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('home.png', { fullPage: true });
});

npx playwright test

Review and commit the generated reference images as part of your project’s normal code review. If an intentional design change updates the screenshot, inspect the diff and update the reference deliberately; do not accept every changed baseline automatically.

Playwright notes that the host operating system and other environment details can affect rendering. Its guidance is to generate and check baselines in a consistent environment. Keep the browser version, operating system, fonts, viewport, device scale factor, and test data consistent between baseline creation and comparison. See Playwright’s visual comparison guide and Page API.

4. Capture a URL with BrowserStack Screenshots

BrowserStack Screenshots is suited to hosted URL captures where you select the target browser and operating system configuration. Its API documentation lists settings such as OS and version, browser and version, device and orientation, resolution, image quality, local testing, and wait time. Use the current API documentation for the request schema and authentication details; these settings and plan entitlements can change.

1. Confirm your subscription includes an Automate plan with browsers. The Screenshots API requires this; Live-only customers can use Screenshots through the webpage.
2. Choose the URL and the browser, OS, version, and device configurations that matter to your users.
3. Set the resolution and wait time, and enable local testing if the target site is only reachable from your environment and the workflow supports it.
4. Submit the capture request and collect the resulting image according to the current API response format.
5. If you need change detection and approvals, add a visual comparison workflow such as Percy; do not treat the capture API itself as a baseline approval system.

Because the API request and response details are service-specific and may change, use the official BrowserStack Screenshots API documentation for a copyable request. The central decision is whether you need managed browser selection for captures or a test suite that you control in Playwright.

5. Where Percy fits

Percy adds cloud visual builds and a shared review process to screenshot testing. Its documented Playwright integration can wrap existing toHaveScreenshot() calls and send captures to Percy for review. Teams can inspect diffs and approve a build to promote a baseline. That makes Percy a complement to Playwright when local assertions alone do not provide the review workflow the team needs.

Percy uses managed rendering infrastructure. Its documentation says each browser capture counts as a separate screenshot against monthly usage. System fonts, controls, scrollbars, and OS rendering can affect comparisons; if matching a specific operating system is the goal, BrowserStack documents managing browsers through Automate. Check the current Percy visual analysis documentation, cross-browser settings, and Playwright integration guidance for current setup requirements and plan terms.

6. Choose based on the workflow

Question	Choose Playwright when…	Choose BrowserStack Screenshots when…	Consider Percy when…
Where should browser automation live?	You want it in your application’s test suite and CI environment.	You want a hosted URL capture workflow.	You want cloud builds connected to a test workflow.
How should environments be selected?	Your Playwright browser projects and runner environment cover the needed matrix.	You need to select hosted OS, browser, version, resolution, or device configurations.	You want managed rendering; use Automate when explicit OS/browser selection is needed.
Where do visual references live?	As local snapshot files owned and updated by the project.	The Screenshots API generates images; it is not itself a baseline approval workflow.	In a cloud build and approval workflow.
Who reviews differences?	Your team reviews test output and snapshot changes in its existing development workflow.	Your capture workflow handles images; add a comparison layer if needed.	Reviewers inspect and approve visual changes in Percy.

Before deciding, write down the required browser and OS matrix, who owns baseline changes, whether captures need to be compared or merely generated, how consistent the render environment must be, and the expected capture volume. No universal speed or price winner follows from these products’ documented roles; total cost depends on usage, selected environments, and current plan terms.

7. Or skip the browser setup

If you need an image or PDF of a public page without maintaining browser automation, ScreenshotNeo is the screenshot API to try first: it provides clean captures, bills only clean shots, and has a lower paid entry plan than the plans listed here for its service.

One GET request returns the capture. For the full list of parameters and response behavior, see the ScreenshotNeo API documentation.

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}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

• Cookie and consent banners are accepted or removed before capture; known newsletter popups and chat widgets are also removed. Each cleanup step can be turned off.
• Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers identify the page verdict and billing status.
• An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
• The free plan includes 1,000 shots each month without a card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Every feature is available on every plan.

Sign up for ScreenshotNeo’s free 1,000 screenshots per month, with no card required.

8. Reliability, performance, and cost considerations

Rendering reliability

• Playwright: control the browser and test environment, but keep environments stable. Dynamic content, system fonts, animation, time, and test data can create diffs unrelated to a code change.
• BrowserStack Screenshots: hosted configurations reduce the need to provision each selected browser locally, but availability and plan access depend on your subscription and current service terms.
• Percy: shared builds make review easier, while managed rendering can differ from a specific target OS. Use the documented environment choices that match the comparison goal.

Performance

Capture time depends on page load behavior, readiness conditions, image loading, viewport, full-page length, and the number of browser configurations. A full-page capture or a large matrix naturally involves more rendering work than one viewport in one browser. Avoid waiting for network idle on pages with continuous requests; wait for a stable page element when that better reflects readiness. No official comparative benchmark establishes a general speed winner.

Cost

Playwright’s direct cost is tied to the compute and maintenance of the machines running your suite; it also requires engineering time to maintain browser setup and snapshots. BrowserStack and Percy costs depend on current plans and usage entitlements. Percy documents each browser capture as a separate screenshot against monthly usage. Confirm current plan limits before committing to a matrix or a high-volume workflow.

9. Troubleshooting

Symptom	Likely cause	Fix
Playwright screenshot differs on another CI runner	OS, fonts, browser build, viewport, device scale, or rendering environment changed.	Generate and compare references in the same controlled environment; pin browser and runner dependencies where practical.
Navigation times out while waiting for network idle	The site has polling, analytics, streaming, or other requests that remain active.	Use domcontentloaded or load, then wait for the specific content needed for the capture.
Screenshot is blank or incomplete	The capture ran before the relevant content appeared, or the page failed to load.	Wait for a visible page element, check navigation errors and console output, and confirm the target URL is reachable from the runner.
Full-page capture misses lazy-loaded images	Images are only requested as the page scrolls.	Scroll through the relevant page before capture or use an approach that triggers lazy content, then wait for images to finish loading.
Visual assertion fails after a design change	The reference image represents the previous design.	Inspect the diff, confirm the change is intended, and update the baseline through the team’s review process.
BrowserStack Screenshots API access is unavailable	The subscription may be Live-only or may not include the required Automate browser entitlement.	Check the current Screenshots API requirements; Live-only customers can use the Screenshots webpage.
Percy usage is higher than expected	Each browser capture counts separately against monthly usage.	Reduce unnecessary browser configurations and check current usage and plan terms.

10. Frequently asked questions

How do I take a screenshot in Playwright?

Navigate with a Playwright page, wait for the content you need, then call page.screenshot(). Pass a path to save a file; set fullPage: true for the whole document.

Can Playwright compare screenshots?

Yes. Playwright Test’s toHaveScreenshot() compares captures against local reference snapshots and waits for consecutive captures to stabilize before comparison.

Can I capture the same URL across browsers with BrowserStack?

Yes. BrowserStack Screenshots accepts browser and OS configuration choices, along with settings such as resolution, device, orientation, and wait time. Check API access and current plan requirements.

Does BrowserStack Screenshots include Percy?

They are distinct products and workflows. Screenshots generates captures; Percy provides cloud visual comparison and baseline review.

Which should a small team start with?

Start with Playwright if you already have browser tests and can maintain local baselines. Start with hosted capture if you need selected remote environments without building that capture workflow yourself. Add Percy when shared cloud review and approvals solve a real team need.