How to screenshot a Google SERP at a fixed viewport size

To screenshot a Google SERP at a fixed viewport size, set both the viewport width and height before loading the results page, then capture the visible viewport rather than the full page. For one capture, use Chrome DevTools Device Toolbar. For repeatable automated captures, use Playwright and set the viewport before navigation.

What “fixed viewport size” means

The viewport is the browser page area in which the site is rendered. It is not necessarily the same as the outer browser window: browser chrome, DevTools, and operating-system scaling can affect the relationship. Specify both width and height in CSS pixels to define the visible area you want to capture.

A viewport screenshot contains only what is visible in that area. A full-page screenshot extends below the fold and has different dimensions, so it is not a substitute when the deliverable must have a fixed visible viewport. Chrome and Playwright document these as separate capture modes.

Capture one SERP with Chrome DevTools

Open Chrome and navigate to the Google results page you want to capture, or open DevTools first.
Open DevTools and enable the Device Toolbar.
Choose Responsive mode, then enter the required width and height in the viewport fields.
Check that the intended query and page state are visible. If a consent prompt appears, note that as part of the capture conditions.
Open the Device Toolbar’s More options menu and choose Capture screenshot.

Choose Capture a full size screenshot only when you need the page content below the viewport. Chrome’s Device Mode documentation describes the responsive viewport fields and the two screenshot commands. Chrome DevTools Device Mode.

For later comparison, keep a note with the image: viewport width and height, browser and version, device pixel ratio or output scale, query, and capture date. This makes the setup interpretable; it does not guarantee that Google will return identical results in a later capture.

Automate fixed-size captures with Playwright

Set the viewport when creating the page or browser context, or call page.setViewportSize() before navigating. Capturing after navigation can trigger a resize that some sites do not expect. The example below uses a desktop-sized 1280 by 900 CSS-pixel viewport; replace those values and the query URL as needed.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 1280, height: 900 },
  deviceScaleFactor: 1,
});

try {
  const query = new URLSearchParams({ q: 'site:example.com screenshot API' });
  await page.goto(`https://www.google.com/search?${query}`, {
    waitUntil: 'domcontentloaded',
    timeout: 60000,
  });
  await page.screenshot({
    path: 'serp.png',
    fullPage: false,
    scale: 'css',
  });
} finally {
  await browser.close();
}

Install Playwright in your project with npm install playwright. Depending on your environment, install its browser binaries with npx playwright install chromium. The script writes a viewport screenshot to serp.png.

Use fullPage: false for the visible viewport. Set scale: 'css' to make the output map one image pixel to one CSS pixel. Playwright’s device scale uses device pixels and can produce larger output on a high-DPI setup. If using deviceScaleFactor other than 1, record it as part of the capture configuration. See the Playwright Page API and Playwright screenshot documentation.

Viewport and output options

Choice	Use it when	Effect
Width and height	You need a specified visible page area	Set both dimensions in CSS pixels before navigation.
Viewport screenshot	The image must show only the visible SERP	In Playwright, use `fullPage: false`; in DevTools, use Capture screenshot.
Full-page screenshot	You need below-the-fold content	Output extends beyond the visible viewport; its dimensions are not the requested viewport size.
CSS-pixel scale	You need predictable CSS-pixel output dimensions	Playwright’s `scale: 'css'` maps one screenshot pixel to one CSS pixel.
Device-pixel scale	You need output at device-pixel resolution	Playwright’s `scale: 'device'` can increase output dimensions on high-DPI displays.

Chrome’s responsive fields accept the dimensions you enter; its documentation’s 480 by 415 example is an illustration of the interface, not a standard SERP size. Choose the dimensions required by your task rather than treating that example as a recommendation.

Make repeat captures easier to interpret

Fix the viewport first. Set width and height before loading the query.
Keep the capture mode consistent. Use viewport capture for viewport comparisons; do not mix in full-page captures.
Record pixel scale. Note CSS-pixel versus device-pixel output and the device scale factor when applicable.
Record the conditions. Save the query and capture date, and note visible consent prompts or other page state relevant to your use.
Keep the original output. Avoid resizing or cropping it if you need to preserve the captured dimensions.

A controlled viewport makes the capture setup repeatable, but it does not make the SERP itself permanent. The available sources describe browser capture behavior and do not establish that results will stay identical across captures.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a screenshot or PDF; its API options include viewport dimensions. See the ScreenshotNeo site and API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url='https://www.google.com/search?q=screenshot+API' \
  -d width=1280 \
  -d height=900 \
  -o serp.webp

Cookie banners and consent prompts, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Troubleshooting

Problem	Likely cause	Fix
Image dimensions do not match the requested viewport	The capture used device-pixel scale or a device scale factor above 1, or captured the full page.	Use viewport capture, set Playwright `scale: 'css'`, and verify the configured scale factor.
The screenshot includes content below the fold	Full-page capture was selected.	In DevTools choose Capture screenshot, not Capture a full size screenshot; in Playwright use `fullPage: false`.
The page layout changes when dimensions are applied	The viewport was changed after the page loaded.	Set the viewport on page/context creation or call `setViewportSize()` before navigation.
Playwright times out while navigating	The page did not reach the selected navigation condition before the timeout.	Use an appropriate wait condition and timeout for your workflow. The example waits for `domcontentloaded`; this does not guarantee that every later page change has finished.
Two captures differ despite matching dimensions	A fixed viewport controls geometry, not the result content or all page state.	Record query and date, and document the capture conditions. Do not interpret matching dimensions as proof of identical SERPs.
DevTools fields are missing	The Device Toolbar is not enabled or Responsive mode is not selected.	Enable the toolbar in DevTools and select Responsive mode before entering dimensions.

Performance, reliability, and cost

For a single manual capture, DevTools avoids writing and maintaining an automation script. For repeated captures, Playwright makes viewport, scale, output path, and navigation settings explicit in code. The dossier provides no comparative runtime benchmarks, so choose based on whether the workflow is one-off or needs automation.

Playwright adds browser installation and execution to the workflow; keeping a fixed browser version and recording it helps make the setup easier to reproduce. Neither a fixed viewport nor a successful screenshot call guarantees that Google’s result content is unchanged. The documented sources do not provide SERP stability guarantees, sharing rules, or a cost comparison for these browser methods.

FAQ

Should I use a phone-sized viewport?

Only if that is the size your task requires. The documentation does not define a standard viewport size for Google SERPs.

Does fixed viewport mean the same SERP every time?

No. It fixes the browser’s visible dimensions. Record the query and capture date because the viewport setting alone does not establish result consistency.

Can I use a full-page screenshot and crop it later?

You can, but it is not the direct viewport capture described here. Use viewport capture when the required image is the visible SERP at fixed dimensions.