How to Screenshot a Website at a Specific Desktop Viewport for a Report

To screenshot a website at a specific desktop viewport, set the browser viewport to the required width and height in CSS pixels before opening the page, then capture the visible viewport. For example, a 1440 × 900 CSS-pixel viewport shows the page as it lays out at that desktop size. In Playwright, set the viewport when creating the browser context and call page.screenshot() without full-page mode.

Use a viewport capture when your report documents what fits on screen at those dimensions. Use a full-page capture when the report needs the entire scrollable document; it can be much taller than the specified viewport. Record the URL, browser and version, viewport dimensions, output scale, capture time, and whether the image is viewport-only or full-page. These details make screenshots easier to reproduce and interpret.

Capture a desktop viewport with Playwright

Playwright is a good fit for repeatable captures. The example below uses Node.js, opens a page at a fixed desktop viewport, waits for the page to load, and saves a PNG at CSS-pixel scale.

import { chromium } from 'playwright';

const url = 'https://example.com';
const width = 1440;
const height = 900;

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

try {
  await page.goto(url, { waitUntil: 'load', timeout: 30_000 });
  await page.screenshot({
    path: 'screenshot.png',
    type: 'png',
    fullPage: false,
    scale: 'css',
  });
} finally {
  await browser.close();
}

Save it as screenshot.mjs, install Playwright with npm install playwright, install the Chromium browser with npx playwright install chromium, then run node screenshot.mjs. Replace the example URL and dimensions with the values required by your report. The viewport is set on the browser context before navigation so the page gets the intended dimensions as it loads.

Choose the right capture settings

Setting	What it controls	When to use it
viewport.width and viewport.height	The page’s visible layout area in CSS pixels	Set these to the report’s target desktop dimensions, such as 1440 × 900.
fullPage	Whether the output extends through the scrollable document	Keep it false for a screenshot of only the visible viewport. Set it to true when you need the full document.
scale	Output image pixel density	css produces one output pixel per CSS pixel. device uses device pixels and can produce a larger image.
deviceScaleFactor	The browser context’s device pixel ratio	Set it explicitly for consistent rendering across runs. A value of 1 pairs naturally with CSS-scale output.
type	Image format	Use PNG for lossless output; Playwright also supports JPEG. Choose the format based on report requirements.
path	Where the screenshot is saved	Use a stable name or include the URL and capture date in your reporting workflow.

Playwright’s screenshot API also supports clipping to a specified page area. A clip is useful when you need a defined rectangle, but it is not a substitute for setting the viewport: the viewport controls responsive layout, while clipping controls which area is written to the image. See the Playwright screenshot documentation and Page screenshot API for the exact options.

Wait for the page state your report needs

The example waits for the page’s load event. Some sites continue rendering content after that event, while others load content only after scrolling or interaction. Pick a readiness condition that matches what the report is meant to show:

• Wait for a known element with page.waitForSelector() when a particular section signals that the page is ready.
• Use a short fixed delay only when the site has a known late-rendering behavior that cannot be detected with a selector.
• For lazy-loaded content, scroll the relevant area into view before capture. A viewport-only screenshot should still show only the requested viewport, even if you scroll to prepare content; return to the desired scroll position before taking it.

For a screenshot at the top of the page, make that position explicit before capture with await page.evaluate(() => window.scrollTo(0, 0)). If the report needs a different section in view, scroll to it and record that choice alongside the viewport dimensions.

Capture manually with Firefox

For a one-off screenshot, Firefox’s developer tools provide manual options. The screenshot toolbar can capture the entire page. To capture one element, use the Inspector’s Screenshot Node command. The web console’s :screenshot helper supports options including full-page capture, a CSS selector, a delay, an output filename, and device-pixel ratio.

1. Open the page in Firefox at the desktop window size you need.
2. Open Developer Tools and use the screenshot toolbar for a full-page capture, or select an element in the Inspector and choose Screenshot Node.
3. For more control, use :screenshot in the web console and specify the relevant options.
4. Record the browser version, viewport dimensions, scale, time, and capture type with the image.

A browser window’s outer size includes browser chrome, so it is not the same measurement as the page viewport. If the report requires an exact CSS-pixel viewport, verify the page’s viewport dimensions in the browser rather than relying on the window’s total dimensions. See Mozilla’s Web Console helpers documentation for the screenshot helper details.

Viewport, full-page, element, and pixel scale

Capture choice	What the image represents	Use it for
Viewport	The visible page area at the current scroll position	Evidence of how a page lays out at specific desktop dimensions.
Full page	The scrollable document, beyond the current viewport	A page overview or report that needs below-the-fold content.
Element	A selected component without the surrounding page context	A report focused on a widget, card, or other individual element.

Viewport dimensions are expressed in CSS pixels. Image dimensions can differ because of pixel scale: CSS scale yields one image pixel per CSS pixel, while device scale yields one image pixel per device pixel. On a high-DPI setup, device-scale output may be larger. For reports that need consistent dimensions matching the requested viewport, choose CSS scale and record it. For reports where added pixel density matters more, device scale can be appropriate; record the resulting scale so the image is not mistaken for a different viewport.

Make report screenshots repeatable

Use this checklist for each capture or batch:

• URL: Record the full URL, including relevant query parameters.
• Browser: Record the browser name and version.
• Viewport: Record width and height in CSS pixels.
• Scale: Record CSS or device scale and the device pixel ratio if applicable.
• Page state: Record the scroll position or selected element and any interactions used.
• Capture type: Say whether it is viewport-only, full-page, clipped, or an element capture.
• Time: Record the capture date and time, especially if the page changes frequently.
• Output: Keep a stable filename and note the image format.

For stronger repeatability, keep the same browser version, viewport, scale, wait condition, and page state between captures. A website can change its content, advertisements, or personalized elements over time, so matching browser settings alone does not guarantee identical pixels.

Or skip the browser setup

ScreenshotNeo takes a screenshot with one GET request. The API accepts a URL and returns an image or PDF. Its consent cleanup accepts cookie banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing state in headers. ScreenshotNeo also provides an MCP server with screenshot, page-info, and PDF tools for AI agents.

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

See the ScreenshotNeo API documentation for request options, including viewport dimensions and output settings. ScreenshotNeo supports the parameter names used by other screenshot APIs, which can make switching easier. It offers 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 screenshots. Learn about ScreenshotNeo and sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Symptom	Likely cause	What to do
The page layout does not match the requested desktop size	The viewport was set after navigation, or the browser window size was confused with the page viewport.	Set viewport on the context before opening the page. Check the page viewport in CSS pixels.
The output image has unexpected dimensions	Full-page capture, a clip, or device-pixel scale changed the output dimensions.	Set fullPage: false, remove any clip, and use scale: 'css' when dimensions should match the CSS viewport.
The screenshot is cut off below the visible area	A viewport capture was used when the report needs the whole document.	Enable full-page capture. Expect the image to be taller than the viewport.
Text or images are missing	The page had not rendered the relevant content, or lazy loading had not been triggered.	Wait for a relevant selector, scroll content into view if needed, then restore the desired scroll position before capture.
The screenshot differs between runs	The site content, browser version, page state, timing, or scale changed.	Keep capture settings and browser version fixed, use a deliberate readiness condition, and record the capture time and page state.
Playwright cannot launch Chromium	The browser binary may not be installed for the current Playwright installation.	Run npx playwright install chromium and confirm the install uses the same project environment as the script.
Navigation times out	The page is slow, unreachable, or waiting for a load condition that never occurs.	Check the URL and network access, set a suitable timeout, and choose a readiness condition that matches the page. Do not treat a timeout as evidence that a complete page was captured.

Performance, reliability, and cost

A local Playwright capture requires a browser process and enough memory for the page and image. Larger viewports and full-page images increase image dimensions and may take more time to encode or store. Capture only the area your report needs, and close the browser in a finally block so failures do not leave it running.

For reliable evidence, distinguish a successfully loaded page from a timed-out or partially rendered one. Use explicit timeouts and readiness checks, and preserve the capture metadata with the image. Automated browser capture has no per-request screenshot API charge in the workflow shown, but it does require maintaining the runtime and browser installation. A hosted screenshot API trades that setup for a per-plan service; check its current options and pricing before choosing it for a recurring report pipeline.

Frequently asked questions

Is a 1440 × 900 screenshot the same as a 1440 × 900 browser window?

No. The viewport is the page’s content area; the browser window also includes browser controls. Set or verify the viewport itself.

Should I use a full-page screenshot for a viewport report?

Only if the report needs the entire scrollable document. Full-page output represents more than what was visible in the requested viewport.

Which scale should I choose?

Choose CSS scale when the output should have one image pixel per CSS pixel. Choose device scale when higher pixel density matters, and record the choice.

Can I screenshot just one component?

Yes. Playwright supports element screenshots, and Firefox Inspector can capture a selected node. Use this when the report is about that component rather than the surrounding page.