import { test, expect } from '@playwright/test';

test('DataTable DOM Inspection', async ({ page }) => {
	await page.goto('/test/index.html');
	await expect(page.locator('DataTable')).toBeVisible();
	await page.waitForTimeout(1000); // Wait longer for state.js to sync
	
	const firstCol = page.locator('.dt-header .dt-col').first();
	const html = await firstCol.innerHTML();
	console.log('First Col Inner HTML:', html);
	
	const structure = await firstCol.evaluate(el => {
		return {
			tagName: el.tagName,
			className: el.className,
			style: el.getAttribute('style'),
			children: Array.from(el.children).map(c => ({
				tagName: c.tagName,
				className: c.className,
				text: c.innerText,
				width: c.offsetWidth
			}))
		};
	});
	console.log('First Col Structure:', JSON.stringify(structure, null, 2));
});