// examples/page-test.js
// Simple page layout test using Imhotep extraction and Playwright assertions.
//
// This is the primary working pattern in V1.0: use ui.extract() to get
// element geometry, then assert with Playwright's expect().

const { test, expect } = require('@playwright/test')
const { imhotep } = require('imhotep-playwright')

test('page layout relations', async ({ page }) => {
  // Navigate to a page with a known layout
  await page.goto('https://example.com')

  // Attach Imhotep to the page
  const ui = await imhotep(page)

  // Extract geometry for the elements we want to verify
  const headerData = await ui.extract('header')
  const navData = await ui.extract('nav')
  const mainData = await ui.extract('main')

  // All selectors should resolve to at least one element
  expect(headerData.length).toBeGreaterThanOrEqual(1)
  expect(navData.length).toBeGreaterThanOrEqual(1)
  expect(mainData.length).toBeGreaterThanOrEqual(1)

  const header = headerData[0].rect
  const nav = navData[0].rect
  const main = mainData[0].rect

  // Layout law: nav should be below header with at least 8px gap
  expect(nav.y).toBeGreaterThanOrEqual(header.y + header.height + 8)

  // Layout law: main should be below nav
  expect(main.y).toBeGreaterThanOrEqual(nav.y + nav.height)

  // Layout law: header should span full width
  expect(header.width).toBeGreaterThanOrEqual(320)
})