Device Lab

The Device Lab is an experimental module for mobile and responsive testing. It simulates different device types using Playwright's device descriptors, records user interactions, and generates test code from those recordings.

Experimental

Device Lab is under active development. Some features have limitations — see the Limitations section below.

Device Categories

Category	Viewport	Touch	Example Devices
Desktop	1280x720 and up	No	Desktop Chrome, Desktop Firefox
Tablet	768x1024 to 1194x834	Yes	iPad Pro, iPad Mini, Galaxy Tab
Smartphone	320x568 to 430x932	Yes	iPhone 14 Pro, Pixel 7, Galaxy S23

Each category applies Playwright device descriptors that set viewport, user agent, hasTouch, and deviceScaleFactor.

Flow Recording

The Device Lab provides a visual recording workflow:

1. Enter Target URL
2. Select Device (e.g., iPhone 14 Pro)
3. Click "Start Recording"
4. Interact with the page — click, type, scroll, navigate
5. Click "Stop Recording"
6. Review the captured event log
7. Generate Playwright test code

Recording Tips

Perform actions slowly and deliberately. The recorder captures every event, including accidental clicks. You can delete unwanted events from the log before generating code.

Code Generation

After recording, the Device Lab translates your interactions into Playwright test code:

• Action mapping — each click, keystroke, and navigation becomes a Playwright API call
• Selector strategy — selectors are pulled from the Architecture Vault when possible, falling back to auto-detected test IDs or roles
• Export options — copy to clipboard or save directly to your test directory

test('checkout flow on iPhone 14 Pro', async ({ page }) => {
  await page.goto('https://staging.acme.com/products');
  await page.getByRole('button', { name: 'Add to Cart' }).click();
  await page.getByRole('link', { name: 'Cart' }).click();
  await page.getByRole('button', { name: 'Checkout' }).click();
});

Event Log

During recording, a live event log displays every captured interaction:

Event Type	Details Captured
Click	Target element, coordinates, CSS selector
Keyboard	Key pressed, target input field
Navigation	URL change, redirect chain
Network	Request URL, method, status code

Limitations

• Single device per session — you cannot record on multiple devices simultaneously
• No physical devices — all emulation is software-based via Playwright device descriptors
• No complex gestures — pinch-to-zoom, multi-touch, and swipe gestures are not captured
• Beta stability — occasional recording artifacts may occur; review generated code before trusting it

Sub-Pages

Page	Content
Device Emulation	Playwright descriptors, viewport/UA/touch configuration, recording workflow
Multi-Browser Testing	Cross-browser testing across device types