What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use Playwright’s mobile device emulation, then call page.screenshot(). In Playwright Test, put a device preset such as devices['iPhone 13'] in a project’s use settings. In a standalone script, spread the same preset into browser.newContext(). The preset supplies a coordinated mobile-like viewport, user agent, screen size and touch configuration. It is browser emulation, not proof that a physical iPhone rendered the page.
For a normal viewport image, omit fullPage. For the entire scrollable document, set fullPage: true. Choose scale: 'css' for compact CSS-pixel output or scale: 'device' for device-density output, which can be substantially larger.
Choose the capture workflow first
There are two different meanings of “mobile screenshot” in Playwright. Pick the one that matches the evidence you need.
| Workflow | What it captures | Setup | Best fit | Important boundary |
|---|---|---|---|---|
| Emulated mobile browser | A page rendered with mobile-like browser parameters | A Playwright device preset and browser project or context | Responsive-layout review and repeatable browser tests | It does not establish rendering on physical hardware |
| Connected Android automation | The Android device screen, including Chrome for Android or a WebView page | An Android device or AVD, authenticated ADB and Android-specific Playwright setup | Device-specific or WebView automation | Playwright documents this support as experimental and lists limitations |
The standard path for most responsive screenshots is emulation. See Playwright’s emulation guide for the preset model. Use the Android path only when the actual Android device or WebView is part of the requirement.
#1 Best Overall
Prerequisites and project setup
Install Playwright
In a Node.js project, install Playwright or the Playwright Test package, then install the browser binaries required by your project. Keep the package and browser versions aligned, especially in CI, so the same preset produces repeatable results.
Decide where the image should be written
Use an explicit path when you need a named artifact such as mobile.png. PNG is the default. JPEG and WebP are also available; the quality option applies to JPEG and WebP, not PNG.
Configure a mobile project in Playwright Test
A project lets every test in a group use the same emulated device settings. The spread must come before any override so your value wins.
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'Mobile Safari',
use: { ...devices['iPhone 13'] },
},
],
});This follows the configuration pattern documented for Playwright use options. The preset includes viewport-related values and other browser parameters. If one test needs a different viewport, override it in configuration or call page.setViewportSize(); Playwright’s emulation documentation describes both approaches.
Capture a viewport or a full page in a test
import { test } from '@playwright/test';
test('capture the mobile home page', async ({ page }) => {
await page.goto('https://example.com');
await page.screenshot({ path: 'artifacts/mobile.png' });
});
test('capture the complete scrollable page', async ({ page }) => {
await page.goto('https://example.com');
await page.screenshot({
path: 'artifacts/mobile-full.png',
fullPage: true,
});
});With fullPage omitted, Playwright captures the visible viewport. With fullPage: true, it captures the page’s scrollable document. The Page API documents these screenshot options.
Capture a mobile screenshot from a standalone script
Use this form when you do not need the test runner’s fixtures, retries or artifact management.
const { chromium, devices } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
...devices['iPhone 13'],
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'mobile.png' });
await browser.close();
})();The device preset configures emulated browser conditions. It does not turn the run into a physical-iPhone capture.
Control the image you produce
Viewport versus full document
- Visible viewport: omit
fullPage. This is usually the clearest representation of what a mobile visitor sees without scrolling. - Whole document: set
fullPage: true. Long pages can create very tall files and take longer to render and encode.
Choose output scale deliberately
scale: 'css'creates one image pixel per CSS pixel. It keeps files smaller and makes pixel dimensions easier to compare with layout specifications.scale: 'device'creates one image pixel per device pixel. It preserves a high-density style of output but can make screenshots much larger.
await page.screenshot({
path: 'mobile-device-scale.webp',
type: 'webp',
quality: 82,
scale: 'device',
});Use quality only with JPEG or WebP. PNG ignores that setting. If a downstream visual-diff system expects stable dimensions, keep the same preset, viewport override and scale for every run.
Recommended Free Tools
Capture one element
For a component rather than the entire page, use a locator screenshot:
await page.locator('[data-testid="pricing-card"]').screenshot({
path: 'pricing-card.png',
});When you need an arbitrary rectangle instead of a DOM element, use the page screenshot API’s clip option:
await page.screenshot({
path: 'header-region.png',
clip: { x: 0, y: 0, width: 390, height: 180 },
});Keep the clip coordinates in the same CSS-pixel coordinate system as the page. If the target is a responsive component, an element locator is generally less brittle than hard-coded coordinates.
Override only what differs
Spread the preset first, then replace only the setting you need. For example, a project can preserve the preset’s user agent and touch behavior while using a custom viewport:
const context = await browser.newContext({
...devices['iPhone 13'],
viewport: { width: 390, height: 844 },
});Use dimensions appropriate to your test; the example values are merely an override pattern. Avoid changing several device parameters independently unless you intentionally want a nonstandard combination.
Let Playwright Test save screenshots automatically
The test runner can manage screenshot artifacts through the use.screenshot option. Its documented values are 'on', 'only-on-failure' and 'on-first-failure'; the default is 'off'.
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
use: {
screenshot: 'only-on-failure',
},
projects: [
{
name: 'Mobile Safari',
use: { ...devices['iPhone 13'] },
},
],
});You can configure full-page behavior in the screenshot options supported by the test runner. Automatic capture is useful for failure artifacts. Use an explicit page.screenshot() call when the location, filename, timing or image format must be controlled precisely. See the TestOptions API for the runner-managed settings.
Make captures repeatable
Keep the emulation definition stable
Run visual comparisons with the same Playwright version, browser binary, device preset, viewport override and scale. A change to any of these can alter line wrapping, image dimensions or font rendering.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Capture after the page reaches the state you want
Call the screenshot after navigation and after your own test actions have put the page into its final state. If the page displays a consent dialog, login prompt or other conditional UI, decide whether that state is part of the test and handle it before the screenshot rather than treating two different states as a visual regression.
Plan for large full-page files
Full-page captures are useful for documentation and responsive audits, but they can be substantially taller and heavier than viewport images. Prefer viewport shots for fast test feedback, and reserve full-page output for cases where below-the-fold content matters.
When you need a real Android screen
Playwright’s Android API is a separate workflow from browser emulation. The official guide describes it as experimental. You need an Android device or AVD, authenticated ADB and Chrome 87 or newer. The device must be awake to produce screenshots. The documentation also records limitations, including no raw USB support and incomplete test coverage; check the Android API documentation before depending on it in a production pipeline.
Use this route for a device-specific requirement, Chrome for Android automation or a WebView. Do not switch to it merely because a mobile viewport screenshot is needed: the preset workflow is simpler, repeatable and designed for responsive browser testing.
Troubleshooting common failures
The screenshot looks like desktop
Cause: the context or test project was created without a device preset, or a later override replaced the mobile viewport.
Fix: verify that ...devices['iPhone 13'] is inside the exact context used by the page, and place intentional overrides after the spread. In Playwright Test, confirm that the test is running under the mobile project.
The file contains only the visible portion
Cause: fullPage defaults to false.
Fix: pass fullPage: true to page.screenshot(). For an element capture, use the locator screenshot instead of expecting page-level full-page behavior.
The image is unexpectedly huge
Cause: device scale multiplies CSS pixels by the emulated device density, or a full-page capture is very tall.
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 reinstallFix: use scale: 'css' for compact output, capture only the viewport, or capture a specific locator.
JPEG or WebP quality has no effect
Cause: quality is not applied to PNG.
Fix: set type: 'jpeg' or type: 'webp' when you want a quality-controlled image.
The result is being described as an iPhone screenshot
Cause: a device preset was mistaken for physical-device evidence.
Fix: label the artifact as an emulated mobile-browser screenshot. Use the experimental Android workflow only when a connected Android device or AVD is genuinely required.
Android automation cannot connect
Cause: missing or unauthenticated ADB, an unavailable device or AVD, a sleeping device, an unsupported Chrome version, or one of the documented experimental limitations.
Fix: verify the Android prerequisites in the official guide, authenticate ADB, wake the device and confirm Chrome 87 or newer before debugging the page itself.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
For a hosted screenshot API, ScreenshotNeo is the first service to try because it removes consent banners, popups and chat widgets before capture, bills only clean shots, and has a $5 paid plan for 3,000 shots.
One GET request returns a PNG, JPEG, WebP or PDF. The API accepts mobile viewport and device-related options, full-page capture, custom CSS and JavaScript, cookies and headers, waits, blocking rules, caching and asynchronous jobs. Its response identifies the page verdict and whether the request was billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o mobile.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("mobile.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('mobile.webp', Buffer.from(await res.arrayBuffer()));See the ScreenshotNeo documentation for all request parameters, response headers and signed-link, webhook and bulk-capture workflows. The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account to get started.
Frequently Asked Questions
Does a Playwright mobile screenshot include the phone’s status bar or browser chrome?
No. The standard page.screenshot() call captures the web page viewport or document, not the physical phone frame, status bar or browser application chrome.
Can I use the same mobile preset for both test screenshots and a standalone script?
Yes. Import devices from Playwright and spread the same preset into a test project’s use settings or a standalone browser context. Keeping the preset and overrides identical helps the two workflows produce comparable images.
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.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors
