私聊长消息滚动稳定性
对照环境:main / 生产、testing。 等 testing 部署完成后刷新页面。两个环境的数据可能不同,各自准备测试会话;不需要两台设备。 调查时 main 为 8c0ed179f。故障受网络和消息测量时序影响,不能保证每次触发。 修复合入 main 并部署后,生产环境也应符合下文 testing 的预期;要复现旧问题需使用修复前版本。
准备
使用两个测试账号,双方先各回复一次。准备至少 70 条私聊消息(接口每页默认 30 条), 其中至少 20 条是 30–50 行的多段文本,每行写约 20 个字,并在每段开头标上序号。 长消息应分布在旧消息和最新 30 条中。也可以使用已有的长私聊,不必重新发消息。 在桌面将浮窗收窄,或用手机,以增加换行。可选:DevTools Network 设为 Fast 3G, 让加载旧消息的等待时间更明显。
在 main 尝试复现,在 testing 重复同样操作
- 打开时立即滚动:关闭、重新打开会话,消息出现时立即往上滚;读一条长消息中间的 某个编号段落,停 5 秒。main 可能继续向最新消息跳;testing 应让手动滚动优先, 不再把你拉回底部。正常打开且不操作时,两边都应落到最新消息。
- 加载更早的消息:向上滚到当前已加载记录顶部,或点“加载更多”。记住视口顶部 可见的消息编号和段落,旧消息出现时观察位置。等待期间也试着继续滚一小段。 main 可能跳过多个段落或先后跳动;testing 应保持正在看的消息及消息内的位置, 不因整段历史高度变化而多补偿一次。连续加载两页再测。
- 阅读期间收到新消息:离开底部,停在长消息中间,让另一个测试账号发一条长消息。 testing 应显示新消息提示并保持阅读位置。点提示才跳到底部。自己发送消息应正常追到底部。
- 返回页面:在独立私聊页面读旧消息,去其他页面,再按浏览器后退。 testing 重新挂载会话时统一落到最新消息,不应在旧位置与最新消息间来回跳。 如果浮窗一直挂载、只是背景页面切换,背景页面的位置恢复不应移动私聊正文。
- 边界情况:等待旧消息加载时点“最新消息”;随后仍应停在最新消息。 加载期间切到另一个会话,旧会话的延迟回调不能移动新会话。手机上打开/关闭键盘: 底部跟随输入框,读历史时保持阅读位置。
以上重点观察长消息中同一段落是否稳定,不是只检查滚动条有没有变化。 不要通过清空浏览器缓存规避测试:旧版本保存的私聊像素位置也应自动失效。
自动验证及范围
conversation-scroll.test.ts挂载真实 ConversationView,控制网络完成和动画帧时序, 验证主动滚动取消跳转、新消息不打断历史阅读、一次历史请求只恢复一次锚点,以及卸载清理。scroll-anchor.test.ts使用当前 TanStack Virtualizer:一条已存在消息从 92px 测量为 892px,再插入三条旧消息,检查 800px 的测量差不会算两次,后续测量仍保持消息内偏移。route-scroll-restoration.test.ts验证两套位置缓存都跳过私聊正文,同时保留普通页面 和会话列表的位置恢复。
这些是组件/逻辑回归测试;真实浏览器中的字体、图片加载及手势仍按上面步骤对照验收。
