You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.4 KiB
35 lines
1.4 KiB
2 months ago
|
// ¿La fila coge el velo del sistema al pasar el ratón? Y si la tabla NO es
|
||
|
|
// hoverable, ¿lo coge igual? (el velo de `item` no está gated por la prop)
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const url = process.argv[2] ?? 'http://localhost:5180/uix/components/table';
|
||
|
|
const browser = await chromium.launch();
|
||
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
|
||
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
await page.addStyleTag({ content: '*, *::before, *::after { transition: none !important; }' });
|
||
|
|
|
||
|
|
const read = async (label: string) => {
|
||
|
|
const row = page.locator('[data-table-body] [data-table-row]').first();
|
||
|
|
const before = await row.evaluate((n) => {
|
||
|
|
const cs = getComputedStyle(n);
|
||
|
|
return { img: cs.backgroundImage, bg: cs.backgroundColor };
|
||
|
|
});
|
||
|
|
await row.hover();
|
||
|
|
await page.waitForTimeout(120);
|
||
|
|
const after = await row.evaluate((n) => {
|
||
|
|
const cs = getComputedStyle(n);
|
||
|
|
return { img: cs.backgroundImage, bg: cs.backgroundColor };
|
||
|
|
});
|
||
|
|
console.log(`${label}\n reposo img: ${before.img}\n hover img: ${after.img}\n hover bg : ${after.bg}`);
|
||
|
|
await page.mouse.move(0, 0);
|
||
|
|
await page.waitForTimeout(120);
|
||
|
|
};
|
||
|
|
|
||
|
|
await read('CON data-hoverable (como la demo)');
|
||
|
|
await page.evaluate(() => {
|
||
|
|
for (const r of document.querySelectorAll('[data-table-root]')) r.removeAttribute('data-hoverable');
|
||
|
|
});
|
||
|
|
await read('SIN data-hoverable (la prop apagada)');
|
||
|
|
await browser.close();
|