告别盲测时代，用 Playwright 全链路追踪，一键锁定问题！一、常见痛点，您是不是也遇过？报表信息太有限传统

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

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

报表信息太有限

传统 HTML 报告只展示失败用例名称和简单堆栈，无法直观看到失败时的浏览器状态。
QA 或开发必须再跑一遍环境才能截图、抓包，成本高、效率低。

复现场景困难重重

浏览器缓存、网络延迟、异步加载等干扰因素随时变动，经常出现“本地能跑，CI 跑不出”的尴尬。
偶发问题没有痕迹，看不到当时页面元素变化、请求走向，定位像大海捞针。

二次排查耗时

从测试报告返回到 IDE，再启动环境、打断点、插日志，要好几步，多次来回往返。
团队协作时，沟通成本高：QA 得录屏、分享网络抓包，开发还要重现环境才能调试。

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

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

功能	作用
操作记录全追踪	记录点击、输入、导航等每一步操作，附带时间戳与耗时统计
DOM 快照	在关键节点自动保存 DOM 结构，方便对比元素变化
自动截图	在指定或失败位置截屏，一图胜千言
网络请求记录	拦截并记录所有 HTTP/WS 请求与响应详情，查看 URL、状态码、返回内容等
错误与堆栈	捕获失败时的调用栈及异常信息，让错误原因一目了然
交互式回放	通过 Trace Viewer 秒级回放完整测试流程，精准还原当时现场

三、准备工作：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 pytest
from 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 最佳实践

环境隔离：为每次 CI 任务创建全新用户数据目录，保证测试环境干净一致。
Trace 清理策略：定期清理旧 Trace，或者使用云存储收集失败 Trace。
告警集成：在失败后推送 Trace 下载链接到 Slack／钉钉，方便团队实时获取。
存储监控：监控 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 文件过多，可分模块拆分回放。
确保本地机器内存足够，或者在云端使用更高配置机器打开。

告别盲测时代，用 Playwright 全链路追踪，一键锁定问题！