The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Use Playwright’s built-in device descriptor to emulate a named phone, then create the page inside a browser context configured with that descriptor. For a custom mobile breakpoint, spread a descriptor first and override its viewport afterward. Capture the whole document with fullPage: true; choose screenshot scale deliberately because device-pixel output can be larger than CSS-scale output.
What Playwright mobile emulation changes
Mobile emulation is more than setting a narrow browser window. A Playwright device descriptor supplies a group of settings, including user agent, screen size, viewport, touch support, and device scale factor. Those settings can affect responsive layout, mobile-specific behavior, and the dimensions of the resulting screenshot. Playwright’s documentation describes the capability as emulating a real device such as a mobile phone or tablet, but an emulated browser session is not proof that a page was rendered on physical handset hardware.
Use an official preset as a starting point when a test needs to represent a named phone. Use a custom profile when the question is specifically about a breakpoint or combination of settings that does not match a preset.
Emulate a named phone and take a full-page screenshot
The following TypeScript example uses the built-in iPhone 13 descriptor. Create the browser context with the descriptor before creating or navigating the page so the mobile settings apply from the start.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
import { chromium, devices } from 'playwright';
const browser = await chromium.launch();
try {
const context = await browser.newContext({
...devices['iPhone 13'],
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'iphone-13.png', fullPage: true });
await context.close();
} finally {
await browser.close();
}Install Playwright in the project before running the example. The important order is context configuration, page creation, navigation, then capture. Applying mobile settings to a context means the page is created with that configuration rather than trying to retrofit it after the site has loaded.
What fullPage does
fullPage: true captures the full scrollable document rather than just the currently visible viewport. It changes the image’s document coverage, not the emulated phone profile. Omit it when the test is intended to compare only what a user sees without scrolling.
Use a custom mobile viewport
For a breakpoint-specific test, set the viewport explicitly. The custom values must come after the spread descriptor: the descriptor itself may already define a viewport, and values placed before the spread can be overwritten.
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [{
name: 'custom-mobile',
use: {
...devices['Desktop Chrome'],
viewport: { width: 390, height: 844 },
isMobile: true,
hasTouch: true,
userAgent: 'custom mobile user agent',
deviceScaleFactor: 3,
},
}],
});This is a controlled custom profile, not a named physical phone preset. The example chooses a 390-by-844 CSS-pixel viewport and a scale factor of 3; those values are explicit test settings, not a claim that every phone has those dimensions. The configured project is for Playwright Test. If you are using the standalone Playwright library instead, apply the same relevant properties to browser.newContext().
Recommended Free Tools
Choose the profile to match the test question
- Named-device reproduction: Start with the closest available preset, such as
devices['iPhone 13']ordevices['Pixel 9 Pro']. - Breakpoint coverage: Set a deliberate viewport after spreading a baseline descriptor. Keep other descriptor properties unless the test calls for changing them.
- Custom browser identity or touch behavior: Override the user agent or touch-related settings only when those are part of the behavior under test. Changing them can make the profile less representative of the named preset.
Understand viewport, device scale, and screenshot dimensions
Three choices are easy to conflate: the emulated viewport, the device scale factor, and the screenshot’s scale option. The viewport controls the CSS-space area available to the page. The descriptor’s deviceScaleFactor represents the device’s pixel density setting. The screenshot scale controls how CSS pixels are written into the image.
| Setting | What it controls | When to choose it |
|---|---|---|
viewport |
The page’s visible area in CSS pixels, such as the custom profile’s 390 by 844 dimensions. | Set it to the breakpoint or device profile the test needs to exercise. |
deviceScaleFactor |
The emulated device’s pixel-density setting, provided by a descriptor or configured explicitly. | Retain the preset value for a named-device baseline; override it only when density itself is being tested. |
Screenshot scale |
How screenshot pixels correspond to CSS pixels. 'device' produces one image pixel per device pixel; the default CSS scale is useful for compact, stable visual-regression artifacts. |
Use device scale when pixel-level device rendering is desired; use CSS scale when a smaller artifact and consistent CSS-space comparison are more useful. |
With a higher device scale, an image can contain more pixels even though its CSS viewport is unchanged. That can increase image dimensions and file size. For comparisons, keep the same browser engine, Playwright version, viewport, descriptor, and screenshot scale across runs; otherwise, a visual difference may reflect a changed test setup rather than a site change.
Recommended workflow for reliable comparisons
- Pick a baseline. Use the closest official device preset when the test represents a named phone. Use a custom viewport for a breakpoint not represented by a preset.
- Create the configured context or test project. Spread the descriptor into the configuration. Put custom overrides after the spread so they take effect.
- Keep the profile coherent. Preserve the preset’s user agent, mobile behavior, touch support, and scale factor unless the purpose of the test requires a change.
- Navigate after configuration. Create the page from the configured context, then load the target URL.
- Choose the image coverage. Use
fullPage: truefor the whole scrollable document, or omit it for the visible viewport. - Choose the output scale. Use the default CSS scale for compact visual regression images or
scale: 'device'when device-pixel rendering is the goal. - Hold comparison conditions steady. Use the same browser engine and Playwright version when reproducible visual diffs matter.
Common problems and how to fix them
The screenshot still looks like desktop
Check that the page was created from the configured context and that navigation happened after the context was configured. A narrow viewport alone does not reproduce the full bundle of mobile settings. For a custom profile, check that isMobile and hasTouch are set when needed, and that your custom properties come after the descriptor spread.
The viewport override appears to be ignored
Inspect the order of the configuration. A descriptor can define its own viewport, so this ordering is significant: ...devices['Desktop Chrome'] first, then viewport: { width: 390, height: 844 }. If the spread comes later, it can replace your custom dimensions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The screenshot is unexpectedly large or small
Distinguish CSS viewport size from image pixel dimensions. Check the profile’s deviceScaleFactor and the screenshot’s scale setting. If you want a compact artifact for visual regression, leave the screenshot on CSS scale; use scale: 'device' when one image pixel per device pixel is important.
The image stops at the visible area
Set fullPage: true in page.screenshot() to capture the full scrollable page. If you intentionally need only the first screen, leave the option off.
The emulated result does not match a real phone
Emulation represents browser behavior under configured settings; it does not establish how the site renders on a physical handset. Treat it as a repeatable browser test profile, and validate on actual hardware separately if hardware-specific behavior is material to the release.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If the goal is a screenshot from a URL rather than a Playwright test of mobile browser behavior, ScreenshotNeo can return a screenshot or PDF from one GET request. It is a website screenshot API and MCP server for developers. It is not a substitute for Playwright device emulation when you need to control a browser context or test responsive behavior.
Best Value
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 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan.
Cost, repeatability, and limits
Playwright’s emulation is useful when you need control over a browser profile and want to run the capture as part of a test workflow. Keep the profile and software versions fixed to make comparisons more interpretable. A screenshot is evidence of what that configured browser rendered, not a guarantee of identical behavior across browser engines, software versions, or real devices.
For screenshot-only API use cases, ScreenshotNeo lists a free allowance of 1,000 shots per month with no card, and paid plans from $5 for 3,000; all plans include every feature, and yearly billing gives two months free. See ScreenshotNeo for service details. Those API plan figures are separate from the Playwright setup described above.
Frequently Asked Questions
Can a Playwright mobile screenshot prove that a site works on a real iPhone or Android phone?
No. It demonstrates the output of a configured browser-emulation profile, not a capture from physical handset hardware. Use a real device when hardware-specific behavior must be verified.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Should I use a device preset or a custom viewport?
Use a preset to represent a named device baseline. Choose a custom viewport when the target is a specific responsive breakpoint or profile that the available preset does not represent.
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.
