Emulation is not reality (but it is cheap)

import { test, devices } from '@playwright/test';

// Use built-in device descriptors — iPhone 15, Pixel 7, Galaxy S23, etc.
test.use({ ...devices['iPhone 15'] });

test('product card is tappable on iPhone 15', async ({ page }) => {
  await page.goto('/products/42');

  // Card must be at least 44×44 px for comfortable tap (WCAG 2.5.5 AAA)
  const card = page.getByTestId('product-card');
  const box = await card.boundingBox();
  expect(box?.width).toBeGreaterThanOrEqual(44);
  expect(box?.height).toBeGreaterThanOrEqual(44);
});

// Matrix across multiple devices (project config)
// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'iPhone 15',   use: { ...devices['iPhone 15'] } },
    { name: 'Pixel 7',     use: { ...devices['Pixel 7'] } },
    { name: 'iPad Mini',   use: { ...devices['iPad Mini'] } },
  ],
});

// Tap is the default on touch devices — click() works but fires pointerdown
await page.getByRole('button', { name: /add to cart/i }).tap();

// Swipe: manual pointer control
const carousel = page.getByTestId('carousel');
const box = await carousel.boundingBox();
if (!box) throw new Error('carousel not in viewport');

await page.mouse.move(box.x + box.width * 0.9, box.y + box.height / 2);
await page.mouse.down();
await page.mouse.move(box.x + box.width * 0.1, box.y + box.height / 2, { steps: 10 });
await page.mouse.up();
await expect(carousel).toHaveAttribute('data-slide', '2');

// Pinch zoom (Playwright multi-touch via CDP)
// Requires browser.newContext({ hasTouch: true }) in config
await page.evaluate(() => {
  const el = document.querySelector('img')!;
  // ... dispatch TouchEvents with 2 Touch points, changing distance
});

// Long-press (touch-start, wait, touch-end)
await page.touchscreen.tap(100, 100);  // basic
// For duration: use page.mouse.down/up with custom delay

test('video player works in landscape', async ({ browser }) => {
  const context = await browser.newContext({
    ...devices['iPhone 15'],
    // Override to landscape
    viewport: { width: 852, height: 393 },
    isMobile: true,
    hasTouch: true,
  });
  const page = await context.newPage();

  await page.goto('/video/tutorial');
  await expect(page.getByRole('button', { name: /play/i })).toBeVisible();
});

// Test rotation mid-flow
test('modal survives rotation', async ({ page }) => {
  await page.goto('/checkout');
  await page.getByRole('button', { name: /payment/i }).click();

  // Simulate rotation by resizing viewport
  await page.setViewportSize({ width: 926, height: 428 });  // landscape

  // Modal must still be visible and usable
  const modal = page.getByRole('dialog');
  await expect(modal).toBeVisible();
  await expect(modal).toHaveCSS('overflow-y', /auto|scroll/);
});

// Playwright doesn't open a real virtual keyboard in emulation.
// Approximate via viewport height reduction + visual viewport check.

test('email input stays visible when focused', async ({ page }) => {
  await page.goto('/login');

  // Real soft keyboard reduces visualViewport by ~40 %
  // Emulate by resizing to the expected post-keyboard height
  const { height: fullHeight } = page.viewportSize() ?? { height: 0 };
  const keyboardHeight = Math.round(fullHeight * 0.4);

  await page.setViewportSize({
    width: 393,
    height: fullHeight - keyboardHeight,
  });

  // Focus the input
  const email = page.getByLabel(/email/i);
  await email.focus();

  // Assert it scrolled into view above the "keyboard"
  const inputBox = await email.boundingBox();
  expect(inputBox, 'input must have a bounding box').not.toBeNull();
  expect(inputBox!.y + inputBox!.height).toBeLessThan(fullHeight - keyboardHeight);
});

// Use visualViewport API on real devices
await page.evaluate(() => {
  window.visualViewport?.addEventListener('resize', () => {
    // your focus-scroll logic
  });
});

// BrowserStack Automate — remote Playwright
// playwright.config.ts
import { defineConfig } from '@playwright/test';

const bsLocal = JSON.stringify({
  browser: 'playwright-chromium',
  os: 'osx',
  os_version: 'sonoma',
  name: 'iPhone 15 Pro',
  'browserstack.username': process.env.BS_USER,
  'browserstack.accessKey': process.env.BS_KEY,
});

export default defineConfig({
  projects: [
    {
      name: 'browserstack-ios',
      use: {
        connectOptions: {
          wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(bsLocal)}`,
        },
      },
    },
  ],
});

// Run a specific subset on farm — expensive, don't run full suite
pnpm playwright test --project=browserstack-ios --grep="@mobile-critical"