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 minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallSet the page viewport with Playwright’s viewport option; headless mode does not need a separate screen-size launch flag. Configure use.viewport in Playwright Test, pass viewport to browser.newContext(), or call page.setViewportSize() for a single page. If the page also reads window.screen, set screen alongside viewport when creating the context.
Choose the setting for the scope you need
| Goal | Use | Important detail |
|---|---|---|
| Set a consistent size for a Playwright Test project or scope | use: { viewport: { width, height } } |
Applies as a browser-context option. Playwright Test’s documented default is 1280 × 720. |
| Set a consistent size for pages in a manually created context | browser.newContext({ viewport: { width, height } }) |
Add screen if the page depends on window.screen. |
| Resize one page | page.setViewportSize({ width, height }) |
Set it before navigation when the first layout matters. This method also resets the emulated screen dimensions. |
| Start code generation at a chosen size | npx playwright codegen --viewport-size="800,600" <url> |
This sets codegen’s viewport; configure runtime tests separately. |
| Use a named device profile | devices['Desktop Chrome'] or another device registry entry |
Presets include device parameters such as a viewport; put your own viewport after the spread to override it. |
These settings control the browser page’s emulated dimensions, not the operating system’s monitor resolution. For ordinary responsive-layout checks, the viewport width and height are usually the values to set.
Set the viewport in a manually created browser context
A context is the right place when every page in that context should start with the same viewport. Create it with the desired dimensions before opening a page or navigating. Include screen only when your application reads screen dimensions and you need to control those separately from the viewport.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch(); // Headless is the default.
try {
const context = await browser.newContext({
viewport: { width: 1440, height: 900 },
screen: { width: 1440, height: 900 },
});
const page = await context.newPage();
await page.goto('https://example.com');
console.log(await page.evaluate(() => ({
viewport: { width: window.innerWidth, height: window.innerHeight },
screen: { width: window.screen.width, height: window.screen.height },
})));
} finally {
await browser.close();
}
})();Save this as a JavaScript file in a project with Playwright installed, then run it with Node.js. If you only need to control layout, you can omit the screen option. Playwright documents screen as emulating the dimensions available to the page through window.screen; it is used when a viewport is set.
#1 Best Overall
Configure the size in Playwright Test
For tests managed by Playwright Test, configure the viewport in the runner’s use settings. The option applies to contexts associated with the runner, so individual tests in that configuration get the chosen starting size.
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
viewport: { width: 1440, height: 900 },
},
});Save the configuration as playwright.config.ts and run the suite with npx playwright test. If a test or project creates a context with explicit options, those options take precedence over the runner’s use defaults. Put the viewport in the configuration scope that matches the tests you want to affect.
Resize just one page
Use page.setViewportSize() when a single page needs a different size from the rest of its context. Playwright’s Page API recommends setting the viewport before navigating because some sites do not expect a phone-sized page to change dimensions after loading.
const page = await context.newPage();
await page.setViewportSize({ width: 800, height: 600 });
await page.goto('https://example.com');The method is convenient for a one-off page, but it resets the emulated screen dimensions too. Prefer context creation with both viewport and screen when those values both matter and need deliberate control.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use a device preset or generate code at a chosen size
Override a preset’s viewport
Device registry entries can supply viewport and device parameters. Spread the preset first, then specify the viewport you want so your value overrides the preset’s viewport.
const { chromium, devices } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const context = await browser.newContext({
...devices['Desktop Chrome'],
viewport: { width: 1440, height: 900 },
});
const page = await context.newPage();
await page.goto('https://example.com');
// Run assertions or capture the page here.
} finally {
await browser.close();
}
})();Use a preset when you want its other device parameters as well as a viewport; use a plain viewport option when you only need a particular content area. Check the preset entry you choose rather than assuming every device descriptor has the same properties.
Set codegen’s starting viewport
To open Playwright codegen at a particular size, pass its viewport argument:
npx playwright codegen --viewport-size="800,600" https://example.comThe documented 800 × 600 value is an example, not a universal recommendation. Codegen’s option controls the generation session; retain a viewport setting in your test or context configuration for repeatable runtime behavior.
Understand viewport, screen, and headless mode
viewportemulates the page’s visible content area. It determines responsive layout dimensions such as the space available to the page.screenemulates the dimensions exposed throughwindow.screen. It applies when a viewport is set and can matter to application code that checks screen properties.- Headless mode is already the default in Playwright’s browser launch API. Changing the viewport is normally a context or test configuration task, not a special headless launch setting.
Playwright documents 1280 × 720 as the default viewport in its browser-context and test configuration APIs. Set an explicit value when your test depends on a particular responsive breakpoint or when you need repeatable dimensions across runs.
Why not use viewport: null?
viewport: null opts out of the consistent viewport emulation. The resulting size depends on the host window size as determined by the operating system, which Playwright warns can make execution non-deterministic. Use it only when that host-dependent behavior is intentional; for reproducible layout tests, specify width and height.
Why not pass a window-size launch argument?
Ordinary page sizing is directly supported by the viewport APIs. Playwright’s launch and test-option documentation cautions that custom browser arguments can break Playwright functionality, so do not reach first for flags such as --start-maximized to control a web page’s viewport.
Troubleshoot a viewport that looks wrong
The page uses a different size on first load
Set the viewport before page.goto(), either in browser.newContext() or with page.setViewportSize(). A site may make initial layout decisions during navigation and may not handle a later resize as if it had started at that size.
window.screen does not match the viewport
Those are separate values. Set both viewport and screen in the context options if the page depends on screen dimensions. Remember that setting the viewport later with page.setViewportSize() also resets the emulated screen dimensions.
A configured viewport is being ignored
Check the scope where the page’s context is created. Playwright Test’s use.viewport configures runner-associated contexts, while explicit context options take precedence. If you spread a device preset, place your override afterward:
const context = await browser.newContext({
...devices['Desktop Chrome'],
viewport: { width: 1440, height: 900 },
});Runs vary in size between machines
Look for viewport: null or another configuration that leaves the dimensions dependent on the host window. Use explicit viewport dimensions for deterministic emulation instead of relying on the operating system’s window size.
A custom launch flag causes unexpected behavior
Remove nonessential browser arguments and set the page size through a documented viewport option. Playwright warns that custom browser arguments may interfere with its functionality; the viewport APIs are the normal control surface for page dimensions.
Free tools Windows power users keep installed
One-click scans. No signup required.
Performance, repeatability, and cost
Viewport configuration itself is a small setup choice; the important reliability benefit is that an explicit size gives tests a stable responsive layout to evaluate. Pick dimensions that represent the layout condition you want to test, and keep them in the context or test configuration when multiple pages need the same condition. Use page-level resizing for intentionally different cases, not as a substitute for defining a stable default.
Headless Playwright runs locally or in your own test environment, so the relevant operational cost is your browser and test infrastructure rather than a per-screenshot API charge. If you only need an image or PDF of a public page and do not need Playwright-specific test logic, a screenshot service can avoid maintaining browser setup.
Or skip the browser setup
If your goal is simply to get a website screenshot rather than run a Playwright test, ScreenshotNeo can return an image or PDF with one GET request. It is not a replacement for Playwright when you need to control a test context or inspect window.screen; it is a simpler route when the deliverable is a page capture.
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://example.com
-o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets; those cleanup steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. ScreenshotNeo also has an MCP server with screenshot tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Quick Recap
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.
