技能｜前端浏览器端e2e验证SOP
适用场景
H5 前端（public/index.html）改版后，需要在真实浏览器引擎里验证：服务状态灯、概览 4 卡、M1~M7 七视图渲染、隐患登记 / 推进 / 编辑 / 删除 / 导出、无 JS 运行时错误、窄屏（手机 WebView / APK 套壳）适配。
操作步骤
- 在
程序源代码\server执行npm install playwright（仅首次），再用node cli.js install chromium指定国内镜像（cdn.npmmirror.com）装浏览器（或PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1跳过、单独装）。 - 运行：
node -e "require('playwright');process.exit(0)"探活；通过则node selftest_ui.js（门禁已集成此步，未装则 SKIP）。 - 脚本自动：复制
scripts\db\security.db到临时副本并以M5_DB指向它起服务（前端写入只落副本，真实库零污染），自检末段比对真实库 asset 条数未变。 - 校验项（19 项）：① 服务状态灯在线 + 版本显示；② 概览 4 卡 + 分类表有数据；③ M1~M7 点击切换各渲染成功；④ 隐患 登记 +1 / 推进 / 编辑(责任部门) / 删除 -1 / 导出(docx 下载)；⑤ 页面无 pageerror / console error；⑥ 窄屏(390×844)导航转顶部横条、卡片仍完整。
注意边界
- 临时库副本路径在
os.tmpdir()\pc_ui_selftest_*，服务 30s 内未就绪则抛「服务未能在 30s 内就绪」并附日志。 - asset 条数比对改为运行前动态
assetBefore捕获，不再硬比固定值（真实库现 174 条）。 - Chromium 二进制在
~/.cache/ms-playwright，国内用镜像下载。
反例避雷
- ❌ 直连真实库跑 e2e：隐患登记 / 删除会污染真实数据；必须用临时副本。
- ❌ 只在门禁里看 SKIP：未装 Playwright 时这步永远跳过，等于没测真浏览器——本机需显式
npm install playwright+ 装 Chromium。 - ❌ 把 e2e 失败当成后端 bug：e2e 验的是前端渲染与交互，失败先查 public/index.html 与前端 JS，再查接口。
