v1.1.0: pooled runtime, 959 tests, production hardening (0 squash)

examples/responsive-test.js

@@ -0,0 +1,51 @@
+// examples/responsive-test.js
+// Responsive layout test: verify layout invariants across multiple viewports.
+//
+// Use ui.applyEnvironment() to resize the viewport, then extract geometry
+// and assert layout laws. This replaces writing separate tests per breakpoint.
+
+const { test, expect } = require('@playwright/test')
+const { imhotep } = require('imhotep-playwright')
+
+test('responsive sidebar layout', async ({ page }) => {
+  await page.goto('https://example.com')
+  const ui = await imhotep(page)
+
+  const viewports = [
+    { width: 375, height: 667, name: 'mobile' },
+    { width: 768, height: 1024, name: 'tablet' },
+    { width: 1280, height: 720, name: 'desktop' },
+  ]
+
+  for (const vp of viewports) {
+    // Apply the environment case
+    await ui.applyEnvironment({
+      viewport: { width: vp.width, height: vp.height },
+    })
+
+    // Reload so the page lays out at the new size
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+
+    const sidebarData = await ui.extract('.sidebar')
+    const contentData = await ui.extract('.content')
+
+    expect(sidebarData.length).toBeGreaterThanOrEqual(1)
+    expect(contentData.length).toBeGreaterThanOrEqual(1)
+
+    const sidebar = sidebarData[0].rect
+    const content = contentData[0].rect
+
+    if (vp.name === 'mobile') {
+      // Mobile: sidebar stacks above content
+      expect(sidebar.y + sidebar.height).toBeLessThanOrEqual(content.y + 1)
+      // Mobile: sidebar should be nearly full width
+      expect(sidebar.width).toBeGreaterThanOrEqual(vp.width * 0.8)
+    } else {
+      // Tablet and desktop: sidebar is left of content
+      expect(sidebar.x + sidebar.width).toBeLessThanOrEqual(content.x + 1)
+      // Sidebar should have a fixed or minimum width
+      expect(sidebar.width).toBeGreaterThanOrEqual(200)
+    }
+  }
+})