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.
61 lines
2.1 KiB
61 lines
2.1 KiB
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();
|
|
p.on('console', (m) => {
|
|
if (m.type() === 'error') console.log('CONSOLE_ERR', m.text());
|
|
});
|
|
await p.goto(BASE + '/uix/components/toggle', { waitUntil: 'networkidle' });
|
|
await p.waitForTimeout(500);
|
|
const initial = await p
|
|
.locator('[data-toggle]')
|
|
.first()
|
|
.evaluate((el: Element) => ({
|
|
ds: el.getAttribute('data-state'),
|
|
dc: el.getAttribute('data-color'),
|
|
bg: getComputedStyle(el).backgroundColor
|
|
}));
|
|
console.log('INITIAL', JSON.stringify(initial));
|
|
// Click intent=affirm chip
|
|
const affirmChip = p.locator('button[data-uix-chip]:has-text("affirm")').first();
|
|
await affirmChip.click();
|
|
await p.waitForTimeout(200);
|
|
const afterAffirm = await p
|
|
.locator('[data-toggle]')
|
|
.first()
|
|
.evaluate((el: Element) => ({
|
|
ds: el.getAttribute('data-state'),
|
|
dc: el.getAttribute('data-color'),
|
|
bg: getComputedStyle(el).backgroundColor
|
|
}));
|
|
console.log('AFTER intent=affirm', JSON.stringify(afterAffirm));
|
|
// Toggle pressed=true via first switch (the "pressed" control)
|
|
const pressedInput = p.locator('span[data-uix-switch] input[type="checkbox"]').first();
|
|
await pressedInput.check();
|
|
await p.waitForTimeout(200);
|
|
const afterPressed = await p
|
|
.locator('[data-toggle]')
|
|
.first()
|
|
.evaluate((el: Element) => ({
|
|
ds: el.getAttribute('data-state'),
|
|
dc: el.getAttribute('data-color'),
|
|
ariaPressed: el.getAttribute('aria-pressed'),
|
|
bg: getComputedStyle(el).backgroundColor
|
|
}));
|
|
console.log('AFTER pressed=true + intent=affirm', JSON.stringify(afterPressed));
|
|
// Try threat
|
|
const threatChip = p.locator('button[data-uix-chip]:has-text("threat")').first();
|
|
await threatChip.click();
|
|
await p.waitForTimeout(200);
|
|
const afterThreat = await p
|
|
.locator('[data-toggle]')
|
|
.first()
|
|
.evaluate((el: Element) => ({
|
|
ds: el.getAttribute('data-state'),
|
|
dc: el.getAttribute('data-color'),
|
|
bg: getComputedStyle(el).backgroundColor
|
|
}));
|
|
console.log('AFTER intent=threat (pressed=true)', JSON.stringify(afterThreat));
|
|
await b.close();
|