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.
33 lines
1.5 KiB
33 lines
1.5 KiB
5 months ago
|
import { chromium } from 'playwright';
|
||
|
|
const BASE = process.env.BASE_URL ?? 'http://localhost:5173';
|
||
|
|
const b = await chromium.launch();
|
||
|
|
const ctx = await b.newContext({ viewport: { width: 1280, height: 900 } });
|
||
|
|
const p = await ctx.newPage();
|
||
|
|
await p.goto(BASE + '/uix/components/toggle', { waitUntil: 'networkidle' });
|
||
|
|
await p.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Click intent=affirm + pressed=true
|
||
|
|
await p.locator('button[data-uix-chip]:has-text("affirm")').first().click();
|
||
|
|
await p.locator('span[data-uix-switch] input[type="checkbox"]').first().check();
|
||
|
|
await p.waitForTimeout(200);
|
||
|
|
|
||
|
|
const css = await p.locator('[data-toggle]').first().evaluate((el: Element) => {
|
||
|
|
const cs = getComputedStyle(el);
|
||
|
|
return {
|
||
|
|
dataColor: el.getAttribute('data-color'),
|
||
|
|
dataState: el.getAttribute('data-state'),
|
||
|
|
bg: cs.backgroundColor,
|
||
|
|
palette_solid: cs.getPropertyValue('--toggle-palette-solid').trim(),
|
||
|
|
palette_track: cs.getPropertyValue('--toggle-palette-track').trim(),
|
||
|
|
palette_text: cs.getPropertyValue('--toggle-palette-text').trim(),
|
||
|
|
toggle_solid_on_bg: cs.getPropertyValue('--toggle-solid-on-bg').trim(),
|
||
|
|
_toggle_on_bg: cs.getPropertyValue('--_toggle-on-bg').trim(),
|
||
|
|
toggle_color_affirm_solid: cs.getPropertyValue('--toggle-color-affirm-solid').trim(),
|
||
|
|
color_affirm_solid: cs.getPropertyValue('--color-affirm-solid').trim(),
|
||
|
|
primitive_affirm_9: cs.getPropertyValue('--primitive-affirm-9').trim(),
|
||
|
|
scale_teal_9: cs.getPropertyValue('--scale-teal-9').trim()
|
||
|
|
};
|
||
|
|
});
|
||
|
|
console.log(JSON.stringify(css, null, 2));
|
||
|
|
await b.close();
|