Playwright Trace 查看器

一句话概括

Trace 查看器 = 自动化测试的"黑匣子/行车记录仪"

测试跑完后，你可以像看电影一样，回放整个执行过程：每一步点了哪里、页面长什么样、发了什么请求、报了什么错，全都看得一清二楚。

为什么需要它？

写自动化测试最痛苦的莫过于：本地跑得好好的，一上 CI 就挂，而且完全不知道当时发生了什么。

以前你只能：

疯狂加 print 打印日志
一遍遍重跑试图复现
靠猜来改代码

有了 Trace 查看器，你只需要打开那个 .zip 文件，就能看到失败那一刻的完整现场。

它能记录什么？

类型	作用
🎬 操作步骤	每一步干了什么（点击、输入、跳转......）
📸 页面快照	操作前/后的 DOM 结构，可以点开检查元素
🌐 网络请求	发了什么请求、返回了什么、状态码多少
📝 控制台日志	页面里的 `console.log` 和报错信息
💻 调用代码	高亮显示是哪一行 Python 代码触发的

怎么用？（Python + pytest）

1️⃣ 安装插件

复制代码

pip install pytest-playwright
playwright install

2️⃣ 写一个简单测试

复制代码

from playwright.sync_api import Page

def test_practice(page: Page):  # 👈 直接注入 page fixture
    page.goto("http://127.0.0.1:8000/practice")

    # Text input
    page.get_by_role("textbox", name="姓名:").fill("小罗")
    page.get_by_role("textbox", name="邮箱:").fill("47475@qq.com")
    page.get_by_role("textbox", name="留言:").fill("hello")
    page.get_by_role("textbox", name="出生日期:").fill("2026-04-25")
    page.get_by_role("textbox", name="预约时间:").fill("12:02")
    page.get_by_role("textbox", name="本地时间:").fill("222233-03-31T03:33")

    page.pause()

3️⃣ 运行并开启 Trace

复制代码

pytest --tracing on run.py

执行完后，在当前目录下会生成一个 test-results 文件夹，里面就有 .zip 格式的 Trace 文件。

4️⃣ 查看 Trace

复制代码

playwright show-trace test-results/run-py-test-practice-chromium/trace.zip

浏览器会自动打开一个界面，你就可以开始回放分析了。

也可以直接把 .zip 文件拖到官网：trace.playwright.dev

常见参数

参数	含义
`--tracing on`	每个测试都录
`--tracing off`	不录（默认）
`--tracing retain-on-failure`	推荐只在测试失败时保留 Trace，省空间

一个小技巧

在 CI 环境（比如 GitHub Actions、Jenkins）里，记得把 test-results 目录设为 artifacts，这样即使你没法登录 CI 机器，也能把 Trace 文件下载到本地慢慢分析。

总结

Trace 查看器 = 事后回放 + 完整现场
一句话：让你不再猜测试为什么失败
学会它，调试效率至少翻倍