39 lines
3.1 KiB
JavaScript
39 lines
3.1 KiB
JavaScript
import { loadPlaywright, launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
|
|
import { writeFile } from 'node:fs/promises';
|
|
await loadPlaywright();
|
|
const browser = await launchChromium({ headless: true });
|
|
try {
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
|
|
await page.goto('http://127.0.0.1:6027/iframe.html?id=orgchart--full-composition&viewMode=story');
|
|
await page.waitForFunction(() => document.querySelector('.hm-orgchart-host')?.shadowRoot?.querySelector('.hm-orgchart-toggle'));
|
|
const result = await page.evaluate(async () => {
|
|
const root = document.querySelector('.hm-orgchart-host').shadowRoot;
|
|
await document.fonts.ready;
|
|
const shell = root.querySelector('.hm-orgchart-shell');
|
|
const read = (element, pseudo) => {
|
|
const css = getComputedStyle(element, pseudo);
|
|
return { background: css.backgroundColor, border: css.borderTopColor, borderWidth: css.borderTopWidth, outline: css.outlineColor, outlineWidth: css.outlineWidth, outlineStyle: css.outlineStyle, content: css.content };
|
|
};
|
|
const hierarchy = [...root.querySelectorAll('.hierarchy')].find(element => getComputedStyle(element, '::before').content !== 'none');
|
|
const node = [...root.querySelectorAll('.node')].find(element => getComputedStyle(element, '::before').content !== 'none');
|
|
const backgroundChain = [];
|
|
for (let element = root.querySelector('.hm-orgchart-engine'); element; element = element.parentElement ?? element.getRootNode()?.host) {
|
|
const css = getComputedStyle(element);
|
|
backgroundChain.push({ className: element.className, tag: element.tagName, background: css.backgroundColor, image: css.backgroundImage });
|
|
}
|
|
return { canvas: getComputedStyle(shell).backgroundColor, viewport: read(root.querySelector('.hm-orgchart-viewport')),
|
|
backgroundChain,
|
|
hierarchy: hierarchy ? read(hierarchy, '::before') : null, node: node ? read(node, '::before') : null,
|
|
toggle: read(root.querySelector('.hm-orgchart-toggle')), resolved: Object.fromEntries(['stroke-default', 'stroke-input-focus', 'bg-content', 'bg-surface'].map(key => [key, getComputedStyle(shell).getPropertyValue('--hm-orgchart-resolved-' + key).trim()])) };
|
|
});
|
|
await page.keyboard.press('Tab');
|
|
const focused = await page.evaluate(() => {
|
|
const root = document.querySelector('.hm-orgchart-host').shadowRoot;
|
|
const viewport = root.querySelector('.hm-orgchart-viewport'); viewport.focus();
|
|
const css = getComputedStyle(viewport);
|
|
return { focusVisible: viewport.matches(':focus-visible'), outline: css.outlineColor, width: css.outlineWidth, style: css.outlineStyle };
|
|
});
|
|
await writeFile('test-results/org-chart-quality/boundaries.json', JSON.stringify({ ...result, focused, interpretation: 'Hierarchy connection lines convey parent-child relation; retain contrast REVIEW instead of automatically treating all lines as decorative. Button text identifies the control, frame decoration alone is not automatically SC 1.4.11 failure.' }, null, 2));
|
|
console.log(JSON.stringify({ ...result, focused }));
|
|
} finally { await browser.close(); }
|