83 lines
9.3 KiB
Markdown
83 lines
9.3 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 调用点；复选框、骨架及空标题操作列继续生成空标签。
|
||
旧版在首次插入时缺标签的断言失败，修复后通过；这证明后补依赖已移除，不等于已证实或消除全站所有可见位移。
|
||
|
||
### 表格刷新布局修复边界
|
||
|
||
加载、空表和有数据不能切换表格布局模型；列宽只由列声明决定，不能由本次返回的内容重新分配。
|
||
OpenVue 全局 PT 统一使用固定布局，合计现有列宽作为内部横滚的最小宽度，保留手机卡片与 `.no-stack`。
|
||
原百分比列宽用于自动伸缩，现在采用该列已有最小宽度或统一 `12rem`，因此部分宽表的列比例和横滚距离会改变。
|
||
HostList 的列集合随接口响应确定：首次响应前显示可见加载反馈，不先猜全列；刷新已有结果时保留当前表格。
|
||
仅有缓存行而没有列定义时，失败必须可重试，不能永久加载；滚动快照在真实表格渲染后恢复。
|
||
|
||
本批次缺陷与覆盖清单：
|
||
|
||
- 已修复：加载空态的 `100dvh` 高度、空态专用表格模型、自动列宽分配、动态列先猜后改，以及加载态提前消费滚动快照。
|
||
- `review-content-geometry.e2e.test.mjs`：390/640/768/1440 四种宽度的 SSH 和订单深链接刷新、延迟响应、搜索完成、列位置/宽度与文档横向溢出；390/1440 的 HostList 动态列、空列表、旧接口缺少字段配置、失败重试、同表刷新和站内返回恢复 500px 滚动位置。
|
||
- `review-list-density.e2e.test.mjs`：既有 44 种手机/桌面与浅暗主题场景，增加空表到有数据的列几何与单元格内按钮不溢出检查；按钮断言不涵盖所有链接或输入。
|
||
- 只读审查覆盖本批次五个源码/测试文件全部变更、OpenVue 配置全文及 HostList、共享 CSS、列表缓存和实际 OpenVue PT 的相邻接缝；不是全仓代码审计完成声明。
|
||
- 可复核扫描：`rg -n 'DataTable|createBlock\(.*DataTable' app`、`rg -n 'p-datatable-empty-message|p-datatable-mask|table-layout|row-actions' app/assets/styles`、`rg -n 'columnWidth|schemaReady|Tn' app/config/openvue.js app/components/HostList.vue`；24 个 Vue 文件中的 39 张表复用共享配置，空态布局分支已移除，手机卡片分支属于保留的响应式约定。
|
||
- 有界待验：手机端既有隐藏字段、任意数据长度、第三方接口与真实支付/短信/实例控制，不由这些离线场景证明。
|
||
- 本轮本地产物全套结果为 226 项中的 225 项通过；唯一未完成项为 Firefox 在启动空白页时即报 `Could not find profile folder`，不是业务断言失败。未跳过此项，也不能据此宣称全套通过；发布产物另行记录实际回归结果。
|