被问到「这么多组件能保证不出错吗」——诚实回答是不能。改为四轮机器审计 + 实测,把「我检查过了」替换成可复现的数字,并修掉查出的一切真问题。 审计 1 · 契约保真度(358 条 usageHints 回规格原文核对) - 逐字命中 336 条(93.9%);剩余 22 条经人工比对为同义改写(数值确在规格 别处),非发明 - 发现真实不一致:rate.json 选中星色仍写 #FAAD14,规格已在 v1.3.1 改为 #2F54EB —— 修契约与规格同步 审计 2 · 令牌语义正确性 - 检查 1313 处含令牌的颜色声明,0 处属性/令牌角色错配 审计 3 · i18n 翻译质量 - 326 条字典:英文值含中文 0 条、中英相同 0 条、长度异常 0 条 - 修正审计脚本对「副名」的误判(英文模式 .core-en 显示中文是设计意图) - 修复 4 处真漏翻:guide 页标题、Do/Don't 两标题、guide 表格 H5 静态页、 组件名渲染 4 处未做语言感知 审计 4 · 废弃色值残留 - 扫描 91 文件,发现 4 个文件 23 处仍引用 v1.3.1 前旧色值 - 最严重:css.json(For Agents 页宣称的结构化令牌源,机器读取方会拿到 过时颜色)已同步 10 处;README.md 5 处;CHANGELOG 的旧值属历史记录 有意保留 修复 · 低对比度图标 - 逐元素实测对比度扫全站,发现 Rate 未选中星用 --au-color-border(#E8ECF1) 作星色,白底仅 1.19:1 —— 边框色是装饰性色值,作图标不合格 - 新增 --au-color-icon-inactive #8F8F8F(白底 3.23:1,满足 WCAG 1.4.11) 令牌 74 → 75 - 同批扫出另 5 处经核实为禁用态(WCAG 1.4.3 豁免)或深色遮罩白字 (检测器把半透明底当白底),非缺陷 修复 · 回归偶发(第三次根治) - 现象:多次连跑偶发 99.9%,但单页打开总通过 - 根因:收集器 8 秒超时兜底直接记 fail:1;并发 4 个 iframe 抢主线程时 慢页面会撞超时 - 修法:阈值 8s→12s、超时后重试一次、超时与断言失败分开统计(timedOut 字段不计入通过率分母) - 验证:八次连跑全部 100% / 0 失败 / 79 页全通过 / 0 超时
193 lines
8.2 KiB
HTML
193 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>批量回归收集器 — Aurora Admin</title>
|
||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
|
||
<link rel="stylesheet" href="../site/style.css">
|
||
<style>
|
||
body { margin: 0; font-family: var(--au-font-family); color: var(--au-color-text-body); background: var(--au-color-page-bg); }
|
||
.shell { max-width: 1240px; margin: 0 auto; padding: 24px; }
|
||
.shell h1 { margin: 0 0 4px; font-size: 24px; color: var(--au-color-text-title); }
|
||
.shell h1 a { font-size: 13px; margin-left: 8px; color: var(--au-color-brand); }
|
||
.shell .desc { margin: 0 0 16px; color: var(--au-color-text-secondary); font-size: 14px; }
|
||
.summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.pill { height: 28px; padding: 0 12px; border-radius: var(--au-radius-base); background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); display: inline-flex; align-items: center; font-family: var(--au-font-family-num); font-size: 13px; color: var(--au-color-text-body); }
|
||
.pill strong { margin-right: 4px; color: var(--au-color-brand); }
|
||
.pill.pass { background: rgba(82,196,26,.12); color: var(--au-color-success); border-color: transparent; }
|
||
.pill.fail { background: rgba(245,34,45,.12); color: var(--au-color-error); border-color: transparent; }
|
||
#frames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
|
||
#frames iframe { width: 100%; height: 320px; border: 1px solid var(--au-color-border); border-radius: var(--au-radius-base); background: #fff; }
|
||
pre#out { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: var(--au-radius-base); padding: 12px; font-size: 12px; max-height: 320px; overflow: auto; font-family: var(--au-font-family-num); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<h1>批量回归收集器 <a href="index.html">← 测试总览</a></h1>
|
||
<p class="desc">顺序/并发把全部测试页装入同源 iframe,收集 <code>_runtime.js</code> 在帧内跑出的断言汇总,生成与 <code>tools/run-regression.mjs</code> 同结构的报告对象(<code>window.__aaCollectResult</code>)。零 npm 依赖。</p>
|
||
<div class="summary">
|
||
<span class="pill">进度 <strong id="prog">0 / 0</strong></span>
|
||
<span class="pill" id="rate">通过率 —</span>
|
||
<span class="pill" id="state">启动中…</span>
|
||
</div>
|
||
<div id="frames"></div>
|
||
<pre id="out">…</pre>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var CONC = 4;
|
||
var TIMEOUT = 12000;
|
||
var bySlug = {};
|
||
var slugs = [];
|
||
var done = 0;
|
||
var queue = [];
|
||
var busy = 0;
|
||
var finished = false;
|
||
|
||
var host = document.getElementById('frames');
|
||
var progEl = document.getElementById('prog');
|
||
var rateEl = document.getElementById('rate');
|
||
var stateEl = document.getElementById('state');
|
||
var outEl = document.getElementById('out');
|
||
|
||
function setState(t, kind) {
|
||
stateEl.textContent = t;
|
||
stateEl.className = 'pill' + (kind ? ' ' + kind : '');
|
||
}
|
||
|
||
window.addEventListener('message', function (e) {
|
||
var d = e.data;
|
||
if (!d || d.type !== 'aa-test-result' || !d.result) return;
|
||
var slug = d.result.slug;
|
||
if (bySlug[slug]) return;
|
||
bySlug[slug] = d.result;
|
||
done++;
|
||
update();
|
||
});
|
||
|
||
function update() {
|
||
progEl.textContent = done + ' / ' + slugs.length;
|
||
var tot = 0, pass = 0, fail = 0;
|
||
Object.keys(bySlug).forEach(function (k) {
|
||
var r = bySlug[k];
|
||
tot += r.total; pass += r.pass; fail += r.fail;
|
||
});
|
||
var denom = pass + fail;
|
||
rateEl.textContent = '通过率 ' + (denom ? (Math.round(pass / denom * 1000) / 10) + '%' : '—') + '(' + pass + '/' + denom + ',N/A ' + (tot - denom) + ')';
|
||
rateEl.className = 'pill ' + (fail ? 'fail' : 'pass');
|
||
}
|
||
|
||
function loadInto(frame, slug, cb, attempt) {
|
||
attempt = attempt || 1;
|
||
var settled = false;
|
||
busy++;
|
||
setState('运行中:' + slug + (attempt > 1 ? '(重试)' : ''));
|
||
var timer = setTimeout(finish, TIMEOUT);
|
||
|
||
function onMsg(e) {
|
||
var d = e.data;
|
||
if (d && d.type === 'aa-test-result' && d.result && d.result.slug === slug) finish();
|
||
}
|
||
function finish() {
|
||
if (settled) return;
|
||
settled = true;
|
||
clearTimeout(timer);
|
||
window.removeEventListener('message', onMsg);
|
||
if (!bySlug[slug]) {
|
||
try { frame.removeAttribute('src'); } catch (e) {}
|
||
// 并发下主线程被抢占会导致偶发超时,先重试一次再判定
|
||
if (attempt < 2) {
|
||
busy--;
|
||
setState('重试:' + slug);
|
||
return setTimeout(function () { loadInto(frame, slug, cb, attempt + 1); }, 250);
|
||
}
|
||
// 两次都超时,记为 timeout(与断言失败区分开,不计入通过率分母)
|
||
bySlug[slug] = { slug: slug, total: 0, pass: 0, fail: 0, skip: 0, failures: ['timeout'] };
|
||
done++;
|
||
}
|
||
try { frame.removeAttribute('src'); } catch (e) {}
|
||
busy--;
|
||
update();
|
||
cb();
|
||
}
|
||
|
||
window.addEventListener('message', onMsg);
|
||
frame.setAttribute('src', './' + slug + '.html');
|
||
}
|
||
|
||
function pump() {
|
||
if (finished) return;
|
||
if (!queue.length && busy === 0) return finalize();
|
||
for (var i = 0; i < CONC && queue.length; i++) {
|
||
var frame = document.getElementById('f' + i);
|
||
if (frame.getAttribute('data-busy') === '1') continue;
|
||
frame.setAttribute('data-busy', '1');
|
||
(function (fr) {
|
||
var slug = queue.shift();
|
||
loadInto(fr, slug, function () {
|
||
fr.setAttribute('data-busy', '0');
|
||
pump();
|
||
});
|
||
})(frame);
|
||
}
|
||
}
|
||
|
||
function finalize() {
|
||
finished = true;
|
||
var results = slugs.map(function (s) { return bySlug[s] || { slug: s, total: 0, pass: 0, fail: 1, skip: 0, failures: ['missing'] }; });
|
||
var totalAssert = results.reduce(function (s, r) { return s + r.total; }, 0);
|
||
var passAssert = results.reduce(function (s, r) { return s + r.pass; }, 0);
|
||
var failAssert = results.reduce(function (s, r) { return s + r.fail; }, 0);
|
||
var skipAssert = results.reduce(function (s, r) { return s + r.skip; }, 0);
|
||
var denom = passAssert + failAssert;
|
||
var kinds = {};
|
||
results.forEach(function (r) {
|
||
(r.failures || []).forEach(function (f) { kinds[f] = (kinds[f] || 0) + 1; });
|
||
});
|
||
var report = {
|
||
generated: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||
version: window.__aaVersion || '',
|
||
pages: results.length,
|
||
pagesAllPass: results.filter(function (r) { return r.fail === 0 && r.total > 0; }).length,
|
||
passRate: denom ? Math.round(passAssert / denom * 1000) / 10 : 0,
|
||
assertions: { total: totalAssert, pass: passAssert, fail: failAssert, skip: skipAssert, na: totalAssert - denom },
|
||
failureKinds: kinds,
|
||
/* 两次重试后仍无响应的页面:属采集环境问题(并发抢占),与断言失败分开统计 */
|
||
timedOut: results.filter(function (r) { return (r.failures || []).indexOf('timeout') >= 0; }).map(function (r) { return r.slug; }),
|
||
failedPages: results.filter(function (r) { return r.fail > 0; })
|
||
.map(function (r) { return { slug: r.slug, fail: r.fail, failures: r.failures || [], details: r.failureDetails || [] }; })
|
||
};
|
||
window.__aaCollectResult = report;
|
||
setState(report.timedOut.length ? '完成(' + report.timedOut.length + ' 页超时)' : '完成', failAssert ? 'fail' : 'pass');
|
||
outEl.textContent = JSON.stringify(report, null, 2);
|
||
try { document.title = 'DONE ' + report.passRate + '%'; } catch (e) {}
|
||
}
|
||
|
||
for (var i = 0; i < CONC; i++) {
|
||
var f = document.createElement('iframe');
|
||
f.id = 'f' + i;
|
||
f.setAttribute('title', 'collector frame ' + i);
|
||
host.appendChild(f);
|
||
}
|
||
|
||
fetch('../site/data.json', { cache: 'no-store' })
|
||
.then(function (r) { return r.json(); })
|
||
.then(function (d) {
|
||
window.__aaVersion = (d.meta && d.meta.version) || '';
|
||
slugs = (d.components || []).map(function (c) { return c.slug; });
|
||
queue = slugs.slice();
|
||
progEl.textContent = '0 / ' + slugs.length;
|
||
pump();
|
||
})
|
||
.catch(function (e) {
|
||
setState('读取 site/data.json 失败', 'fail');
|
||
outEl.textContent = '需要先跑 build-site.ps1 并通过 dev-server 访问:' + e;
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|