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.
50 lines
2.1 KiB
50 lines
2.1 KiB
/**
|
|
* Sonda del SKIN de audio. La demo de media-player conmuta con el chip
|
|
* `audio` (prop `media`), y ahí entra `audio-player.css` sobre las MISMAS
|
|
* partes — por eso una sonda que sólo carga la página mide el modo vídeo y
|
|
* deja el skin sin medir. Recorre además las cuatro variantes.
|
|
*/
|
|
import { writeFileSync } from 'node:fs';
|
|
import { chromium } from 'playwright';
|
|
|
|
const [out, url = 'http://localhost:5180/uix/components/media-player'] = process.argv.slice(2);
|
|
const PROPS = ['backgroundColor', 'backgroundImage', 'color', 'paddingTop', 'paddingLeft', 'rowGap', 'columnGap', 'fontSize', 'lineHeight', 'blockSize', 'inlineSize', 'borderTopColor', 'borderTopWidth', 'borderTopLeftRadius'];
|
|
|
|
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.getByText('audio', { exact: true }).first().click();
|
|
await page.waitForTimeout(300);
|
|
|
|
const snapshot = async (label: string) =>
|
|
page.evaluate(
|
|
([keys, tag]) => {
|
|
const root = document.querySelector('[data-uix-stage]') ?? document.body;
|
|
const nodes = [...root.querySelectorAll<HTMLElement>('*')].filter((n) =>
|
|
[...n.attributes].some((a) => a.name.startsWith('data-media-player'))
|
|
);
|
|
const rows: Record<string, Record<string, string>> = {};
|
|
nodes.forEach((n, i) => {
|
|
const cs = getComputedStyle(n);
|
|
const key = `${tag}:${i}:${[...n.attributes].map((a) => a.name).join('|')}`;
|
|
rows[key] = Object.fromEntries((keys as string[]).map((k) => [k, cs[k as never] as string]));
|
|
});
|
|
return rows;
|
|
},
|
|
[PROPS, label] as const
|
|
);
|
|
|
|
const all: Record<string, unknown> = {};
|
|
for (const variant of ['card', 'row', 'bar', 'inline']) {
|
|
const chip = page.getByText(variant, { exact: true }).first();
|
|
if (await chip.count()) {
|
|
await chip.click();
|
|
await page.waitForTimeout(200);
|
|
}
|
|
all[variant] = await snapshot(variant);
|
|
console.log(` ${variant}: ${Object.keys(all[variant] as object).length} nodos`);
|
|
}
|
|
writeFileSync(out, JSON.stringify(all, null, '\t'));
|
|
await browser.close();
|