43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
type WindowWithExport = Window & {
|
|
__exportPreview?: () => { html: string; css: string; js: string }
|
|
}
|
|
|
|
const builderUrl = '/en/builder'
|
|
|
|
// Verify that focus outline tokens from CSS are applied in a real browser context
|
|
// by focusing the submit button in the exported page and inspecting computed styles.
|
|
test('Exported page shows 3px solid outline color on focused button', async ({ page, context }) => {
|
|
await page.goto(builderUrl)
|
|
// Minimal content to export
|
|
await page.getByTestId('card-hero').click()
|
|
|
|
await page.waitForFunction(() => Boolean((window as unknown as WindowWithExport).__exportPreview), { timeout: 5000 })
|
|
const exported = await page.evaluate(() => (window as unknown as WindowWithExport).__exportPreview?.() ?? null)
|
|
expect(exported).not.toBeNull()
|
|
|
|
const preview = await context.newPage()
|
|
await preview.setContent(exported!.html)
|
|
await preview.addStyleTag({ content: exported!.css })
|
|
|
|
const submit = preview.locator('button[type="submit"]')
|
|
await expect(submit).toHaveCount(1)
|
|
await submit.focus()
|
|
|
|
// Read computed style in the page context
|
|
const style = await preview.evaluate(() => {
|
|
const el = document.querySelector('button[type="submit"]') as HTMLElement | null
|
|
if (!el) return null
|
|
const cs = window.getComputedStyle(el)
|
|
return { outlineWidth: cs.outlineWidth, outlineStyle: cs.outlineStyle, outlineColor: cs.outlineColor }
|
|
})
|
|
expect(style).not.toBeNull()
|
|
// Expect 3px solid and brand color (#2563eb => rgb(37, 99, 235))
|
|
expect(style!.outlineWidth).toBe('3px')
|
|
expect(style!.outlineStyle).toBe('solid')
|
|
expect(style!.outlineColor.replace(/\s+/g, '')).toMatch(/rgb\(37,99,235\)|#2563eb/i)
|
|
|
|
await preview.close()
|
|
})
|