52 lines
3.0 KiB
JavaScript
52 lines
3.0 KiB
JavaScript
|
// 验证「首页顶部数据预览」条带（参考 dsh-plugin-mcn 首页 stats）：只读测量
|
||
|
|
const list = await fetch('http://localhost:9223/json').then((r) => r.json());
|
||
|
|
let page = list.find((t) => t.type === 'page' && t.url.includes('localhost:8899'));
|
||
|
|
if (!page) { console.log('ERR: no workbuddy page open'); process.exit(1); }
|
||
|
|
const ws = new WebSocket(page.webSocketDebuggerUrl);
|
||
|
|
let id = 0; const pending = new Map();
|
||
|
|
const send = (method, params = {}) => new Promise((res, rej) => { const i = ++id; pending.set(i, { res, rej }); ws.send(JSON.stringify({ id: i, method, params })); });
|
||
|
|
ws.onmessage = (e) => { const m = JSON.parse(e.data); if (m.id && pending.has(m.id)) { const p = pending.get(m.id); pending.delete(m.id); m.error ? p.rej(new Error(m.error.message)) : p.res(m.result); } };
|
||
|
|
await new Promise((r) => (ws.onopen = r));
|
||
|
|
const ev = async (expr) => { const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true }); if (r.exceptionDetails) return { __err: (r.exceptionDetails.exception?.description || r.exceptionDetails.text).slice(0, 300) }; return r.result.value; };
|
||
|
|
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
|
await send('Page.enable'); await send('Runtime.enable');
|
||
|
|
|
||
|
|
// 1) 导航到首页并强制刷新加载最新代码（纯 hash 变化不触发文档重载，必须 reload）
|
||
|
|
await send('Page.navigate', { url: 'http://localhost:8899/#/' });
|
||
|
|
await sleep(1500);
|
||
|
|
await send('Page.reload', { ignoreCache: true });
|
||
|
|
await sleep(3000);
|
||
|
|
|
||
|
|
// 2) 检查 stats 条带结构 + 渲染值 + 样式
|
||
|
|
const check = await ev(`(() => {
|
||
|
|
const el = document.getElementById('homeStats');
|
||
|
|
if (!el) return { err: 'no #homeStats' };
|
||
|
|
const items = [...el.querySelectorAll('.home-stat-item')];
|
||
|
|
return {
|
||
|
|
count: items.length,
|
||
|
|
values: items.map((i) => ({ v: i.querySelector('.home-stat-value').textContent, l: i.querySelector('.home-stat-label').textContent })),
|
||
|
|
position: el.previousElementSibling ? el.previousElementSibling.className : '(first in .home)',
|
||
|
|
next: el.nextElementSibling ? el.nextElementSibling.className : '',
|
||
|
|
};
|
||
|
|
})()`);
|
||
|
|
console.log('条带结构:', JSON.stringify(check, null, 1));
|
||
|
|
|
||
|
|
// 3) computed 样式核对（条带底色 / 数字色 / item 分隔线）
|
||
|
|
const styleCheck = await ev(`(() => {
|
||
|
|
const el = document.getElementById('homeStats');
|
||
|
|
if (!el) return { err: 'no el' };
|
||
|
|
const cs = getComputedStyle(el);
|
||
|
|
const v = getComputedStyle(el.querySelector('.home-stat-value'));
|
||
|
|
const item = el.querySelector('.home-stat-item');
|
||
|
|
const its = getComputedStyle(item);
|
||
|
|
return {
|
||
|
|
statsBg: cs.backgroundColor, statsRadius: cs.borderRadius, statsPadding: cs.padding,
|
||
|
|
valueColor: v.color, valueSize: v.fontSize, valueWeight: v.fontWeight,
|
||
|
|
itemBorderRight: its.borderRightWidth + ' ' + its.borderRightStyle,
|
||
|
|
itemLast: getComputedStyle(el.querySelector('.home-stat-item:last-child')).borderRightWidth,
|
||
|
|
};
|
||
|
|
})()`);
|
||
|
|
console.log('样式:', JSON.stringify(styleCheck));
|
||
|
|
|
||
|
|
ws.close();
|
||
|
|
console.log('DONE');
|