John Dvorak
52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
// 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)
|
|
}
|
|
}
|
|
})
|