Set deviceScaleFactor when creating the browser context, then capture the page with fullPage: true. Set the screenshot’s scale separately: it controls whether output pixels correspond to CSS pixels or device pixels. For predictable dimensions, specify both settings explicitly.
Capture a full page at device scale factor 2
This runnable JavaScript example creates a context with a 1280 × 1024 CSS-pixel viewport and device scale factor 2, then saves a full-page PNG at device-pixel scale:
As an Amazon Associate I earn from qualifying purchases.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1280, height: 1024 },
deviceScaleFactor: 2,
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({
path: 'full-page.png',
fullPage: true,
scale: 'device',
});
await browser.close();
})();Replace the URL with the page you want. The viewport sets the emulated layout size in CSS pixels; the document’s rendered height determines how tall the full-page image is.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsWhere each setting belongs
Set deviceScaleFactor on the browser context
deviceScaleFactor configures the emulated device-pixel ratio (DPR). Pass it to browser.newContext(), not to page.screenshot(). Its documented default is 1. The viewport is a separate context setting, so specify both when capture dimensions need to be repeatable. See Playwright’s browser context options and its emulation guide.
#1 Best Overall
Request the full page and choose screenshot scale
fullPage: true asks Playwright to capture the full scrollable page rather than just the visible viewport. The independent scale option determines the mapping from page units to output pixels:
scale: 'css'produces one output pixel per CSS pixel.scale: 'device'produces one output pixel per device pixel. At a higher DPR, this can create a larger bitmap.
For Page.screenshot, the documented default scale is device. Set it explicitly rather than depending on a default. The full-page API and scale options are documented in Page.screenshot.
Choose the output scale you need
| Setting | Use it when | Documented output mapping |
|---|---|---|
scale: 'css' |
You want compact output measured in CSS pixels. | One bitmap pixel per CSS pixel. |
scale: 'device' |
You want device-pixel detail or high-DPI output. | One bitmap pixel per device pixel; the bitmap may be larger at a higher DPR. |
For example, with a 1280 CSS-pixel-wide viewport, scale: 'css' maps that CSS width to 1280 output pixels. With deviceScaleFactor: 2 and scale: 'device', the corresponding device-pixel width is 2560 pixels. A full-page capture’s height depends on the rendered document, not just the viewport height.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Python example
Set the context option when creating the context and use Python’s snake_case spelling, full_page, for the full-page screenshot option:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
context = browser.new_context(
viewport={"width": 1280, "height": 1024},
device_scale_factor=2,
)
page = context.new_page()
page.goto("https://example.com")
page.screenshot(
path="full-page.png",
full_page=True,
scale="device",
)
browser.close()Playwright’s Python API uses device_scale_factor for the context setting and full_page for full-page capture. See the Python browser context options and Python Page.screenshot API.
Set it in Playwright Test
For a test project, configure the viewport and device scale factor in the project’s use settings, then pass the desired scale when taking the screenshot:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
viewport: { width: 1280, height: 1024 },
deviceScaleFactor: 2,
},
});await page.goto('https://example.com');
await page.screenshot({
path: 'full-page.png',
fullPage: true,
scale: 'device',
});Playwright’s emulation guide shows context settings in project configuration. If you use a device descriptor, explicit viewport values can override viewport values inherited from that descriptor. See Playwright emulation.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Avoid the screenshot scale default mismatch
Page.screenshot documents device as its default scale, while Playwright Test screenshot assertions document css as their default. Do not assume these APIs produce the same output size without an explicit setting. For a file capture with page.screenshot(), specify scale: 'css' or scale: 'device' according to your needs. The assertion options are documented in Playwright Test snapshot assertions.
Troubleshoot unexpected dimensions or content
- The image is larger than expected: Check whether you selected
scale: 'device'. With DPR above 1, device-pixel output is larger than CSS-pixel output. Usescale: 'css'for one bitmap pixel per CSS pixel. - Changing the screenshot scale has no effect on emulated DPR: These are separate controls. Set
deviceScaleFactoron the context andscaleon the screenshot options. - The image only shows the viewport: Confirm that the call uses
fullPage: truein JavaScript orfull_page=Truein Python. - The output dimensions vary between captures: Explicitly set both the viewport and screenshot scale. Also account for changes in the rendered document height.
- Lazy content or changing page content is missing or inconsistent: Full-page capture requests the full scrollable page, but the documented behavior does not establish identical results for every browser engine or for pages that change or load content lazily during capture. Validate the result in the browser and on the page you actually target.
Or skip the browser setup
For a single request, ScreenshotNeo can return a screenshot without setting up a Playwright browser context. One GET request can return PNG, JPEG, WebP, or PDF. The API’s options include full-page capture, device presets and arbitrary viewports, and retina scale; see the ScreenshotNeo API documentation for request parameters and formats.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Visit ScreenshotNeo or sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
