# 手工浏览器实测脚本 不进 `npm test` —— 它们需要一个跑着的 Chromium 与一个活的 Gateway。 日常回归靠 `../narrow-layout.test.mjs`(读源码验形态,无外部依赖)。 ## 为什么两套都要 结构性断言守住「代码写成了什么形态」,量不出「按钮实际多大、点下去命中谁」。 窄屏那轮修复里最严重的一个 bug 是抽屉式侧栏(`fixed ... z-50` 铺满视口高度) 把底部导航最左那一项盖住 —— 按钮在那里、尺寸也够、`md:hidden` 之类的规则也 没写错,**只有 `elementFromPoint` 才能发现它命中的是抽屉里的 SVG**。 ## 用法 ```bash # 窄屏:390px(iPhone 14 Pro)+ 320px(iPhone SE) ADMIN_PW=<密码> npm run test:narrow # 宽屏回归:窄屏修复不能把桌面改坏 ADMIN_PW=<密码> npm run test:wide ``` 环境变量: | 变量 | 默认 | 说明 | |---|---|---| | `ADMIN_PW` | 无(必填) | 管理员密码 | | `ADMIN_USER` | `admin` | 登录用户名 | | `AGENTMAIL_URL` | `https://mail.jianfgit.xyz` | 目标地址 | | `CDP_URL` | `http://127.0.0.1:9222` | 浏览器 CDP 端点 | | `PLAYWRIGHT` | `/usr/lib/node_modules/playwright/index.mjs` | playwright 入口 | 浏览器用的是本机 systemd 托管的共享 Chromium(`homeagent-browser.service`), 通过 CDP 连上去开自己的标签页,用完关掉。没有它时先 `systemctl start homeagent-browser`。 ## 文件 | 文件 | 作用 | |---|---| | `narrow-probe-helper.mjs` | 连浏览器、登录、量盒子/溢出/命中区/命中测试 | | `narrow-verify.mjs` | 窄屏 13 项验收 | | `wide-regression.mjs` | 宽屏 5 项回归 | `narrow-probe-helper.mjs` 里两个函数值得单独知道: - `tapTargets(page, labels)` —— 量 `.tap` 按钮的**真实**命中区(`::after` 伪元素的尺寸)。`.tap` 刻意不改变视觉尺寸,所以只看 `boundingBox` 会误判成偏小 - `hitTest(page, selector)` —— 每个元素点下去是否命中自己。遮挡类 bug 只能这样查 ## 已知限制 headless Chromium 报告 `hover: none`,因此 `.reveal`(只在支持悬停的设备上隐藏) 在这里永远是可见的 —— 脚本只能验「触摸设备上可见」这一半, 「鼠标设备上隐藏」那一半靠 `../narrow-layout.test.mjs` 检查 CSS 规则存在。 没有像素级视觉比对:字体差异下极脆,维护成本高于收益。