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/table', { waitUntil: 'networkidle' });
await page.waitForTimeout(400);
const out = await page.evaluate(() => {
	const root = document.querySelector('[data-table-root]') as HTMLElement;
	const row = root.querySelector('[data-table-body] [data-table-row]') as HTMLElement;
	row.setAttribute('data-selected', '');
	const res: Record<string, unknown> = { archetype: row.getAttribute('data-archetype') };
	// ¿quién gana el `color` de la fila seleccionada?
	const winners: string[] = [];
	const walk = (rules: CSSRuleList | undefined) => {
		for (const r of rules ?? []) {
			const any = r as CSSStyleRule & { cssRules?: CSSRuleList };
			if (any.cssRules) walk(any.cssRules);
			if (!any.selectorText || !any.style?.color) continue;
			try {
				if (row.matches(any.selectorText)) winners.push(`${any.selectorText.slice(0, 70)} => ${any.style.color}`);
			} catch { /* selector no evaluable */ }
		}
	};
	for (const sh of document.styleSheets) { try { walk(sh.cssRules) } catch { res.corsSheets = (res.corsSheets as number ?? 0) + 1 } }
	res.reglasColor = winners;
	res.computed = getComputedStyle(row).color;
	// filas pares con striped
	root.setAttribute('data-striped', '');
	const even = root.querySelector('[data-table-body] [data-table-row]:nth-of-type(even)') as HTMLElement;
	res.filaPar = !!even;
	if (even) {
		const b = getComputedStyle(even).backgroundColor;
		root.style.setProperty('--table-striped-row-bg', 'rgb(1, 2, 3)');
		res.stripedAlcanza = getComputedStyle(even).backgroundColor !== b;
	}
	return res;
});
console.log(JSON.stringify(out, null, 1));
await browser.close();