How to Emulate a Samsung Phone Viewport in Playwright

To emulate a Samsung phone viewport in Playwright, use a named device profile such as devices['Galaxy S24']. The profile sets a coordinated group of browser properties, including viewport, screen, device scale factor, mobile behavior, touch support, and user agent. The current Galaxy S24 descriptor uses a 360 × 780 CSS-pixel viewport and a scale factor of 3. Playwright uses Chromium for this profile by default. These are Playwright profile values, not a guarantee that every Galaxy S24 or browser configuration behaves exactly the same. Playwright’s emulation guide explains the profile model.

1. Use a built-in Galaxy profile

Install Playwright and its browser before running the examples. In a Node.js project using the Playwright test runner:

npm install --save-dev @playwright/test
npx playwright install chromium

Then apply a device profile to a test with test.use:

import { test, expect, devices } from '@playwright/test';

test.use({ ...devices['Galaxy S24'] });

test('navigation fits the Galaxy S24 viewport', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page.locator('body')).toBeVisible();
  console.log(await page.evaluate(() => ({
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    devicePixelRatio: window.devicePixelRatio,
  })));
});

Save it as a test file such as tests/samsung.spec.ts, then run npx playwright test. The test runner applies the profile to the browser context it creates. Use a URL you control when checking application behavior.

Create a context directly

For a standalone script, spread the same profile into browser.newContext. Save this as samsung.mjs and run it with Node.js:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
try {
  const context = await browser.newContext({ ...devices['Galaxy S24'] });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
  console.log('Viewport:', await page.evaluate(() => ({
    width: window.innerWidth,
    height: window.innerHeight,
    devicePixelRatio: window.devicePixelRatio,
  })));
  await page.screenshot({ path: 'galaxy-s24.png', fullPage: true });
  await context.close();
} finally {
  await browser.close();
}

Install the library and browser with npm install playwright and npx playwright install chromium. The device registry belongs to the installed Playwright version; the descriptor available in your project is authoritative for that run.

2. Choose the Samsung target that matches the test

Different Samsung devices and form factors have different logical viewports. Select a profile that answers the question you are testing rather than treating “Samsung phone” as one universal size.

Target	Viewport	Scale factor	What to test
Galaxy S24	360 × 780	3	Compact-width phone layout
Galaxy A55	480 × 1040	2.25	Wider phone layout
Galaxy Z Fold 7, inner screen	984 × 1016	2	Fold-open layout
Galaxy Z Fold 7, cover screen	360 × 764	3	Fold-closed cover layout

The viewport dimensions and scale factors above are descriptor values in the Playwright registry. Check your installed version’s devices registry when a profile is missing or values matter to a regression test. In particular, test a Fold’s inner and cover screens as separate targets.

Use profile properties explicitly in assertions

Responsive CSS media queries use CSS viewport dimensions. Device scale factor affects the relationship between CSS pixels and device pixels, which matters for screenshots and pixel-level comparisons. Mobile and touch settings affect browser behavior beyond screen size. For example, assert the viewport your app receives instead of inferring it from the screenshot’s pixel dimensions:

const metrics = await page.evaluate(() => ({
  width: window.innerWidth,
  height: window.innerHeight,
  dpr: window.devicePixelRatio,
  touchPoints: navigator.maxTouchPoints,
}));
console.log(metrics);

3. Configure a custom Samsung-like viewport

When the registry does not include the device or dimensions you need, set the relevant options yourself. A custom combination is useful for responsive layout coverage, but it is less coherent than a named descriptor if you omit properties the target browser would normally provide.

import { chromium } from 'playwright';

const browser = await chromium.launch();
try {
  const context = await browser.newContext({
    viewport: { width: 360, height: 780 },
    screen: { width: 360, height: 780 },
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true,
    // Supply a target-specific user agent only when your test requires it.
    // userAgent: 'your chosen user agent',
  });
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'custom-mobile.png' });
  await context.close();
} finally {
  await browser.close();
}

viewport controls the page’s layout viewport. screen describes the emulated screen dimensions. deviceScaleFactor affects device-pixel output. isMobile and hasTouch control mobile and touch emulation. A user agent string can affect server-side content selection, but changing it alone does not reproduce a browser or device. For an unusual combination, check the current browser context options for your Playwright version.

4. Know what the emulation does and does not test

A device profile is useful for responsive breakpoints, mobile-oriented user-agent handling, and touch-oriented interaction tests. It does not turn desktop Chromium into a Samsung phone, nor does it establish compatibility with Samsung Internet, a particular Android build, phone hardware, sensors, keyboard behavior, or browser chrome.

Samsung documents Samsung Internet’s user-agent format, including the SamsungBrowser/version token. For Samsung Internet 24.0 and later, Samsung describes a unified platform token used as part of user-agent reduction. A Chromium device profile should therefore not be presented as an exact Samsung Internet test. See Samsung’s user-agent format documentation.

If the reported issue specifically involves Samsung Internet or physical device behavior, verify with the target browser on an actual device or a suitable Android environment. Use Playwright viewport emulation to narrow down layout problems, then confirm browser-specific behavior separately.

5. Capture a page at a Samsung viewport

Playwright can capture a page screenshot after applying the profile. With the standalone script above, fullPage: true captures the full page; omit it for the currently visible viewport. Use a stable page state before capture if content loads asynchronously.

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'galaxy.png', fullPage: true });

networkidle can be unsuitable for pages with persistent network activity. In that case, wait for a meaningful selector or application-ready condition and then capture:

await page.goto('https://example.com');
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({ path: 'galaxy.png', fullPage: true });

6. Troubleshooting

Symptom	Likely cause	Fix
`devices['Galaxy S24']` is undefined	The installed Playwright version’s registry does not contain that profile or the name differs.	Inspect the installed `devices` keys and update Playwright if appropriate. Use a custom context configuration if needed.
The screenshot has unexpected pixel dimensions	CSS viewport dimensions and device scale factor are being confused.	Check `window.innerWidth`, `window.innerHeight`, and `window.devicePixelRatio`. Compare CSS dimensions separately from image pixels.
The mobile menu does not open as it does on a phone	The test may depend on touch input or mobile behavior beyond viewport size.	Use the named device profile, or set `hasTouch` and `isMobile` deliberately. Test the actual interaction path.
The site serves a different page	Server behavior may depend on the user agent, cookies, geolocation, or other context state.	Check the request and page state. Use a target-appropriate profile and configure only the context values the test needs.
Samsung Internet still shows a rendering bug	Chromium emulation does not reproduce Samsung Internet’s exact engine build or device environment.	Reproduce in Samsung Internet on the target device or Android environment.
`networkidle` never completes	Long polling, analytics, or other continuous requests can keep the network active.	Wait for a specific visible selector or app-ready condition instead.

7. Reliability, runtime, and cost

For repeatable screenshot checks, pin the Playwright version used by your project and record the profile name and relevant descriptor values with the test. Device registries can change between releases. Keep the browser engine consistent, wait for the same application-ready condition, and avoid depending on transient animations or external content when comparing screenshots.

Each additional profile adds browser work to a test matrix, so cover the breakpoints and device classes that matter instead of multiplying nearly identical cases. A named emulation profile runs in the browser you launch; it does not require a physical Samsung phone. Real-device or hosted Android testing has separate setup and cost considerations determined by the environment you choose.

Or skip the browser setup

If your goal is a clean screenshot of a public page rather than testing responsive behavior in Playwright, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns an image or PDF. Its API accepts viewport settings and other capture options; see the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=360 \
  -d height=780 \
  -o samsung-viewport.webp

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.

FAQ

Does this run Samsung Internet?

No. The Galaxy S24 descriptor defaults to Chromium. Use a real Samsung Internet environment when that browser itself is the subject of the test.

Should I set only the viewport width and height?

Only when you specifically want a size-only responsive check. For a mobile device simulation, a named descriptor also supplies related properties such as scale factor, touch, and mobile behavior.

Can I test a Galaxy Z Fold in both states?

Yes. Run separate cases for its inner screen and cover screen because their viewport dimensions differ substantially.

Does a screenshot prove a page works on a Samsung phone?

No. It shows what the configured browser rendered under emulation. It does not verify phone hardware, Samsung Internet, or every device-specific behavior.