from playwright.sync_api import sync_playwright
import json
with sync_playwright() as p:
    b = p.chromium.launch(headless=True)
    pg = b.new_context(viewport={"width":1440,"height":1000}).new_page()
    pg.goto("http://localhost:4321/", wait_until="networkidle", timeout=60000)
    try:
        pg.add_script_tag(url="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js")
        pg.wait_for_timeout(500)
        res = pg.evaluate("""async () => {
            const r = await axe.run(document, {runOnly:['wcag2a','wcag2aa','wcag21aa']});
            return r.violations.map(v=>({id:v.id, impact:v.impact, n:v.nodes.length,
              help:v.help, sample:(v.nodes[0]&&v.nodes[0].target)||[]}));
        }""")
        print("=== AXE VIOLATIONS ===")
        for v in res:
            print(f"[{v['impact']}] {v['id']} x{v['n']} :: {v['help']}")
            print(f"      e.g. {v['sample']}")
        if not res: print("geen axe-violations")
    except Exception as e:
        print("AXE FAILED:", e)
    # heading outline
    heads = pg.eval_on_selector_all("h1,h2,h3,h4", "els=>els.map(e=>e.tagName+': '+e.textContent.trim().slice(0,42))")
    print("\n=== HEADINGS ==="); [print(h) for h in heads]
    # horizontale overflow
    for w in (1440, 768, 390):
        ctx = b.new_context(viewport={"width":w,"height":900})
        pp = ctx.new_page(); pp.goto("http://localhost:4321/", wait_until="networkidle", timeout=60000)
        sw = pp.evaluate("document.documentElement.scrollWidth"); cw = pp.evaluate("document.documentElement.clientWidth")
        print(f"\nviewport {w}: scrollWidth={sw} clientWidth={cw} overflow={'JA' if sw>cw+1 else 'nee'}")
        ctx.close()
    b.close()