mini-openclaw-v2/scripts/browser-e2e.cjs

/**
 * 真实浏览器端到端验证（纠偏第四批新增；用于关闭 F11）
 *
 * 用系统已安装的 Chrome 驱动真实界面：深色导航 → 轨迹复盘 → 会议结果录入 → 改进对照面板。
 * 它补的是 `scripts/test_*.cjs` 那批**源码字符串断言**补不上的那一层——第四批靠它抓到若干
 * 源码守卫与生产构建都看不出的缺陷（详见 17 四批交付记录「浏览器验证发现的问题」）。
 *
 * **刻意不接入 `scripts/verify.py`**：verify 是本机随时可跑的强制门禁，不应依赖浏览器
 * 是否存在。本脚本是可选证据，需要时手动跑。
 *
 * 依赖与用法：
 *   1. 本机有 Chrome（或用 CHROME_BIN 指定路径）
 *   2. npm i --no-save puppeteer-core        # 不写入 package.json
 *   3. 起后端：cd backend && XINGBANG_DEMO_ROLE_LOGIN=1 \
 *        venv/Scripts/python.exe -m uvicorn app:app --host 127.0.0.1 --port 8012
 *   4. 起前端：RISK_AGENT_BACKEND_URL=http://127.0.0.1:8012 npm run dev -- -p 3212
 *   5. node scripts/browser-e2e.cjs          # 截图与 result.json 落在 E2E_OUT
 *
 * 注意：脚本会**真的写入**演示库（新增会议结果），不是只读冒烟。
 */
const fs = require("node:fs");
const path = require("node:path");
const puppeteer = require("puppeteer-core");

const CHROME = process.env.CHROME_BIN || "C:/Program Files/Google/Chrome/Application/chrome.exe";
const APP = process.env.E2E_APP || "http://localhost:3212";
const OUT = process.env.E2E_OUT || path.join(__dirname, "..", "test-evidence", "browser-e2e");
const ROLE = process.env.E2E_ROLE || "manager";
const PROJECT = process.env.E2E_PROJECT || "DEMO-B";

const results = [];
function check(label, ok, detail = "") {
  results.push({ label, ok, detail });
  console.log(`${ok ? "PASS" : "FAIL"}  ${label}${detail ? " — " + detail : ""}`);
}

(async () => {
  fs.mkdirSync(OUT, {recursive: true});
  const browser = await puppeteer.launch({
    executablePath: CHROME,
    headless: "new",
    args: ["--no-proxy-server", "--window-size=1440,1200"],
  });
  const page = await browser.newPage();
  await page.setViewport({width: 1440, height: 1200});

  const consoleErrors = [];
  page.on("console", (msg) => {
    if (msg.type() === "error") consoleErrors.push(msg.text());
  });
  page.on("pageerror", (err) => consoleErrors.push("pageerror: " + err.message));

  // 先落到同源页面，写入演示身份，再进目标页（应用从 sessionStorage 读身份）
  await page.goto(`${APP}/experience-center`, {waitUntil: "domcontentloaded"});
  await page.evaluate((role) => sessionStorage.setItem("xingbang-demo-role", role), ROLE);

  await page.goto(`${APP}/trajectory-center?project=${PROJECT}`, {waitUntil: "networkidle2"});
  // 面板是异步取数后渲染的：必须等它真的出现，否则断言抓的是渲染前的空壳
  await page.waitForFunction(
    () => document.body.innerText.includes("运行轨迹回放")
       && document.body.innerText.includes("改进对照与发布"),
    {timeout: 30000});

  // ---------------------------------------------------------------- 深色导航与三入口（AC-53）
  const nav = await page.evaluate(() => {
    const el = document.querySelector("nav.xb-agent-nav");
    if (!el) return null;
    return {bg: getComputedStyle(el).backgroundColor,
            items: [...el.querySelectorAll("a")].map((a) => a.textContent.trim())};
  });
  check("深色导航存在且为深色底", Boolean(nav) && nav.bg === "rgb(16, 43, 39)",
    nav ? `bg=${nav.bg}` : "未找到 nav.xb-agent-nav");
  for (const label of ["AI 预审", "历史经验加工", "轨迹复盘"]) {
    check(`导航含「${label}」入口`, Boolean(nav) && nav.items.includes(label));
  }
  // 模块名不得被 flex 压缩折行（折行后 "AI 预审" 会断成两行，三个入口读不清）
  const navHeights = await page.evaluate(() =>
    [...document.querySelectorAll("nav.xb-agent-nav a")]
      .map((a) => ({text: a.textContent.trim(), h: Math.round(a.getBoundingClientRect().height)})));
  const wrapped = navHeights.filter((item) => item.h > 50);
  check("导航项文字不折行", wrapped.length === 0, JSON.stringify(wrapped));

  // ---------------------------------------------------------------- 轨迹复盘面板（AC-54）
  const heading = await page.evaluate(() =>
    document.querySelector("main h1") && document.querySelector("main h1").textContent.trim());
  check("轨迹复盘标题渲染", heading === "轨迹复盘", `h1=${heading}`);

  const panelText = await page.evaluate(() => document.body.innerText);
  check("轨迹面板声明回放只读", /回放是只读的|只读回放/.test(panelText));
  check("会议结果区声明更正只追加不覆盖", /不覆盖/.test(panelText));
  check("未匹配标注不计入分母", /不计入分母/.test(panelText));
  check("改进对照面板渲染", /改进对照与发布/.test(panelText));
  check("改进面板声明版本号不由界面提交", /版本号不由界面提交/.test(panelText));

  // ---------------------------------------------------------------- AC-56：真实录入一条会议结果
  await page.evaluate(() => {
    const node = [...document.querySelectorAll("h4")].find((h) => h.textContent.includes("追加会议结果"));
    if (node) node.scrollIntoView({block: "center"});
  });
  const stamp = Date.now().toString().slice(-6);
  const meetingId = `E2E-${stamp}`;

  await page.type('input[aria-label="原始结果码"]', "附条件通过");
  await page.type('input[aria-label="会议编号"]', meetingId);
  await page.screenshot({path: path.join(OUT, "01-outcome-form.png")});

  await page.evaluate(() => {
    const button = [...document.querySelectorAll("button")]
      .find((b) => b.textContent.includes("保存会议结果"));
    button.click();
  });
  await page.waitForFunction(
    (id) => document.body.innerText.includes(id), {timeout: 15000}, meetingId
  ).catch(() => {});

  const afterSave = await page.evaluate(() => document.body.innerText);
  check("录入的会议结果出现在列表里", afterSave.includes(meetingId), `meeting_id=${meetingId}`);
  // 只看 role="status" 的提示条：整页文本里到处都有"未匹配"，用它判断会把任何页面都判成通过
  const notice = await page.evaluate(() => {
    const el = document.querySelector('[role="status"]');
    return el ? el.textContent.trim() : "";
  });
  check("服务端返回未匹配时给出提示", /未匹配/.test(notice), `notice=${notice}`);

  // ---------------------------------------------------------------- AC-57：改进面板的权限门
  const publishButtons = await page.evaluate(() =>
    [...document.querySelectorAll("button")].filter((b) => b.textContent.includes("审核发布")).length);
  const releasedBlocks = await page.evaluate(() =>
    (document.body.innerText.match(/已发布真实版本/g) || []).length);
  check("改进面板渲染（有候选或空态）", /尚未改进候选|改进候选|拟发布/.test(afterSave));
  const buttonTexts = await page.evaluate(() =>
    [...document.querySelectorAll("button")].map((b) => b.textContent));
  check("不存在自动上线类按钮",
    !buttonTexts.some((text) => /自动上线|一键|自动发布/.test(text)));
  console.log(`       （当前「审核发布」按钮 ${publishButtons} 个；已发布标记 ${releasedBlocks} 处）`);

  // ---------------------------------------------------------------- 结论：先结算已登录阶段
  const noisy = (list) => list.filter((text) => !/favicon|404 \(Not Found\)/i.test(text));
  const authenticatedErrors = noisy(consoleErrors).slice();
  check("已登录阶段控制台无脚本错误", authenticatedErrors.length === 0,
    authenticatedErrors.slice(0, 2).map((t) => t.slice(0, 90)).join(" | "));

  // ---------------------------------------------------------------- 无有效身份：界面不假装可写
  consoleErrors.length = 0;
  await page.evaluate(() => sessionStorage.setItem("xingbang-demo-role", "preview-none"));
  await page.goto(`${APP}/trajectory-center?project=${PROJECT}`, {waitUntil: "networkidle2"});
  await new Promise((r) => setTimeout(r, 1500));
  const anonymousText = await page.evaluate(() => document.body.innerText);
  const anonymousInputs = await page.evaluate(() =>
    [...document.querySelectorAll("input")].map((i) => i.getAttribute("aria-label")).filter(Boolean));
  check("无有效身份时不显示会议结果录入表单",
    !anonymousInputs.includes("原始结果码"), `可见输入框=${JSON.stringify(anonymousInputs)}`);
  // 无效身份下项目列表也取不到，面板根本不挂载——这与"显示只读说明"都是不假装可写
  check("无有效身份时给出如实说明（只读提示或无可访问项目空态）",
    /只读查看|需要记录人身份|没有可访问的项目/.test(anonymousText));
  check("后端对无效演示身份返回 401（界面没有绕过）",
    consoleErrors.some((text) => /401/.test(text)));
  await page.screenshot({path: path.join(OUT, "02-anonymous.png")});

  await page.evaluate((role) => sessionStorage.setItem("xingbang-demo-role", role), ROLE);
  await page.goto(`${APP}/trajectory-center?project=${PROJECT}`, {waitUntil: "networkidle2"});
  await page.waitForFunction(() => document.body.innerText.includes("运行轨迹回放"), {timeout: 30000});
  await page.screenshot({path: path.join(OUT, "03-trajectory-center-full.png"), fullPage: true});

  await browser.close();

  const failed = results.filter((item) => !item.ok);
  fs.writeFileSync(path.join(OUT, "result.json"),
    JSON.stringify({role: ROLE, project: PROJECT, meetingId,
                    authenticatedConsoleErrors: authenticatedErrors.map((t) => t.slice(0, 300)),
                    results}, null, 2));
  console.log(`\n截图与结果写入 ${OUT}`);
  console.log(`总计 ${results.length} 项，失败 ${failed.length} 项`);
  process.exit(failed.length ? 1 : 0);
})().catch((err) => {
  console.error("E2E 运行失败：", err);
  process.exit(2);
});