273 lines
13 KiB
JavaScript
273 lines
13 KiB
JavaScript
'use strict';
|
||
|
||
/**
|
||
* 界面运行时验收（新界面：shadcn/ui + Tailwind + Vite）。
|
||
*
|
||
* 验的是「界面真的能用」而不是「代码看起来对」：
|
||
* 1. 打开页面，收集所有 JS 异常与控制台报错
|
||
* 2. 断言真实数据渲染（文件夹、邮件行）
|
||
* 3. 走一遍交互：点邮件 → 阅读区出主题与正文；打开撰写 → 弹窗与字段就位
|
||
* 4. 断言主题切换与暗色是生效的（对比 body 背景色）
|
||
*
|
||
* 用法：node tools/ui-check.js [url]
|
||
*/
|
||
|
||
const { spawn } = require('node:child_process');
|
||
const fs = require('node:fs');
|
||
const os = require('node:os');
|
||
const path = require('node:path');
|
||
|
||
const URL_ = process.argv[2] || 'http://127.0.0.1:8788/';
|
||
const PORT = 9224;
|
||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
||
const report = [];
|
||
const results = [];
|
||
function say(s = '') { report.push(s); }
|
||
function step(name, ok, detail = '') {
|
||
results.push({ name, ok, detail });
|
||
report.push(`${ok ? '[PASS]' : '[FAIL]'} ${name}${detail ? ' —— ' + detail : ''}`);
|
||
process.stdout.write(`${ok ? 'PASS' : 'FAIL'} ${name}\n`);
|
||
}
|
||
async function safeStep(name, fn) {
|
||
try { return await fn(); } catch (err) { step(name, false, `${err.name}: ${err.message}`); return undefined; }
|
||
}
|
||
|
||
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 && d.exception.description ? d.exception.description.split('\n')[0] : d.text));
|
||
} 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(' '));
|
||
} else if (m.method === 'Log.entryAdded' && m.params.entry.level === 'error') {
|
||
c.errors.push('log: ' + m.params.entry.text);
|
||
}
|
||
});
|
||
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 + ' 超时')); } }, 20000);
|
||
});
|
||
}
|
||
async eval(expression) {
|
||
const r = await this.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true });
|
||
if (r.exceptionDetails) throw new Error(r.exceptionDetails.text || 'evaluate 异常');
|
||
return r.result ? r.result.value : undefined;
|
||
}
|
||
}
|
||
|
||
(async () => {
|
||
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) { process.stderr.write('找不到 msedge.exe\n'); process.exit(2); }
|
||
|
||
const profile = fs.mkdtempSync(path.join(os.tmpdir(), 'wpyw-ui2-'));
|
||
const child = spawn(edge, ['--headless=new', `--remote-debugging-port=${PORT}`, `--user-data-dir=${profile}`,
|
||
'--no-first-run', '--no-default-browser-check', '--disable-extensions', '--window-size=1440,900', URL_],
|
||
{ stdio: 'ignore' });
|
||
|
||
let cdp = null;
|
||
try {
|
||
let target = null;
|
||
for (let i = 0; i < 50 && !target; i++) {
|
||
await sleep(400);
|
||
try {
|
||
const list = await (await fetch(`http://127.0.0.1:${PORT}/json/list`)).json();
|
||
target = list.find((t) => t.type === 'page' && t.webSocketDebuggerUrl);
|
||
} catch { /* 等 */ }
|
||
}
|
||
if (!target) throw new Error('等不到 Edge 调试目标');
|
||
cdp = await Cdp.connect(target.webSocketDebuggerUrl);
|
||
await cdp.send('Runtime.enable');
|
||
await cdp.send('Log.enable');
|
||
await cdp.send('Page.enable');
|
||
await cdp.send('Page.navigate', { url: URL_ });
|
||
|
||
say('═'.repeat(74));
|
||
say('WpywMail 客户端界面验收（shadcn/ui 版）');
|
||
say(`页面：${URL_}`);
|
||
say(`时间：${new Date().toLocaleString('zh-CN')}`);
|
||
say('═'.repeat(74));
|
||
say('');
|
||
|
||
// 等列表渲染
|
||
let rows = 0;
|
||
for (let i = 0; i < 50; i++) {
|
||
await sleep(500);
|
||
rows = await cdp.eval('document.querySelectorAll("[data-uid]").length');
|
||
if (rows > 0) break;
|
||
}
|
||
step('页面加载并渲染出邮件列表', rows > 0, `${rows} 行`);
|
||
|
||
const shell = await cdp.eval(`(() => ({
|
||
aside: !!document.querySelector('aside'),
|
||
folderButtons: document.querySelectorAll('aside nav button').length,
|
||
listHeader: (document.querySelectorAll('h2')[0] || {}).textContent || '',
|
||
countText: [...document.querySelectorAll('span')].map(s => s.textContent).find(t => /^\\d+ 封$/.test(t || '')) || '',
|
||
displaySubject: (document.querySelector('h1') || {}).textContent || '',
|
||
bg: getComputedStyle(document.body).backgroundColor,
|
||
}))()`);
|
||
step('侧栏与文件夹渲染', shell.aside && shell.folderButtons >= 5, `${shell.folderButtons} 个文件夹按钮`);
|
||
step('列表头与计数渲染', !!shell.listHeader, `${shell.listHeader} · ${shell.countText}`);
|
||
|
||
// 点第一封
|
||
await safeStep('点击邮件', async () => {
|
||
await cdp.eval('document.querySelector("[data-uid]").click()');
|
||
let ok = false;
|
||
let subject = '';
|
||
let detail = '';
|
||
for (let i = 0; i < 30 && !ok; i++) {
|
||
await sleep(500);
|
||
const r = await cdp.eval(`(() => {
|
||
const h1 = document.querySelector('h1');
|
||
const body = document.querySelector('.mail-body');
|
||
const frame = document.querySelector('#html-body');
|
||
return {
|
||
subject: h1 ? h1.textContent : '',
|
||
bodyLen: body ? body.textContent.length : 0,
|
||
frameLen: frame && frame.getAttribute('srcdoc') ? frame.getAttribute('srcdoc').length : 0,
|
||
};
|
||
})()`);
|
||
subject = r.subject;
|
||
detail = `纯文本 ${r.bodyLen} 字 / 富文本 iframe ${r.frameLen} 字节`;
|
||
// 有 HTML 正文时阅读区用沙箱 iframe 渲染（见 ui-check-v4），所以两种形态都算通过
|
||
ok = r.bodyLen > 0 || r.frameLen > 0;
|
||
}
|
||
step('点击后阅读区显示主题与正文', ok, `${subject}（${detail}）`);
|
||
});
|
||
|
||
// 滚动：在列表上滚滚轮，整页必须纹丝不动、列表自己滚
|
||
await safeStep('滚动隔离', async () => {
|
||
const page = await cdp.eval(`({
|
||
scrollH: document.documentElement.scrollHeight,
|
||
innerH: window.innerHeight,
|
||
bodyH: document.body.scrollHeight,
|
||
})`);
|
||
step('页面本身不产生滚动条（滚动只发生在栏内）',
|
||
page.scrollH <= page.innerH + 1 && page.bodyH <= page.innerH + 1,
|
||
`doc=${page.scrollH} body=${page.bodyH} 视口=${page.innerH}`);
|
||
|
||
const box = await cdp.eval(`(() => {
|
||
const el = document.querySelector('.scroll-pane');
|
||
if (!el) return null;
|
||
const r = el.getBoundingClientRect();
|
||
return { x: Math.round(r.left + r.width / 2), y: Math.round(r.top + r.height / 2), canScroll: el.scrollHeight > el.clientHeight, sh: el.scrollHeight, ch: el.clientHeight };
|
||
})()`);
|
||
if (!box) { step('找到列表滚动容器', false, '没有 .scroll-pane'); return; }
|
||
step('列表容器是可滚动的（内容高于容器）', box.canScroll, `scrollHeight=${box.sh} clientHeight=${box.ch}`);
|
||
|
||
const before = await cdp.eval('document.querySelector(".scroll-pane").scrollTop');
|
||
// 真实滚轮事件（走浏览器输入管线，能测到事件冒泡与滚动穿透）
|
||
await cdp.send('Input.dispatchMouseEvent', {
|
||
type: 'mouseWheel', x: box.x, y: box.y, deltaX: 0, deltaY: 400,
|
||
});
|
||
await sleep(600);
|
||
const after = await cdp.eval('({ listTop: document.querySelector(".scroll-pane").scrollTop, winY: window.scrollY })');
|
||
step('滚轮滚动的是列表而不是整页',
|
||
after.listTop > before && after.winY === 0,
|
||
`列表 scrollTop ${before} → ${after.listTop}；window.scrollY=${after.winY}`);
|
||
});
|
||
|
||
// 撰写弹窗
|
||
await safeStep('撰写弹窗', async () => {
|
||
await cdp.eval(`(() => {
|
||
const btn = [...document.querySelectorAll('button')].find(b => (b.textContent||'').includes('撰写新邮件'));
|
||
if (btn) btn.click();
|
||
})()`);
|
||
await sleep(700);
|
||
const dlg = await cdp.eval(`(() => {
|
||
const d = document.querySelector('[role="dialog"]');
|
||
if (!d) return { open: false };
|
||
const labels = [...d.querySelectorAll('span')].map(s => s.textContent).filter(Boolean);
|
||
return {
|
||
open: true,
|
||
title: (d.querySelector('h2') || {}).textContent || '',
|
||
hasTo: labels.includes('收件人'),
|
||
hasCc: labels.includes('抄送'),
|
||
hasSubject: labels.includes('主题'),
|
||
textarea: !!d.querySelector('textarea'),
|
||
sendBtn: [...d.querySelectorAll('button')].some(b => (b.textContent||'').includes('发送')),
|
||
attachBtn: [...d.querySelectorAll('button')].some(b => (b.textContent||'').includes('添加附件')),
|
||
};
|
||
})()`);
|
||
step('撰写弹窗打开且字段齐备',
|
||
dlg.open && dlg.hasTo && dlg.hasCc && dlg.hasSubject && dlg.textarea && dlg.sendBtn && dlg.attachBtn,
|
||
`${dlg.title} · 收件人/抄送/主题/正文/附件/发送 = ${[dlg.hasTo, dlg.hasCc, dlg.hasSubject, dlg.textarea, dlg.attachBtn, dlg.sendBtn].join('/')}`);
|
||
await cdp.eval(`document.querySelector('[role="dialog"] button[aria-label], [role="dialog"] button')?.click()`);
|
||
await cdp.eval(`(() => {
|
||
const d = document.querySelector('[role="dialog"]');
|
||
if (d) { const btn = d.querySelector('button[data-slot="dialog-close"]') || d.querySelector('button'); btn && btn.click(); }
|
||
})()`);
|
||
await sleep(400);
|
||
});
|
||
|
||
// 主题切换
|
||
await safeStep('主题切换', async () => {
|
||
const before = await cdp.eval('getComputedStyle(document.body).backgroundColor');
|
||
const wasDark = await cdp.eval('document.documentElement.classList.contains("dark")');
|
||
await cdp.eval(`(() => {
|
||
const btn = [...document.querySelectorAll('button')].find(b => (b.title||'') === '切换主题');
|
||
if (btn) btn.click();
|
||
})()`);
|
||
await sleep(500);
|
||
const after = await cdp.eval('getComputedStyle(document.body).backgroundColor');
|
||
const isDark = await cdp.eval('document.documentElement.classList.contains("dark")');
|
||
step('切换主题后背景色确实改变', before !== after && wasDark !== isDark, `${before} → ${after}`);
|
||
// 切回
|
||
await cdp.eval(`(() => {
|
||
const btn = [...document.querySelectorAll('button')].find(b => (b.title||'') === '切换主题');
|
||
if (btn) btn.click();
|
||
})()`);
|
||
await sleep(300);
|
||
});
|
||
|
||
// 横向溢出
|
||
const ov = await cdp.eval('({ s: document.documentElement.scrollWidth, c: document.documentElement.clientWidth })');
|
||
step('无横向溢出', ov.s <= ov.c + 1, `scrollWidth=${ov.s} clientWidth=${ov.c}`);
|
||
|
||
say('');
|
||
say('── 运行时报错 ─────────────────────────────────────────────');
|
||
const real = cdp.errors.filter((v) => !/favicon|DevTools/i.test(v));
|
||
if (real.length === 0) say(' 无');
|
||
else real.slice(0, 20).forEach((v) => say(' ' + v));
|
||
step('页面无 JS 异常与控制台报错', real.length === 0, real.length ? `${real.length} 条` : '无');
|
||
} catch (err) {
|
||
step('验收脚本自身异常', false, String(err && err.message));
|
||
process.exitCode = 2;
|
||
} finally {
|
||
if (cdp) try { cdp.ws.close(); } catch { /* 忽略 */ }
|
||
try { child.kill(); } catch { /* 忽略 */ }
|
||
await sleep(400);
|
||
try { fs.rmSync(profile, { recursive: true, force: true }); } catch { /* 忽略 */ }
|
||
const pass = results.filter((r) => r.ok).length;
|
||
const fail = results.length - pass;
|
||
report.push('');
|
||
report.push('═'.repeat(74));
|
||
report.push(`汇总：通过 ${pass} / ${results.length}，失败 ${fail}`);
|
||
for (const r of results.filter((x) => !x.ok)) report.push(` - ${r.name} ${r.detail}`);
|
||
report.push('═'.repeat(74));
|
||
fs.mkdirSync('E:\\deepseek\\artifacts', { recursive: true });
|
||
fs.writeFileSync('E:\\deepseek\\artifacts\\client-ui-check-v2.txt', report.join('\n'), 'utf8');
|
||
process.stdout.write(`\nREPORT E:\\deepseek\\artifacts\\client-ui-check-v2.txt\nSUMMARY pass=${pass} fail=${fail}\n`);
|
||
if (!process.exitCode) process.exitCode = fail ? 1 : 0;
|
||
}
|
||
})();
|