如何排查Playwright交互模式下快照缺失问题？

以下是排查和解决该问题的具体步骤：

• 检查Trace文件完整性
  首先确认测试生成的trace.zip文件是否完整。手动解压该文件，查看内部snapshot目录下是否存在对应测试步骤的文件。如果某一步的快照文件缺失，就会导致Playwright UI显示about:blank。可以重新运行单个测试生成新的trace文件，排除偶然的文件写入失败情况。

• 排查测试结束阶段的页面操作
  问题集中在测试结束环节但After Hooks能生成快照，说明测试结束时的页面状态可能被异常修改：

  • 检查代码中是否在测试结束前调用了page.close()或browser.close()，Playwright UI需要页面保持状态来捕获快照，提前关闭会导致快照生成失败；
  • 确认是否存在测试完成后导航到空白页的操作（比如page.goto('about:blank')），这类操作会直接导致快照空白。

• 调整Trace配置
  显式配置trace的保留策略，确保测试结束时的快照被完整捕获。在playwright.config.ts中添加或修改配置：

  use: {
    trace: 'retain-on-failure', // 也可设为'on'强制生成所有测试的trace
  },
  

  另外，可在测试结束前手动触发trace停止并保存，确保文件完整写入：

  await page.context().tracing.stop({ path: 'trace.zip' });
  

• 检查本地服务状态
  Playwright UI会启动本地服务加载trace文件，示例URL中的localhost端口（如58519）如果在测试结束后被提前释放，就会出现“无法找到此localhost页面”的错误。运行测试时不要过早关闭Playwright UI窗口，等待所有快照加载完成后再操作；如果用命令行npx playwright test --ui启动，确保进程未被提前中断。

• 升级Playwright版本
  这类快照生成问题可能是已知bug，升级到最新稳定版尝试解决：

  npm install @playwright/test@latest
  npx playwright install --with-deps
  

  可查看官方Release Notes确认是否有修复类似快照生成失败的问题。

• 查看详细日志定位问题
  启用 verbose 日志捕获快照生成过程中的错误：

  npx playwright test --ui --verbose
  

  日志中可能会出现快照写入失败、文件权限不足或资源加载错误的信息，根据日志可精准定位问题原因。

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