Playwright(1.43.1) Trace Viewer UI渲染异常问题求助

问题详情 #

• 测试某网站特定页面时，所有测试执行正常，截图保存功能也能正常工作，但页面渲染完成后，Trace Viewer中的UI出现错乱
• 该问题在Chrome、Firefox和Safari浏览器中均可复现，表现为当前导航页面与前一页面内容异常叠加
• 问题截图：
  

可能的解决方向 #

• 检查Trace Viewer录制配置，确认是否开启了页面导航追踪的完整快照，部分场景下快照合并逻辑异常会导致内容叠加
• 在测试代码中添加页面加载完成后的强制等待（如await page.waitForLoadState('networkidle')），确保前一页面完全卸载后再进入下一页
• 排查目标页面的渲染逻辑，检查是否存在未清理的DOM节点（如弹窗、浮层未正确移除），这类残留元素会被Trace Viewer捕获引发错乱
• 更新浏览器的DevTools/Trace Viewer组件，旧版本可能存在已知的渲染bug
• 尝试禁用测试中的缓存保留设置，缓存的页面资源可能干扰Trace Viewer的快照合并

内容的提问来源于stack exchange，提问作者Nisim Naim