import { test, expect } from '@playwright/test'
import { imhotep } from 'imhotep-playwright'
import type { Page } from 'playwright'
import {
touchTarget,
toolbarAlignment,
cardSpacing,
formLabelAlignment,
modalContainment,
} from 'imhotep-playwright'
// Create a simple test page inline so we don't depend on fixture files.
async function loadTestPage(page: Page) {
await page.setContent(`
Label
`)
// Wait for layout to settle.
await page.waitForTimeout(50)
}
test.describe('Edge Feature Tests', () => {
// ───────────────────────────────────────────────
// Size Assertions
// ───────────────────────────────────────────────
test('atLeast(number, dimension) - width passes', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="wide-box"]').to.be.atLeast(100, 'width')
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('atLeast(number, dimension) - width fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="button"]').to.be.atLeast(100, 'width')
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_AT_LEAST_FAILED')).toBe(true)
})
test('atMost(number, dimension) - height passes', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="button"]').to.be.atMost(200, 'height')
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('atMost(number, dimension) - height fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="tall-box"]').to.be.atMost(100, 'height')
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_AT_MOST_FAILED')).toBe(true)
})
test('between(min, max, dimension) - width passes', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="wide-box"]').to.be.between(100, 200, 'width')
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('between(min, max, dimension) - width fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="button"]').to.be.between(100, 200, 'width')
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_BETWEEN_FAILED')).toBe(true)
})
// ───────────────────────────────────────────────
// Cardinality Assertions
// ───────────────────────────────────────────────
test('exactlyOne passes when 1 match', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="button"]').to.be.exactlyOne()
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('exactlyOne fails when 0 matches', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.nonexistent').to.be.exactlyOne()
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_EXACTLYONE_FAILED')).toBe(true)
})
test('atLeastN passes', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.box').to.be.atLeastN(2)
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('atLeastN fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.box').to.be.atLeastN(10)
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_ATLEASTN_FAILED')).toBe(true)
})
test('atMostN passes', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.box').to.be.atMostN(5)
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('atMostN fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.box').to.be.atMostN(1)
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_ATMOSTN_FAILED')).toBe(true)
})
// Add clippedBy to dense DSL test page with overflow:hidden container
async function loadClippingTestPage(page: Page) {
await page.setContent(`
`)
await page.waitForTimeout(50)
}
test('clippedBy - child is clipped by overflow:hidden container', async ({ page }) => {
await loadClippingTestPage(page)
const ui = await imhotep(page)
ui.spec(`in viewport:
'[data-testid="clipped-child"]' clippedBy '[data-testid="clip-container"]'`)
const result = await ui.checkAll()
expect(result.passed).toBe(true)
expect(result.clauseResults.length).toBe(1)
expect(result.clauseResults[0].status).toBe('pass')
// clipKind: 1=contain:paint, 2=overflow — container has overflow:hidden
expect(result.clauseResults[0].metrics?.clipKind).toBe(2)
})
// ───────────────────────────────────────────────
// checkAll options: format llm
// ───────────────────────────────────────────────
test('checkAll with format: llm returns string', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
const result = await ui.checkAll({ format: 'llm' })
expect(typeof result).toBe('string')
const parsed = JSON.parse(result)
expect(typeof parsed.passed).toBe('boolean')
expect(Array.isArray(parsed.failingClauses)).toBe(true)
})
test('checkAll with format: llm on failure', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="box2"]').to.be.leftOf('[data-testid="box1"]')
const result = await ui.checkAll({ format: 'llm' })
expect(typeof result).toBe('string')
const parsed = JSON.parse(result)
expect(parsed.passed).toBe(false)
expect(parsed.failingClauses.length).toBeGreaterThan(0)
})
// ───────────────────────────────────────────────
// checkAll options: includeNormalized
// ───────────────────────────────────────────────
test('checkAll with includeNormalized: true', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
const result = await ui.checkAll({ includeNormalized: true })
expect(result.passed).toBe(true)
expect(Array.isArray(result.normalizedContracts)).toBe(true)
expect(result.normalizedContracts!.length).toBeGreaterThan(0)
})
// ───────────────────────────────────────────────
// clearCache
// ───────────────────────────────────────────────
test('clearCache does not throw', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
// Should be callable without error.
expect(() => ui.clearCache()).not.toThrow()
})
// ───────────────────────────────────────────────
// Presets
// ───────────────────────────────────────────────
test('touchTarget preset exists and works', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
const preset = touchTarget(ui, '[data-testid="button"]')
expect(preset.assertions.length).toBe(2)
expect(preset.clauses.length).toBe(2)
// Apply the assertions.
for (const a of preset.assertions) {
ui.expect(a.assertion.getSubject()).to.be.atLeast(44, a.assertion.getSubject() === '[data-testid="button"]' ? 'width' : 'height')
}
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('toolbarAlignment preset exists', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
const preset = toolbarAlignment(ui, ['[data-testid="box1"]', '[data-testid="box2"]', '[data-testid="box3"]'])
expect(preset.assertions.length).toBeGreaterThan(0)
expect(preset.clauses.length).toBeGreaterThan(0)
})
test('cardSpacing preset exists', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
const preset = cardSpacing(ui, '[data-testid="box1"]', '[data-testid="box2"]')
expect(preset.assertions.length).toBe(2)
expect(preset.clauses.length).toBe(2)
})
test('formLabelAlignment preset exists', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
const preset = formLabelAlignment(ui, '[data-testid="label"]', '[data-testid="button"]')
expect(preset.assertions.length).toBeGreaterThan(0)
expect(preset.clauses.length).toBeGreaterThan(0)
})
test('modalContainment preset exists', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
const preset = modalContainment(ui, '[data-testid="modal"]')
expect(preset.assertions.length).toBe(2)
expect(preset.clauses.length).toBe(2)
})
// ───────────────────────────────────────────────
// Failure Cases
// ───────────────────────────────────────────────
test('zero-match selector fails with actionable error', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('.nonexistent').to.be.leftOf('[data-testid="label"]')
const result = await ui.checkAll()
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => d.code === 'IMH_SELECTOR_ZERO_MATCHES')).toBe(true)
const diag = result.diagnostics.find(d => (d.code as string) === 'IMH_SELECTOR_ZERO_MATCHES')
expect(diag).toBeDefined()
expect(diag!.fixHints.length).toBeGreaterThan(0)
expect(diag!.fixHints.some(h => h.includes('ui.extract'))).toBe(true)
})
test('invalid relation option produces validation error', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
// Pass an unknown option; the system should reject it with a clear error.
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]', { invalidOption: true } as any)
const result = await ui.checkAll()
// Invalid options should cause the assertion to fail with a validation error.
expect(result.passed).toBe(false)
expect(result.diagnostics.some(d => d.severity === 'error')).toBe(true)
})
test('overlapping elements are detected', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="overlap1"]').to.be.overlaps('[data-testid="overlap2"]')
const result = await ui.checkAll()
expect(result.passed).toBe(true)
})
test('overlapping elements - separatedFrom fails', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="overlap1"]').to.be.separatedFrom('[data-testid="overlap2"]')
const result = await ui.checkAll()
// separatedFrom is not implemented per audit.
expect(result.passed).toBe(false)
})
// ───────────────────────────────────────────────
// Hidden / Edge Behaviors
// ───────────────────────────────────────────────
test('checkAll clears assertion store after call', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
const result1 = await ui.checkAll()
expect(result1.clauseResults.length).toBe(1)
// Second call with no new assertions should be empty.
const result2 = await ui.checkAll()
expect(result2.clauseResults.length).toBe(0)
expect(result2.passed).toBe(true)
})
test('validate returns empty array for valid assertions', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
const issues = ui.validate()
expect(issues.length).toBe(0)
})
test('validate catches invalid dense spec', async ({ page }) => {
const ui = await imhotep(page)
await loadTestPage(page)
ui.spec(`'box1' is leftOf 'box2'`)
const issues = ui.validate()
expect(issues.length).toBeGreaterThan(0)
expect(issues.some(i => i.message.includes('is'))).toBe(true)
})
})