cieanyau
1c0c0f16bc
前端验证 / verify (push) Failing after 3m34s
通过表格原生渲染统一生成手机布局标签，删除全页监听与后补扫描。动态等级列使用单一标题并保留颜色。 补齐首次插入、深链刷新、动态表头与首页延迟响应几何回归。全量214项通过，最终专项16项通过；不声明全站所有场景零位移。
65 lines
6.8 KiB
Markdown
65 lines
6.8 KiB
Markdown
# 浏览器端到端验收
|
||
|
||
先在项目根目录执行 `npm ci` 安装锁定依赖，执行 `npm run check`、`npm run lint`、
|
||
`npm run format:check` 和 `npm run build`，再执行 `npm test`。
|
||
测试使用 Node 自带的 `node:test`。浏览器场景直接操作实际构建后的页面，不替换项目内部模块；
|
||
规则适配与随机密码另有公开模块入口的隔离失败模式测试，不能代替浏览器验收。
|
||
|
||
每个浏览器测试文件会自动启动两个仅监听 `127.0.0.1` 的独立进程：构建后的 Nuxt 预览服务和 HTTP 假后端。
|
||
后端地址仅通过生产已有的 `NUXT_PUBLIC_API_BASE` 注入。不会读取 `.env`，不会请求生产服务；
|
||
浏览器访问两个本地 origin 之外的任何 HTTP 地址都会被阻断并让场景失败。
|
||
共享启动、登录、清单和清理逻辑位于 `tests/helpers/console-browser.mjs`；专项场景仅在已配置的
|
||
后端 HTTP 边界提供响应，不替换应用内部函数或预置 JWT。
|
||
|
||
默认 Chrome 路径是 macOS 的 `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`。
|
||
其他平台通过 `CHROME_PATH` 指定 Chromium/Chrome 可执行文件，或指定已安装的 Playwright Chromium：
|
||
|
||
```sh
|
||
CHROME_PATH=/absolute/path/to/chrome npm test
|
||
```
|
||
|
||
默认测试当前项目的 `.output`。如需验证其他工作树中已经构建的前端，可设置
|
||
`E2E_APP_ROOT=/absolute/path/to/project`；测试依赖仍从当前工作树解析。
|
||
|
||
每次运行在 `tests/fixtures/runs/run-*` 下生成截图和 `manifest.json`。
|
||
清单只包含稳定的场景结果、行为观察、请求形状以及浏览器错误/网络越界；不包含随机端口、
|
||
时间戳、请求顺序、密码或令牌。该目录被忽略，不会提交生成物。
|
||
另有各场景的 `.requests.json` 诊断附件，保留请求先后顺序和是否携带认证，不保存凭证值。
|
||
|
||
覆盖登录协议、未登录/失效会话保护、空菜单权威性、SSH 搜索的 10/10/5 分页与重置、
|
||
挂起退出接口时立即清理本地登录、危险返回地址、支付成功及挂起状态请求下的独立支付期限。
|
||
还覆盖临时登录凭证的首次验证、已有会话再验证、失败时地址脱敏及原页面重试，打开支付页时退出/失效不重新初始化，
|
||
以及使用同一浏览器真实存储事件的双标签页退出同步；所有会话都来自实际登录或临时凭证入口，不预置 JWT。
|
||
模板改写的回归场景还覆盖短信发送协议、60 秒倒计时、登录方式禁用配置及 SSH 新增/编辑保存/删除末页恢复。
|
||
支付超时使用浏览器的外部时钟推进，不添加测试专用产品配置。假后端数据契约来自现有部署产物。
|
||
|
||
专项回归按行为分组：
|
||
|
||
- `review-routes.e2e.test.mjs`：安全组方向大小写、非法枚举整批拒绝；旧工单 query 切换后草稿重置且只操作新工单。
|
||
- `review-purchase.e2e.test.mjs`：镜像订单未付复用、取消后重建、已付授权延迟不重复收费；级联候选与默认、结算、购物车恢复一致。
|
||
- `review-fields.e2e.test.mjs`：常见 ASCII 规则本地拦截、PCRE 专有规则交后端校验；实例随机密码实际提交及安全源失效、无偏采样边界。
|
||
- `review-theme.e2e.test.mjs`：认证页三态主题文案、持久化与跟随系统变化。
|
||
- `review-startup.e2e.test.mjs`：冷刷新在入口脚本、公共配置和页面样式延迟时保留加载占位，业务启动前恢复主题；字体延迟不阻塞交互，配置失败可重试，会员深链接刷新及站内导航正常交接。
|
||
- `review-ui-foundation.e2e.test.mjs`：OpenVue/Deni 的手机导航焦点约束、Escape/离页关闭、1024/1025 断点与桌面恢复、手机表格字段标签和可操作的窄屏编辑弹窗。
|
||
- 手机表格额外检查首次插入和深链接刷新时标签已完整，无需等下一帧补写；动态等级表头同时验证手机字段名、桌面单一标题与原有颜色。
|
||
- `review-content-geometry.e2e.test.mjs`：延迟首页工单和公告响应，验证桌面/手机在同样五行数据替换骨架后，卡片高度与相邻位置不变；不代表任意列表长度或外部图片都零位移。
|
||
- `review-style-layout.e2e.test.mjs`：维护条随内容与视口变化、超长通知内部滚动、帮助/购物车/机型/配置摘要吸顶避让，退出布局后的偏移清理与导航单一键盘焦点；首页用户 ID 复制按钮在各宽度下不拆行（该问题只在 Firefox 出现，场景额外启动 Playwright Firefox，需先执行 `npx playwright install firefox`）。
|
||
- `review-style-fields.e2e.test.mjs`：深色商品说明对比度、提现样式隔离、实名认证与转账凭证上传名称；实际升级弹窗的窄屏网格。
|
||
- `review-style-motion.e2e.test.mjs`：实例监控 Canvas 初始/刷新/加载反馈跟随系统减动偏好，并验证偏好切换及离页后无运行时错误。
|
||
- `review-online-auth.e2e.test.mjs`：真实密码输入的自动填充语义、键盘显隐且不误提交、浅暗主题按钮对比度；注册、找回、第三方绑定与账户新绑/改绑手机号固定 `+86`，保留旧号码真实区号和地址国家选项。登录发码与登录协议由原有认证场景共同覆盖。
|
||
- `review-online-catalog.e2e.test.mjs`：受控与未受控库存、商品和型号的共同约束、目录与配置器数量上限；radio/step/total 网络规格与实际报价参数一致；4 个公开入口在商品请求前拒绝非法编号，保留合法上边界。
|
||
- `review-online-official.e2e.test.mjs`：默认及既有 CMS 的选购按钮匿名进入公开商品页、机柜咨询经真实本地登录到工单表单；不可解码图片的品牌/头像/二维码降级、可用原图保留和手机宽度。未向线上写入 CMS 或提交工单。
|
||
|
||
可针对单组执行，例如 `node --test tests/review-routes.e2e.test.mjs`；仍需先构建当前源码。
|
||
随机密码场景只记录性质与是否一致，不把密码或安全随机值写入验收附件。
|
||
真实服务器联调、真实支付渠道、短信/邮件投递、第三方 CAPTCHA 及完整安全挑战流程不在离线验收范围内。
|
||
|
||
### 布局标签修复边界
|
||
|
||
几何布局所需的字段应与内容同次渲染，不能由全页观察器在下一帧补写。
|
||
本次使用 OpenVue 原生单元格配置生成 `data-label`，删除后补插件；不增加等待、遮罩或 DOM 回退。
|
||
可用 `rg -n 'data-label|dataset\.label|table-cell-labels' app` 复核唯一生产者及 CSS 消费者：
|
||
产品、工单、订单、日志、SSH 的卡片样式与全局手机标签规则保留，动态等级列改用单一标题来源。
|
||
另核对了 24 个 DataTable 组件、211 个 Column 调用点；复选框、骨架及空标题操作列继续生成空标签。
|
||
旧版在首次插入时缺标签的断言失败，修复后通过；这证明后补依赖已移除，不等于已证实或消除全站所有可见位移。
|