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 { test, type Page, type APIRequestContext } from '@playwright/test';
import { promises as fs } from 'node:fs'; import { promises as fs } from 'node:fs';
import path from 'node:path'; import path from 'node:path';
import { IPHONE_DEVICES } from '../fixtures/devices';
const PORT_SLUG = 'port-nimara'; const PORT_SLUG = 'port-nimara';
const ADMIN = { 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). // Anchor viewports covering the active iPhone range (portrait CSS pixels).
// See docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1. // See docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1.
const VIEWPORTS = [ const VIEWPORTS = [
{ name: 'iphone-se', label: 'iPhone SE 3 (375×667)', width: 375, height: 667 }, { ...IPHONE_DEVICES.iphoneSe, name: 'iphone-se', label: IPHONE_DEVICES.iphoneSe.name },
{ name: 'iphone-16', label: 'iPhone 15/16 (393×852)', width: 393, height: 852 }, { ...IPHONE_DEVICES.iphone16, name: 'iphone-16', label: IPHONE_DEVICES.iphone16.name },
{ name: 'iphone-16-pro', label: 'iPhone 16/17 Pro (402×874)', width: 402, height: 874 }, { ...IPHONE_DEVICES.iphone16Pro, name: 'iphone-16-pro', label: IPHONE_DEVICES.iphone16Pro.name },
{ name: 'iphone-pro-max', label: 'iPhone 16/17 Pro Max (440×956)', width: 440, height: 956 }, {
...IPHONE_DEVICES.iphoneProMax,
name: 'iphone-pro-max',
label: IPHONE_DEVICES.iphoneProMax.name,
},
] as const; ] as const;
type Auth = 'admin' | 'public'; 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 }); await fs.mkdir(outDir, { recursive: true });
const context = await browser.newContext({ const context = await browser.newContext({
viewport: { width: vp.width, height: vp.height }, viewport: vp.viewport,
deviceScaleFactor: 2, deviceScaleFactor: vp.deviceScaleFactor,
isMobile: true, isMobile: vp.isMobile,
hasTouch: true, hasTouch: vp.hasTouch,
userAgent: userAgent: vp.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',
}); });
const page = await context.newPage(); const page = await context.newPage();

44
tests/e2e/fixtures/devices.ts Normal file
View File

@@ -0,0 +1,44 @@
/**
* Shared device descriptors for mobile/tablet Playwright runs.
*
* Anchors per docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1:
* narrowest, common, current Pro, current Pro Max.
*/
export const IPHONE_DEVICES = {
iphoneSe: {
name: 'iPhone SE 3 (375×667)',
viewport: { width: 375, height: 667 },
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',
},
iphone16: {
name: 'iPhone 15/16 (393×852)',
viewport: { width: 393, height: 852 },
deviceScaleFactor: 3,
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',
},
iphone16Pro: {
name: 'iPhone 16/17 Pro (402×874)',
viewport: { width: 402, height: 874 },
deviceScaleFactor: 3,
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',
},
iphoneProMax: {
name: 'iPhone 16/17 Pro Max (440×956)',
viewport: { width: 440, height: 956 },
deviceScaleFactor: 3,
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',
},
} as const;