import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
await page.goto('http://localhost:8931/demo/harness.html');
await page.waitForSelector('#tree [data-path="/app"]', { timeout: 15000 });
await page.click('#tree [data-path="/app"]', { button: 'right' });
await page.waitForSelector('#context-menu', { state: 'visible' });
await page.click('#ctx-new-file');
await page.fill('#inline-input', 're-render-probe.txt');

const geo = await page.evaluate(() => {
  const info = (sel) => {
    const el = document.querySelector(sel);
    const r = el.getBoundingClientRect();
    return [Math.round(r.x), Math.round(r.y), Math.round(r.width), Math.round(r.height)];
  };
  const btn = document.getElementById('inline-ok');
  const r = btn.getBoundingClientRect();
  const cx = r.x + r.width / 2, cy = r.y + r.height / 2;
  return {
    sidebar: info('#sidebar'), inlineRow: info('#inline-row'),
    inlineInput: info('#inline-input'), inlineOk: info('#inline-ok'),
    editor: info('#editor'),
    hitAtOkCenter: document.elementsFromPoint(cx, cy).slice(0, 4)
      .map((e) => `${e.tagName.toLowerCase()}${e.id ? '#' + e.id : ''}`),
  };
});
console.log(JSON.stringify(geo));
await browser.close();