import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
await page.goto('http://localhost:5180/uix/components/tree-grid', { waitUntil: 'networkidle' });
await page.waitForTimeout(500);
await page.addStyleTag({ content: '*, *::before, *::after { transition: none !important; }' });

const boxes = await page.evaluate(() =>
	[...document.querySelectorAll('[data-tree-grid-row]')].slice(0, 4).map((n, i) => {
		const r = (n as HTMLElement).getBoundingClientRect();
		const cs = getComputedStyle(n);
		return { i, x: r.x + r.width / 2, y: r.y + r.height / 2, restBg: cs.backgroundColor, restImg: cs.backgroundImage.slice(0, 30) };
	})
);
for (const b of boxes) {
	await page.mouse.move(b.x, b.y);
	await page.waitForTimeout(140);
	const h = await page.evaluate((i) => {
		const n = [...document.querySelectorAll('[data-tree-grid-row]')][i] as HTMLElement;
		const cs = getComputedStyle(n);
		return { bg: cs.backgroundColor, img: cs.backgroundImage.slice(0, 46), hov: n.matches(':hover') };
	}, b.i);
	console.log(`fila ${b.i}: reposo ${b.restBg} → hover ${h.bg} | velo ${h.img} | :hover ${h.hov}`);
}
await browser.close();