How to Automate SERP Screenshots with Playwright

Playwright can capture a search results page in three useful ways: the visible viewport with page.screenshot(), the full scrollable document with fullPage: true, or a focused region with a locator’s screenshot() method. Set the browser context before navigation when viewport dimensions matter, then wait for a state appropriate to the page and save the image with its capture context.

These are browser capture mechanics, not permission to automate a search provider. Google’s published policy says automated queries and scraping Google Search without express permission violate its spam policies and Terms of Service, including SERP scraping for rank checks. Use an explicitly permitted route, obtain express permission where applicable, or practice on a page you control. Do not use browser automation to bypass access controls. This guide’s live-provider examples are conditional on authorization. Google Search spam policies.

1. Choose an authorized target and capture goal

First confirm that your intended automated access is allowed by the provider. Google’s policy is specific and clear; the research for this guide did not establish the rules for every other search engine or SERP provider. Check the current terms and policies for the service you intend to use. A permitted data API or an expressly authorized environment may be a better fit than automating the public results page.

Then decide what the image needs to show:

Capture target	Playwright method	Use it for	Trade-off
Visible viewport	page.screenshot()	A fixed-size, above-the-fold record	Content below the viewport is omitted
Full scrollable document	page.screenshot({ fullPage: true })	A single image of the whole document	Output height depends on the document and may be unwieldy
One element	locator.screenshot()	A result block, panel, or other selected region	You need a suitable locator, and page structure can change

For a SERP record, an above-the-fold capture is often easier to compare consistently. A full-page image is useful when the authorized page and intended analysis include results farther down. An element capture is useful for a focused visual artifact, but it does not itself establish rank or extract structured data.

2. Install Playwright and capture with JavaScript

The following is a complete Node.js example for a page you control or a target you are expressly permitted to automate. It uses Playwright’s Chromium browser, fixes the viewport before navigation, waits for the document’s load event, and saves a CSS-pixel full-page PNG. The URL is supplied as an argument so the example does not direct automated traffic at a search provider.

npm init -y
npm install playwright
npx playwright install chromium

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

const targetUrl = process.argv[2];
if (!targetUrl) {
  throw new Error('Usage: node capture.mjs <authorized-url>');
}

const browser = await chromium.launch({ headless: true });
try {
  const context = await browser.newContext({
    viewport: { width: 1365, height: 900 },
    deviceScaleFactor: 1,
    locale: 'en-US',
    timezoneId: 'UTC',
  });
  const page = await context.newPage();
  await page.goto(targetUrl, { waitUntil: 'load', timeout: 45000 });

  // Select one capture mode:
  await page.screenshot({
    path: 'serp-full.png',
    fullPage: true,
    type: 'png',
    scale: 'css',
  });

  // For just the visible viewport, use instead:
  // await page.screenshot({ path: 'serp-viewport.png', type: 'png', scale: 'css' });

  // For a focused region on a page you control, choose a locator that exists there:
  // await page.locator('[data-testid="result-block"]').screenshot({ path: 'result.png' });
} finally {
  await browser.close();
}

Run it with an authorized URL:

node capture.mjs https://example.com/search-page

Playwright’s screenshot API documents the path, type, fullPage, and scale options, as well as locator screenshots and screenshot controls. See the Playwright screenshots guide and Page API.

3. Capture a page with Python Playwright

If your automation stack uses Python, the same context and capture choices are available through the Python API. Install the package and browser, then run the script against a permitted URL.

python -m pip install playwright
python -m playwright install chromium

# capture.py
import asyncio
import sys
from playwright.async_api import async_playwright

async def main():
    if len(sys.argv) < 2:
        raise SystemExit("Usage: python capture.py <authorized-url>")
    target_url = sys.argv[1]

    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        try:
            context = await browser.new_context(
                viewport={"width": 1365, "height": 900},
                device_scale_factor=1,
                locale="en-US",
                timezone_id="UTC",
            )
            page = await context.new_page()
            await page.goto(target_url, wait_until="load", timeout=45000)

            # Full scrollable document:
            await page.screenshot(
                path="serp-full.png",
                full_page=True,
                type="png",
                scale="css",
            )

            # Viewport alternative:
            # await page.screenshot(path="serp-viewport.png", type="png", scale="css")

            # Focused region alternative for a page with a known selector:
            # await page.locator('[data-testid="result-block"]').screenshot(path="result.png")
        finally:
            await browser.close()

asyncio.run(main())

python capture.py https://example.com/search-page

4. Settle on a state before capture

A navigation event does not guarantee that every application has finished rendering or that the page is visually stable. Pick a wait condition based on the authorized page and the question the image must answer. For a page you own, prefer waiting for a meaningful element or state your application exposes:

await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
await page.locator('[data-testid="results-ready"]').waitFor({ state: 'visible' });
await page.screenshot({ path: 'results.png', fullPage: true, scale: 'css' });

The selector above is an example for an application you control; it is not a universal SERP selector. The consulted official documentation does not prescribe a universal wait recipe for search pages. Avoid treating networkidle or any single generic load event as proof that a live results page is complete. Pages may continue loading assets, update content, or show consent and interstitial states. Handle those states under the provider’s rules; do not attempt to evade restrictions.

For a page where animation makes the capture inconsistent, Playwright provides screenshot controls such as animations. It also provides mask for masking selected locators. Use these deliberately: masking or suppressing page behavior changes the artifact, so document it if people will compare captures.

5. Configure output size and image format

Viewport and device context

Set the context’s viewport before navigation if layout dimensions matter. A 1365 by 900 viewport asks the page to render at those CSS dimensions. Keep the viewport consistent between runs. Device scale factor and screenshot scale are related configuration choices, but they answer different questions: context settings influence the browser’s emulated device environment, while screenshot scale selects CSS-pixel or device-pixel output.

CSS pixels versus device pixels

• scale: 'css' produces one output pixel per CSS pixel. It is useful when you want image dimensions tied to the CSS layout and easier pixel-size comparison.
• scale: 'device' uses device-pixel resolution. Output dimensions can be larger depending on the device scale factor.

Choose one intentionally and keep it fixed across a comparison set. Changing viewport or scale can change output dimensions and appearance even if the page content is otherwise similar.

PNG, JPEG, or WebP

Playwright lets you choose a screenshot path and format. PNG is a practical default for text-heavy pages and visual inspection. JPEG or WebP can suit workflows that prioritize smaller image files; choose based on your storage and downstream tooling. The dossier does not establish a universal size or quality advantage for a format, so compare your own artifacts if file size is a constraint.

Viewport, full page, or element details

// Visible viewport
await page.screenshot({ path: 'viewport.png', type: 'png' });

// Full scrollable document
await page.screenshot({ path: 'full.png', fullPage: true, type: 'png' });

// A selected element
await page.locator('.result-card').screenshot({ path: 'result-card.png' });

The selector in the final example is illustrative. Locator capture requires a matching element. Prefer stable selectors on pages you control; selectors based on incidental markup can break when the page changes.

6. Make captures comparable and useful as evidence

A screenshot records what a browser rendered in one context. Google says results can depend on location, language, and device, so a capture is not a universal ranking view. For comparisons or audit trails, store a small metadata record beside each image:

• Query or page identifier, where recording it is permitted.
• Capture timestamp and timezone.
• Provider and the authorized access route.
• Locale and any location assumptions.
• Browser engine and version, where available in your environment.
• Viewport dimensions, device scale factor, screenshot scale, and output format.
• Wait condition and whether capture was viewport, full page, or a locator.
• Whether animations, masks, or other screenshot options were used.

Do not label a screenshot as an objective rank independent of its conditions. Keep query, time, locale or location, device, viewport, and browser assumptions attached to the artifact. See Google’s explanation of how Google Search works for context on factors that can affect results.

7. Common problems and fixes

Symptom	Likely cause	Fix
Browser executable missing	The Playwright package is installed but its browser binary is not.	Install the browser for the engine you use with npx playwright install chromium or python -m playwright install chromium.
Navigation times out	The page did not reach the selected navigation state within the timeout, or access is blocked or unavailable.	Check the URL and permitted access route. Choose a state appropriate to the page and set a considered timeout. Do not treat a timeout as authorization to bypass a block.
Screenshot is blank or incomplete	The page may not have rendered the relevant state before capture, or it may show an interstitial or consent state.	Wait for an application-relevant visible state on pages you control. Inspect what actually rendered and handle consent/interstitial states according to provider policy.
Locator screenshot fails	The selector does not match a visible element, or the page structure changed.	Verify the locator against the authorized page and wait for it to become visible. Prefer stable application-owned selectors where possible.
Images differ in size across runs	Viewport, full-page height, device scale, or screenshot scale differs.	Fix the context and scale. Full-page images naturally vary with the document height.
Images look different despite matching dimensions	Browser, locale, device context, page state, dynamic content, or timing may differ.	Record and stabilize the relevant conditions. A screenshot captures a rendered moment, not a timeless page state.
Automated access receives a challenge or denial	The provider may disallow the access or require a different authorized route.	Stop the disallowed automation and consult the provider’s current policy or permitted access options. Do not try to bypass bot checks or access controls.

8. Performance, reliability, and cost

Playwright captures locally in the browser process you run, so there is no per-screenshot API charge inherent in calling its screenshot method. Your actual costs depend on your browser infrastructure, execution time, storage, and operational needs; no benchmark or universal cost estimate is established here.

Viewport screenshots generally produce smaller artifacts than full-page captures of long documents, while element screenshots focus output on one region. Full-page captures can become very tall, and their output dimensions depend on the rendered document. Use the smallest capture target that answers the question, and use a consistent format and scale to keep artifacts manageable.

For reliability, make each run explicit about its target, context, wait condition, and output path. Handle navigation and capture errors in your calling workflow, retain metadata, and avoid assuming that a successful browser call means the provider permits the request or that the page represents every user’s results. Playwright’s built-in screenshot support is sufficient for the capture mechanics; a separate capture product is not inherently required.

9. Or skip the browser setup

For an authorized page capture, ScreenshotNeo offers a one-request screenshot API. It is a website screenshot API and MCP server for developers from ScreenshotNeo. Review the API documentation for request parameters and current usage details.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.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://example.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. These capabilities do not grant permission to automate a search provider; use an authorized target and route.

Sign up for 1,000 free screenshots a month, with no card required.

10. FAQ

Does taking a screenshot with Playwright make Google SERP automation allowed?

No. Playwright’s API describes browser capabilities; Google’s published policy says automated queries and scraping Google Search without express permission violate its policies and Terms of Service. Check the policy and use an authorized route.

Can I capture only the first screen of results?

Yes. Call page.screenshot() without fullPage: true to capture the visible viewport.

Can Playwright capture one result rather than the whole page?

Yes. Call screenshot() on a locator for a matching element. You need a suitable selector, and the selected page structure may change.

Does a full-page screenshot prove a ranking?

No. It records one rendered page in one context. Preserve the query, time, locale or location assumptions, device, viewport, and browser conditions when interpreting it.

Do I need a separate screenshot service?

No. Playwright includes screenshot methods. A hosted API such as ScreenshotNeo is an option when its capture workflow fits your authorized use case.