“跑完用例才知道哪里出错？得回到本地反复复现，浪费一大把时间？”这些烦恼，用 Playwright 的 Trace 追踪功能都能迎刃而解。

一、常见痛点，您是不是也遇过？

报表信息太有限

• 传统 HTML 报告只展示失败用例名称和简单堆栈，无法直观看到失败时的浏览器状态。

• QA 或开发必须再跑一遍环境才能截图、抓包，成本高、效率低。

复现场景困难重重

• 浏览器缓存、网络延迟、异步加载等干扰因素随时变动，经常出现“本地能跑，CI 跑不出”的尴尬。

• 偶发问题没有痕迹，看不到当时页面元素变化、请求走向，定位像大海捞针。

二次排查耗时

• 从测试报告返回到 IDE，再启动环境、打断点、插日志，要好几步，多次来回往返。

• 团队协作时，沟通成本高：QA 得录屏、分享网络抓包，开发还要重现环境才能调试。

二、Playwright Trace：给测试过程“装上摄像头”

Playwright 自带的 Trace 功能，就像给每次测试打上“摄像机”模式，所有细节无一遗漏。

三、准备工作：Python + Pytest 环境接入 Trace

下面以 Python + Pytest 为例，带您一步步落地：

1. 安装插件

pip install pytest-playwright pytest-rerunfailures

• pytest-playwright：Playwright 与 Pytest 的桥梁，提供命令行和 fixture 支持。

• pytest-rerunfailures：失败用例自动重跑，用于保留 Trace 时只对失败用例生成。

2. 配置 pytest.ini

[pytest]# 仅在失败时保留 Trace，失败用例自动重试一次addopts = --tracing=retain-on-failure reruns=1

• --tracing=on：开发调试阶段，为所有用例生成 Trace，全面观察。

• --tracing=retain-on-failure：CI/CD 推荐，仅保留失败用例的 Trace，节省存储。

3. 编写 conftest.py

在全局 fixture 中启动并停止 Trace，同时将 Zip 路径挂载到测试报告：

import pytestfrom playwright.sync_api import sync_playwright
@pytest.fixture(autouse=True)def enable_tracing(request):    with sync_playwright() as p:        browser = p.chromium.launch()        context = browser.new_context(record_trace_dir="traces")        page = context.new_page()        yield page        # 停止并导出 Trace        trace_zip = f"traces/{request.node.name}_trace.zip"        context.tracing.stop(path=trace_zip)        # 将路径挂载到报告        request.node.user_properties.append(("trace_zip_path", trace_zip))        context.close()        browser.close()

4. 集成到 HTML 报告

使用 pytest-html 插件，在报告中渲染“Trace 下载”按钮：

def pytest_html_results_table_row(report, cells):    for name, value in getattr(report, "user_properties", []):        if name == "trace_zip_path":            cells.insert(2, html.a("下载 Trace", href=value))

这样，每条失败用例旁就能一键下载对应的 trace.zip。

四、使用指南：本地回放与 CI 配置

本地回放

playwright show-trace traces/测试用例名称_trace.zip

在 Trace Viewer 中，您可以：

• 逐步回放：可视化地点击、输入、网络请求等操作流。

• 时间轴跳转：快速定位到感兴趣的某一步骤，观察页面快照与 DOM 结构。

• 请求详情：查看任意请求的请求头、响应体、用时等数据。

CI/CD 最佳实践

1. 环境隔离：为每次 CI 任务创建全新用户数据目录，保证测试环境干净一致。

2. Trace 清理策略：定期清理旧 Trace，或者使用云存储收集失败 Trace。

3. 告警集成：在失败后推送 Trace 下载链接到 Slack／钉钉，方便团队实时获取。

4. 存储监控：监控 Trace 生成量与大小，避免磁盘爆满。

五、进阶玩法：定制化与优化

• 分段 Trace：只对核心场景或关键步骤开启 Trace，减少冗余数据。

• 过滤请求：通过 Playwright API 过滤不必要的静态资源请求，聚焦业务关键接口。

• 批量合并：将同一测试套件的多份 Trace 合并，统一分析测试趋势和性能瓶颈。

• 与监控打通：在 Trace 中植入自定义日志或指标，结合 APM（如 Grafana、Prometheus）综合定位问题。

六、常见问题 & 排查建议

Trace 文件过大

• 检查是否对所有用例都开启 Trace，改用 retain-on-failure。

• 过滤掉静态资源和第三方脚本请求。

无法打开 Trace

• 确认 Playwright CLI 版本与 Trace 文件版本一致。

• 使用 playwright show-trace --verbose 查看详细报错。

Trace Viewer 卡顿

• Trace 文件过多，可分模块拆分回放。

• 确保本地机器内存足够，或者在云端使用更高配置机器打开。