skills.rest
magus
magusCOMMUNITY
Explore all skills by this author →
Website𝕏@magusnnGitHub

playwright-iphone

Open web pages in a Playwright iPhone-sized viewport and verify viewport metrics.

9|Updated May 5, 2012
Search Tags:#playwright#screenshot#responsive layout#ui inspection#mobile debugging#iphone viewport#viewport verification
One-click install
npx skills add https://github.com/magus/dotfiles --skill playwright-iphone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-iphone
Source: https://github.com/magus/dotfiles/tree/main/codex/skills/playwright-iphone
Command: npx skills add https://github.com/magus/dotfiles --skill playwright-iphone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes guesswork when a site’s mobile layout, viewport sizing, and rendering differ from desktop by letting you inspect the experience in a Playwright-launched iPhone-sized browser viewport.

Core Features & Use Cases

  • Guided iPhone viewport probing: Opens a target URL in a headed Playwright browser and resizes to the standard iPhone 17 CSS viewport (402x874) for responsive checks.
  • Human-driven UI inspection loop: Uses snapshot/screenshot plus single visible actions (click, fill, type, press, resize, or navigate) to quickly reach a state needed for follow-up testing.
  • Deterministic verification: Evaluates and confirms active viewport metrics (innerWidth/innerHeight, DPR, UA, touch points) and provides the current URL/title context.

Quick Start

Use playwright-iphone to open https://dcss.vercel.app in the iPhone 17 Playwright viewport, resize to 402 by 874, then report the current URL and verified viewport metrics.

Frequently Asked Questions about playwright-iphone

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug a responsive layout in an iPhone 17 viewport using Playwright?▼

To debug a responsive layout in an iPhone 17 viewport, this Skill opens a target URL in a headed Playwright browser session, resizes the window to 402x874, and verifies viewport metrics like innerWidth, innerHeight, and DPR via an eval-based check.

What metrics are verified during mobile UI inspection with Playwright?▼

During mobile UI inspection, it verifies active viewport metrics including innerWidth, innerHeight, device pixel ratio (DPR), user agent (UA), and touch points, alongside reporting the current URL and page title context.

Can I interact with web pages during mobile viewport verification in Playwright?▼

Yes, during mobile viewport verification, you can interact with web pages using single visible actions such as click, fill, type, press, resize, or navigate, supported by snapshot and screenshot capabilities to reach specific testing states.

Does Playwright mobile debugging support headed browser sessions for human-driven UI inspection?▼

Yes, Playwright mobile debugging uses a headed browser session to enable human-driven UI inspection, allowing you to visually troubleshoot rendering issues and validate responsive layouts within the 402x874 iPhone viewport.

Why does my website layout differ in an iPhone viewport compared to desktop?▼

Your website layout may differ in an iPhone viewport due to responsive CSS rules and varying device characteristics. This Skill removes guesswork by reproducing the exact 402x874 iPhone 17 viewport to inspect the specific mobile rendering experience.

Related Skills

Explore More Software Engineering Skills→
szymdzumszymdzum
148

bdg

Automate browser control via Chrome DevTools Protocol from the command line.

Community
Intermediate
winstonkoh87winstonkoh87
558

visual-verify-ui

Capture multi-viewport screenshots and compare DOM states for visual regression testing.

Community
Intermediate
tercumantanumuttercumantanumut
167

playwright

Automate browser interactions via Playwright CLI for testing and data extraction.

Community
Intermediate
ramunasnognysramunasnognys
1

mobile-testing-playwright

Automate iOS and Android mobile testing with Playwright MCP for UI and interaction issues.

Community
Intermediate