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.
59 lines
2.0 KiB
59 lines
2.0 KiB
/**
|
|
* Verify the eidos toggle reflects intent + color in the on state.
|
|
* Sets pressed=true via the controls switch, then cycles intents.
|
|
*/
|
|
import { chromium } from 'playwright';
|
|
import { mkdir } from 'node:fs/promises';
|
|
|
|
const BASE = process.env.BASE_URL ?? 'http://localhost:5177';
|
|
const OUT = 'g:/tmp/demos';
|
|
|
|
async function main() {
|
|
await mkdir(OUT, { recursive: true });
|
|
const b = await chromium.launch();
|
|
const ctx = await b.newContext({ viewport: { width: 1280, height: 1100 } });
|
|
const p = await ctx.newPage();
|
|
const errs: string[] = [];
|
|
p.on('console', (m) => {
|
|
if (m.type() === 'error') errs.push(m.text());
|
|
});
|
|
|
|
await p.goto(BASE + '/toggle', { waitUntil: 'networkidle' });
|
|
await p.waitForTimeout(300);
|
|
|
|
// Find the "pressed" control switch and click it (so the toggle is ON).
|
|
const pressedSwitch = p.locator('.controls-grid .switch:has(span:text("pressed")) input').first();
|
|
await pressedSwitch.check();
|
|
await p.waitForTimeout(200);
|
|
|
|
// Enable checkMark + icon
|
|
await p.locator('.controls-grid .switch:has(span:text("checkMark")) input').check();
|
|
await p.locator('.controls-grid .switch:has(span:text("icon (slot)")) input').check();
|
|
await p.waitForTimeout(200);
|
|
|
|
// Cycle intents and capture each
|
|
for (const i of ['neutral', 'affirm', 'risk', 'threat'] as const) {
|
|
const select = p.locator('.controls-grid select').first();
|
|
await select.selectOption(i);
|
|
await p.waitForTimeout(200);
|
|
// Get just the toggle button DOM state
|
|
const dataColor = await p.locator('[data-toggle]').getAttribute('data-color');
|
|
const dataState = await p.locator('[data-toggle]').getAttribute('data-state');
|
|
console.log(`intent=${i} → data-color=${dataColor} data-state=${dataState}`);
|
|
await p.screenshot({
|
|
path: `${OUT}/toggle-on-${i}.png`,
|
|
fullPage: false,
|
|
clip: { x: 280, y: 380, width: 700, height: 200 }
|
|
});
|
|
}
|
|
|
|
console.log('errors:', errs.length);
|
|
for (const e of errs) console.log(' ' + e.slice(0, 200));
|
|
await b.close();
|
|
}
|
|
|
|
main().catch((e) => {
|
|
console.error(e);
|
|
process.exit(1);
|
|
});
|