Files
landing-builder/tests/e2e/viewport-toggle.kbd.e2e.ts
T
jaybe d6510e2b05 docs(ci): add CI verification note to trigger Actions (#2)
Reviewed-on: #2
Co-authored-by: Jaybe <master@jaybe.dev>
Co-committed-by: Jaybe <master@jaybe.dev>
2025-11-14 09:45:10 +00:00

30 lines
1.3 KiB
TypeScript

import { test, expect } from '@playwright/test'
const builderUrl = '/en/builder'
test('Preview viewport toggle via keyboard (Tab + Enter/Space)', async ({ page }) => {
await page.goto(builderUrl)
await page.waitForLoadState('domcontentloaded')
// Ensure the page has focus before sending keyboard events
await page.locator('body').click({ position: { x: 1, y: 1 } })
// Focus the Desktop button explicitly to avoid flakiness from skip-link/initial focus
const desktopBtn = page.getByRole('button', { name: 'Desktop' })
await desktopBtn.focus()
await expect(desktopBtn).toBeFocused()
// Press Space to toggle Mobile (first ensure Desktop is selected, then move to Mobile with Tab)
await page.keyboard.press('Tab')
await expect(page.getByRole('button', { name: 'Mobile' })).toBeFocused()
await page.keyboard.press('Space')
await expect(page.getByRole('button', { name: 'Mobile' })).toHaveAttribute('aria-pressed', 'true')
// Back to Desktop with Shift+Tab and Enter
await page.keyboard.down('Shift')
await page.keyboard.press('Tab')
await page.keyboard.up('Shift')
await expect(page.getByRole('button', { name: 'Desktop' })).toBeFocused()
await page.keyboard.press('Enter')
await expect(page.getByRole('button', { name: 'Desktop' })).toHaveAttribute('aria-pressed', 'true')
})