314 lines
16 KiB
JavaScript
314 lines
16 KiB
JavaScript
#!/usr/bin/env node
|
||
/**
|
||
* ui-check.mjs — 群聊台的点击手感验收。
|
||
*
|
||
* 关键点：用 CDP 派发**真实的 mousePressed / mouseReleased**（不是 element.click()）。
|
||
* 病根是"按钮在你的 mousedown 和 mouseup 之间被 innerHTML 重建掉，click 事件根本不会触发"，
|
||
* 只有真实鼠标事件才能复现它。
|
||
*
|
||
* 量的是"点击 → 肉眼可见变化"的耗时（页面内 rAF 计时，分辨率约 1 帧）。
|
||
*
|
||
* 用法：node tools/ui-check.mjs [url] [--keep]
|
||
*/
|
||
|
||
import fs from 'node:fs';
|
||
import os from 'node:os';
|
||
import path from 'node:path';
|
||
import { spawn } from 'node:child_process';
|
||
|
||
const URL_ = process.argv[2] && !process.argv[2].startsWith('--') ? process.argv[2] : 'http://127.0.0.1:3099/';
|
||
const KEEP = process.argv.includes('--keep');
|
||
const PORT = 9331;
|
||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
||
const EDGE = ['C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
||
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe'].find((p) => fs.existsSync(p));
|
||
if (!EDGE) { console.error('找不到 msedge.exe'); process.exit(2); }
|
||
|
||
const results = [];
|
||
function step(name, ok, detail = '') {
|
||
results.push({ name, ok, detail });
|
||
console.log(`${ok ? 'PASS' : 'FAIL'} ${name}${detail ? ' ' + detail : ''}`);
|
||
}
|
||
|
||
class Cdp {
|
||
constructor(ws) { this.ws = ws; this.id = 0; this.pending = new Map(); this.errors = []; }
|
||
static async connect(url) {
|
||
const ws = new WebSocket(url);
|
||
await new Promise((res, rej) => {
|
||
ws.addEventListener('open', res, { once: true });
|
||
ws.addEventListener('error', () => rej(new Error('CDP 连接失败')), { once: true });
|
||
});
|
||
const c = new Cdp(ws);
|
||
ws.addEventListener('message', (ev) => {
|
||
let m; try { m = JSON.parse(ev.data); } catch { return; }
|
||
if (m.id && c.pending.has(m.id)) {
|
||
const { resolve, reject } = c.pending.get(m.id);
|
||
c.pending.delete(m.id);
|
||
if (m.error) reject(new Error(m.error.message)); else resolve(m.result);
|
||
} else if (m.method === 'Runtime.exceptionThrown') {
|
||
const d = m.params.exceptionDetails;
|
||
c.errors.push('EXCEPTION: ' + (d.exception?.description || d.text || '').split('\n')[0]);
|
||
} else if (m.method === 'Runtime.consoleAPICalled' && m.params.type === 'error') {
|
||
c.errors.push('console.error: ' + m.params.args.map((a) => a.value || a.description || '').join(' '));
|
||
}
|
||
});
|
||
return c;
|
||
}
|
||
send(method, params = {}) {
|
||
const id = ++this.id;
|
||
return new Promise((resolve, reject) => {
|
||
this.pending.set(id, { resolve, reject });
|
||
this.ws.send(JSON.stringify({ id, method, params }));
|
||
setTimeout(() => { if (this.pending.has(id)) { this.pending.delete(id); reject(new Error(method + ' 超时')); } }, 30000);
|
||
});
|
||
}
|
||
async eval(expression, awaitPromise = false) {
|
||
const r = await this.send('Runtime.evaluate', { expression, awaitPromise, returnByValue: true });
|
||
if (r.exceptionDetails) throw new Error(r.exceptionDetails.exception?.description || 'eval 抛错');
|
||
return r.result?.value;
|
||
}
|
||
async rect(selector) {
|
||
const j = await this.eval(`(() => { const e = document.querySelector(${JSON.stringify(selector)}); if (!e) return null; const r = e.getBoundingClientRect(); return {x: r.left + r.width/2, y: r.top + r.height/2, w: r.width, h: r.height}; })()`);
|
||
return j;
|
||
}
|
||
/** 真实鼠标点击：按下与抬起分开派发，中间留出被"重建"打断的窗口。 */
|
||
async clickAt(x, y, { holdMs = 45 } = {}) {
|
||
await this.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x, y, button: 'none', clickCount: 0 });
|
||
await this.send('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', buttons: 1, clickCount: 1 });
|
||
await sleep(holdMs);
|
||
await this.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', buttons: 0, clickCount: 1 });
|
||
}
|
||
}
|
||
|
||
/* --------------------------------------------------------------- 启动浏览器 */
|
||
|
||
const profile = fs.mkdtempSync(path.join(os.tmpdir(), 'aig-ui-'));
|
||
const edge = spawn(EDGE, [
|
||
'--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check',
|
||
'--disable-extensions', '--hide-scrollbars', '--window-size=1440,1000',
|
||
`--remote-debugging-port=${PORT}`, `--user-data-dir=${profile}`, 'about:blank',
|
||
], { stdio: 'ignore', windowsHide: true });
|
||
|
||
async function browserWsUrl() {
|
||
for (let i = 0; i < 60; i++) {
|
||
try {
|
||
const list = await (await fetch(`http://127.0.0.1:${PORT}/json/list`)).json();
|
||
const page = list.find((t) => t.type === 'page' && t.webSocketDebuggerUrl);
|
||
if (page) return page.webSocketDebuggerUrl;
|
||
} catch { /* 还没起来 */ }
|
||
await sleep(250);
|
||
}
|
||
throw new Error('浏览器调试端口没起来');
|
||
}
|
||
|
||
let cdp;
|
||
try {
|
||
cdp = await Cdp.connect(await browserWsUrl());
|
||
await cdp.send('Runtime.enable');
|
||
await cdp.send('Page.enable');
|
||
await cdp.send('Page.navigate', { url: URL_ });
|
||
// 等页面真正就绪：出现成员卡片
|
||
for (let i = 0; i < 60; i++) {
|
||
await sleep(250);
|
||
const ready = await cdp.eval('document.querySelectorAll(".mcard").length').catch(() => 0);
|
||
if (ready > 0) break;
|
||
}
|
||
|
||
await cdp.eval(`window.__awaitChange = function (done, timeoutMs) {
|
||
return new Promise(function (resolve) {
|
||
var t0 = performance.now();
|
||
function check() {
|
||
var v = false; try { v = done(); } catch (e) {}
|
||
if (v) return resolve(Math.round(performance.now() - t0));
|
||
if (performance.now() - t0 > timeoutMs) return resolve(-1);
|
||
requestAnimationFrame(check);
|
||
}
|
||
requestAnimationFrame(check);
|
||
});
|
||
};`);
|
||
|
||
const members = await cdp.eval('[...document.querySelectorAll(".mcard")].map(c => c.dataset.member)');
|
||
step('页面渲染出成员卡片', Array.isArray(members) && members.length >= 3, `成员：${(members || []).join(', ')}`);
|
||
|
||
/** 点击某个选择器指向的元素，并量到可见变化为止 */
|
||
async function clickAndMeasure(label, selector, condition, { holdMs = 45, timeout = 3000 } = {}) {
|
||
const r = await cdp.rect(selector);
|
||
if (!r) { step(label, false, '找不到元素 ' + selector); return -1; }
|
||
await cdp.eval(`window.__p = window.__awaitChange(function(){ return ${condition}; }, ${timeout})`);
|
||
await cdp.clickAt(r.x, r.y, { holdMs });
|
||
const ms = await cdp.eval('window.__p', true);
|
||
return ms;
|
||
}
|
||
|
||
/* 1. @ 它（纯本地动作，应该感觉不到延迟） */
|
||
{
|
||
const ms = await clickAndMeasure('点「@ 它」→ 目标切到该成员', '.mcard[data-member="opencode"] .mact button:nth-child(2)',
|
||
'document.getElementById("target").value === "opencode"');
|
||
step('点「@ 它」立刻切换目标', ms >= 0 && ms < 120, `${ms} ms`);
|
||
}
|
||
|
||
/* 2. 自驱开关 */
|
||
let autoBefore = null;
|
||
{
|
||
autoBefore = await fetch(URL_.replace(/\/$/, '') + '/api/state').then((r) => r.json()).then((s) => s.auto).catch(() => null);
|
||
const before = await cdp.eval('document.getElementById("autoBtn").textContent');
|
||
const want = before.includes('开') ? '自驱：关' : '自驱：开';
|
||
const ms = await clickAndMeasure('点「自驱」→ 标签翻转', '#autoBtn',
|
||
`document.getElementById("autoBtn").textContent.includes(${JSON.stringify(want)})`);
|
||
step('点「自驱」立刻翻转', ms >= 0 && ms < 400, `${ms} ms（${before.trim()} → ${want}）`);
|
||
}
|
||
|
||
/* 3. 发送：自己的话必须立刻出现在屏幕上（乐观回显） */
|
||
const sendText = 'UI 验收 ' + Date.now() + '：这条应当立刻出现';
|
||
{
|
||
await cdp.eval(`(() => { const t = document.getElementById('text'); t.value = ${JSON.stringify(sendText)}; t.dispatchEvent(new Event('input')); document.getElementById('target').value = '__all__'; return true; })()`);
|
||
const ms = await clickAndMeasure('点「只发不唤醒」→ 立刻看到自己说的话', '#sendOnlyBtn',
|
||
`[...document.querySelectorAll(".row.pending .text")].some(e => e.textContent.includes(${JSON.stringify(sendText)}))`, { timeout: 2000 });
|
||
step('发出的消息立刻回显（乐观渲染）', ms >= 0 && ms < 150, `${ms} ms`);
|
||
}
|
||
|
||
/* 4. 服务端确认后不留重复气泡（文本带时间戳，避免和上一轮历史撞车） */
|
||
{
|
||
let n = -1;
|
||
for (let i = 0; i < 40; i++) {
|
||
await sleep(150);
|
||
n = await cdp.eval(`[...document.querySelectorAll(".text")].filter(e => e.textContent.includes(${JSON.stringify(sendText)})).length`);
|
||
if (n >= 1) break;
|
||
}
|
||
await sleep(700);
|
||
const after = await cdp.eval(`[...document.querySelectorAll(".text")].filter(e => e.textContent.includes(${JSON.stringify(sendText)})).length`);
|
||
step('服务端确认后不出现重复气泡', after === 1, `气泡数 = ${after}`);
|
||
}
|
||
|
||
/* 5. 节点稳定性：成员卡片与按钮绝不能被周期重建（这就是"点击丢失"的根因） */
|
||
{
|
||
const id1 = await cdp.eval(`(() => { const c = document.querySelector('.mcard[data-member="opencode"]'); c.__probe = Math.random().toString(36); const b = c.querySelector('.mact button'); b.__probe = Math.random().toString(36); return [c.__probe, b.__probe]; })()`);
|
||
await sleep(6000); // 跨越 5s 的 state 轮询与 250ms 的任务计时器
|
||
const id2 = await cdp.eval(`(() => { const c = document.querySelector('.mcard[data-member="opencode"]'); const b = c ? c.querySelector('.mact button') : null; return { card: c && c.__probe, btn: b && b.__probe, connected: Boolean(c && c.isConnected) }; })()`);
|
||
const same = id2.card === id1[0] && id2.btn === id1[1] && id2.connected;
|
||
step('6 秒内成员卡片与按钮从未被重建', same, same ? '节点身份保持不变' : `卡片 ${id1[0]}→${id2.card}，按钮 ${id1[1]}→${id2.btn}`);
|
||
}
|
||
|
||
/* 6. 渲染压力下连续快速点击不丢事件
|
||
—— 直接数按钮自己收到的 click 事件（这才是"点击有没有落到元素上"的判据；
|
||
上一版测试用 target.value 赋值来看 change 事件是错的：程序化赋值不触发 change） */
|
||
{
|
||
const sel = '.mcard[data-member="workbuddy"] .mact button:nth-child(2)';
|
||
const r = await cdp.rect(sel);
|
||
await cdp.eval(`(() => { const b = document.querySelector(${JSON.stringify(sel)}); b.__hits = 0; b.addEventListener('click', () => { b.__hits++; }); return true; })()`);
|
||
// 制造真实的渲染压力：点的时候同时往群里灌消息，逼服务端推 SSE → 前端 syncMembers/loadState
|
||
const churn = (async () => {
|
||
for (let i = 0; i < 4; i++) {
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/send', {
|
||
method: 'POST', headers: { 'content-type': 'application/json' },
|
||
body: JSON.stringify({ text: '渲染压力 ' + i, to: [] }),
|
||
}).catch(() => {});
|
||
await sleep(120);
|
||
}
|
||
})();
|
||
for (let i = 0; i < 8; i++) { await cdp.clickAt(r.x, r.y, { holdMs: 20 }); await sleep(55); }
|
||
await churn;
|
||
const hits = await cdp.eval(`document.querySelector(${JSON.stringify(sel)}).__hits`);
|
||
step('渲染压力下连续 8 次快速点击全部命中', hits === 8, `命中 ${hits}/8`);
|
||
}
|
||
|
||
/* 6b. 服务端推送延迟：以 human 身份发一条，量它出现在屏幕上的时间 */
|
||
{
|
||
const text = '推送延迟测量 ' + Date.now();
|
||
await cdp.eval(`window.__p = window.__awaitChange(function(){ return [...document.querySelectorAll('.text')].some(e => e.textContent.includes(${JSON.stringify(text)})); }, 4000)`);
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/send', {
|
||
method: 'POST', headers: { 'content-type': 'application/json' },
|
||
body: JSON.stringify({ text, to: [] }),
|
||
});
|
||
const ms = await cdp.eval('window.__p', true);
|
||
step('别人发的消息推到屏幕上', ms >= 0 && ms < 400, `${ms} ms`);
|
||
}
|
||
|
||
/* 7. 唤醒按钮：点下去必须立刻变"唤醒中…"，并且能中止 */
|
||
{
|
||
// 先把验收期间带起来的其它任务清干净，免得任务条重排把鼠标点偏（上一版就栽在这）
|
||
const jj0 = await fetch(URL_.replace(/\/$/, '') + '/api/jobs').then((r) => r.json()).catch(() => ({ jobs: [] }));
|
||
for (const j of (jj0.jobs || []).filter((x) => x.status === 'running')) {
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/cancel', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: j.id }) }).catch(() => {});
|
||
}
|
||
for (let i = 0; i < 20; i++) {
|
||
const st = await fetch(URL_.replace(/\/$/, '') + '/api/state').then((r) => r.json()).catch(() => ({ running: [] }));
|
||
if (!(st.running || []).length) break;
|
||
await sleep(300);
|
||
}
|
||
|
||
const ms = await clickAndMeasure('点「唤醒它」→ 立刻变唤醒中', '.mcard[data-member="workbuddy"] .mact button:nth-child(1)',
|
||
'(() => { const b = document.querySelector(\'.mcard[data-member="workbuddy"] .mact button\'); return Boolean(b && b.disabled && /唤醒中|工作中/.test(b.textContent)); })()', { timeout: 3000 });
|
||
step('点「唤醒它」立刻给出反馈', ms >= 0 && ms < 200, `${ms} ms`);
|
||
|
||
let running = null;
|
||
for (let i = 0; i < 30; i++) {
|
||
const jobs = await fetch(URL_.replace(/\/$/, '') + '/api/jobs').then((r) => r.json()).catch(() => ({ jobs: [] }));
|
||
running = (jobs.jobs || []).find((j) => j.status === 'running' && j.member === 'workbuddy');
|
||
if (running) break;
|
||
await sleep(300);
|
||
}
|
||
if (running) {
|
||
const sel = `.row.typing[data-job="${running.id}"] .stop`;
|
||
await cdp.eval(`(() => { const b = document.querySelector(${JSON.stringify(sel)}); if (b) b.scrollIntoView({block:'center'}); return true; })()`);
|
||
await sleep(250);
|
||
const stopRect = await cdp.rect(sel); // 点之前重取坐标
|
||
const msStop = stopRect ? await (async () => {
|
||
await cdp.eval(`window.__p = window.__awaitChange(function(){ const b = document.querySelector(${JSON.stringify(sel)}); return Boolean(b && b.disabled === true); }, 3000)`);
|
||
await cdp.clickAt(stopRect.x, stopRect.y);
|
||
return cdp.eval('window.__p', true);
|
||
})() : -1;
|
||
step('点「中止」立刻有反馈', msStop >= 0 && msStop < 200, `${msStop} ms`);
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/cancel', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: running.id }) });
|
||
let cancelled = false;
|
||
for (let i = 0; i < 40; i++) {
|
||
await sleep(300);
|
||
const jj = await fetch(URL_.replace(/\/$/, '') + '/api/jobs').then((r) => r.json()).catch(() => ({ jobs: [] }));
|
||
const j = (jj.jobs || []).find((x) => x.id === running.id);
|
||
if (j && j.status !== 'running') { cancelled = true; break; }
|
||
}
|
||
step('中止后任务真的停了', cancelled, running.id);
|
||
let freed = false;
|
||
for (let i = 0; i < 20; i++) {
|
||
const st = await fetch(URL_.replace(/\/$/, '') + '/api/state').then((r) => r.json()).catch(() => ({ running: [] }));
|
||
if (!(st.running || []).includes('workbuddy')) { freed = true; break; }
|
||
await sleep(300);
|
||
}
|
||
step('中止后成员锁被释放', freed, '');
|
||
} else {
|
||
step('中止按钮可用', false, '没找到正在跑的 workbuddy 任务');
|
||
}
|
||
}
|
||
|
||
/* 8. 页面无 JS 报错 */
|
||
await sleep(400);
|
||
step('页面无未捕获异常', cdp.errors.length === 0, cdp.errors.slice(0, 2).join(' | '));
|
||
|
||
/* 收尾：把自驱恢复成本次验收开始时的状态（别把用户的开关改掉），并中止验收期间带起的任务 */
|
||
if (autoBefore !== null) {
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/auto', {
|
||
method: 'POST', headers: { 'content-type': 'application/json' },
|
||
body: JSON.stringify({ enabled: autoBefore }),
|
||
}).catch(() => {});
|
||
}
|
||
try {
|
||
const jj = await fetch(URL_.replace(/\/$/, '') + '/api/jobs').then((r) => r.json());
|
||
for (const j of (jj.jobs || []).filter((x) => x.status === 'running')) {
|
||
await fetch(URL_.replace(/\/$/, '') + '/api/cancel', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: j.id }) });
|
||
}
|
||
if ((jj.jobs || []).some((x) => x.status === 'running')) step('收尾中止遗留任务', true, '已请求中止');
|
||
} catch { /* 忽略 */ }
|
||
} catch (e) {
|
||
step('验收脚本执行', false, e.message);
|
||
} finally {
|
||
try { cdp?.ws.close(); } catch { /* 忽略 */ }
|
||
try { edge.kill(); } catch { /* 忽略 */ }
|
||
if (!KEEP) { await sleep(300); try { fs.rmSync(profile, { recursive: true, force: true }); } catch { /* 忽略 */ } }
|
||
}
|
||
|
||
const bad = results.filter((r) => !r.ok);
|
||
console.log('\n' + '─'.repeat(56));
|
||
console.log(bad.length ? `✘ ${results.length - bad.length}/${results.length} 通过，失败 ${bad.length} 项` : `✔ 全部通过（${results.length}/${results.length}）`);
|
||
process.exit(bad.length ? 1 : 0);
|