Device Emulation

The Device Lab uses Playwright's device descriptor system to emulate real hardware. This page explains what gets emulated, how to configure it, and the recording workflow in detail.

Playwright Device Descriptors

A device descriptor is a bundle of browser settings that simulate a specific device:

{
  "name": "iPhone 14 Pro",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 ...)",
  "viewport": { "width": 393, "height": 852 },
  "deviceScaleFactor": 3,
  "isMobile": true,
  "hasTouch": true
}

xyva includes descriptors for 50+ devices from Playwright's built-in library.

What Gets Emulated

Property	Description	Effect on Testing
Viewport	Screen width and height in CSS pixels	Triggers responsive breakpoints
User Agent	Browser identification string	Affects server-side device detection
hasTouch	Whether touch events are available	Enables/disables touch-only UI elements
deviceScaleFactor	Pixel density (1x, 2x, 3x)	Affects image resolution and layout precision
isMobile	Mobile browser flag	Triggers mobile-specific CSS and JavaScript

What Is Not Emulated

Device descriptors do not emulate hardware performance, actual GPU rendering, native app behavior, or real cellular network conditions. For network throttling, use Playwright's route API.

Selecting a Device

In the Device Lab panel:

1. Choose a category (Desktop, Tablet, Smartphone)
2. Browse the device list within that category
3. Click a device to see its descriptor details
4. Click Apply to activate that device for the current session

Custom Configuration

If no preset matches your needs, click Custom Device and set:

• Viewport width and height
• Scale factor
• Touch support toggle
• Custom user agent string

Responsive Breakpoints

To test responsive breakpoints, create custom devices at your breakpoint widths (e.g., 768px, 1024px, 1440px) without overriding the user agent.

Recording Workflow

Starting a Recording

1. Select a device from the descriptor list
2. Enter the target URL in the address bar
3. Click Start Recording — a browser window opens in the selected device configuration
4. Interact with the page naturally

During Recording

The recorder captures events in real time. The event log panel shows:

[00:01.2] click    → button.add-to-cart      (124, 340)
[00:03.5] type     → input#search            "wireless headphones"
[00:04.8] keydown  → Enter
[00:06.1] navigate → /search?q=wireless+headphones
[00:08.4] click    → a.product-link           (200, 450)

Stopping and Editing

Click Stop Recording to end the session. The event log is now editable:

• Delete unwanted events (accidental clicks, repeated actions)
• Reorder events if they were captured out of sequence
• Annotate events with comments for the generated test code

Code Generation from Recording

After editing the event log, click Generate Code to produce a Playwright test:

• Each event maps to a Playwright API call (page.click(), page.fill(), page.goto())
• Selectors use the Architecture Vault strategy when available
• The generated test includes the device descriptor as a Playwright project configuration

Review Generated Selectors

Auto-detected selectors may not always be the most stable choice. Review and replace any positional or fragile selectors before adding the test to your suite.