letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(test): extract anchor iPhone device descriptors to shared fixture

Browse Source 
Move the four iPhone viewport descriptors (SE, 15/16, 16/17 Pro, Pro Max)
into tests/e2e/fixtures/devices.ts so the upcoming visual spec (Task 23)
can share the same anchors. The mobile-audit spec now spreads each
descriptor and adds a slug `name` plus a human `label` for the run header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-04-29 14:31:51 +02:00
parent 6237ad1567
commit 3aba2181dc
2 changed files with 58 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
tests/e2e/audit/mobile.spec.ts
View File

@@ -13,6 +13,7 @@
import { test, type Page, type APIRequestContext } from '@playwright/test';
import { promises as fs } from 'node:fs';
import path from 'node:path';
import { IPHONE_DEVICES } from '../fixtures/devices';
const PORT_SLUG = 'port-nimara';
const ADMIN = {
@@ -26,10 +27,14 @@ const OUT_ROOT = path.resolve(process.cwd(), '.audit/mobile');
// Anchor viewports covering the active iPhone range (portrait CSS pixels).
// See docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1.
const VIEWPORTS = [
{ name: 'iphone-se', label: 'iPhone SE 3 (375×667)', width: 375, height: 667 },
{ name: 'iphone-16', label: 'iPhone 15/16 (393×852)', width: 393, height: 852 },
{ name: 'iphone-16-pro', label: 'iPhone 16/17 Pro (402×874)', width: 402, height: 874 },
{ name: 'iphone-pro-max', label: 'iPhone 16/17 Pro Max (440×956)', width: 440, height: 956 },
{ ...IPHONE_DEVICES.iphoneSe, name: 'iphone-se', label: IPHONE_DEVICES.iphoneSe.name },
{ ...IPHONE_DEVICES.iphone16, name: 'iphone-16', label: IPHONE_DEVICES.iphone16.name },
{ ...IPHONE_DEVICES.iphone16Pro, name: 'iphone-16-pro', label: IPHONE_DEVICES.iphone16Pro.name },
{
...IPHONE_DEVICES.iphoneProMax,
name: 'iphone-pro-max',
label: IPHONE_DEVICES.iphoneProMax.name,
},
] as const;
type Auth = 'admin' | 'public';
@@ -348,12 +353,11 @@ test('mobile audit — every page at iPhone viewports', async ({ browser, reques
await fs.mkdir(outDir, { recursive: true });
const context = await browser.newContext({
viewport: { width: vp.width, height: vp.height },
deviceScaleFactor: 2,
isMobile: true,
hasTouch: true,
userAgent:
'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
viewport: vp.viewport,
deviceScaleFactor: vp.deviceScaleFactor,
isMobile: vp.isMobile,
hasTouch: vp.hasTouch,
userAgent: vp.userAgent,
});
const page = await context.newPage();