Trace viewer

简介​

Playwright Trace Viewer 是一款GUI工具，可帮助您在脚本运行后查看已录制的Playwright跟踪记录。当测试在CI上失败时，跟踪记录是调试测试的绝佳方式。您可以在本地或通过浏览器在trace.playwright.dev上打开跟踪记录。

打开Trace Viewer​

您可以使用Playwright CLI或在浏览器中通过trace.playwright.dev打开已保存的跟踪记录。请确保添加完整的路径指向您的trace.zip文件所在位置。

playwright show-trace trace.zip

使用 trace.playwright.dev​

trace.playwright.dev 是Trace Viewer的一个静态托管版本。您可以通过拖放或点击Select file(s)按钮来上传跟踪文件。

Trace Viewer 完全在您的浏览器中加载跟踪数据，不会向外部传输任何数据。

查看远程跟踪记录​

您可以直接使用URL打开远程跟踪记录。这样可以方便地查看远程跟踪，而无需手动从CI运行中下载文件。

playwright show-trace https://example.com/trace.zip

在使用trace.playwright.dev时，您还可以将上传到可访问存储（例如CI内部）的跟踪文件URL作为查询参数传递。可能会应用CORS（跨源资源共享）规则。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

录制跟踪记录​

可以通过使用--tracing标志运行测试来记录跟踪。

pytest --tracing on

追踪的选项有：

• on: 为每个测试记录跟踪
• off: 不记录跟踪。(默认)
• retain-on-failure: 记录每个测试的追踪信息，但会删除所有成功测试运行的追踪记录。

这将记录追踪信息并将其保存到test-results目录下名为trace.zip的文件中。

browser = chromium.launch()
context = browser.new_context()

# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = context.new_page()
page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")

browser = await chromium.launch()
context = await browser.new_context()

# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = await context.new_page()
await page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")

Trace Viewer 功能​

操作​

在"操作"选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作的执行时长。将鼠标悬停在测试的每个操作上，直观地查看DOM快照的变化。您可以向前或向后查看时间线，点击某个操作进行检查和调试。使用"Before"和"After"选项卡可以直观地查看操作前后发生的变化。

选择每个操作会显示：

• 操作快照
• 操作日志
• 源代码位置

屏幕截图​

当启用screenshots选项（默认开启）进行追踪时，每条追踪记录会录制屏幕画面并将其渲染为胶片条。您可以将鼠标悬停在胶片条上，查看每个操作和状态的放大图像，这有助于轻松找到您想要检查的操作。

双击某个操作可查看该操作的时间范围。您可以使用时间轴中的滑块来增加选中的操作，这些操作将在"Actions"选项卡中显示，同时所有控制台日志和网络日志将被过滤，仅显示选中操作对应的日志。

快照​

当启用snapshots选项（默认情况下）进行跟踪时，Playwright会为每个操作捕获一组完整的DOM快照。根据操作类型的不同，它将捕获：

以下是典型的Action快照的样子：

注意它如何同时高亮显示DOM节点和精确的点击位置。

源代码​

当您在侧边栏点击某个操作时，该操作对应的代码行会在源代码面板中高亮显示。

调用​

调用选项卡显示有关操作的信息，例如所花费的时间、使用的定位器、是否处于严格模式以及使用的按键。

日志​

查看完整的测试日志，以更好地理解Playwright在后台执行的操作，例如滚动到视图、等待元素可见、启用并稳定，以及执行点击、填写、按下等操作。

错误​

如果测试失败，您将在"错误"选项卡中看到每个测试的错误信息。时间轴还会显示一条红线，高亮标记错误发生的位置。您也可以点击源代码选项卡查看错误发生在源代码的哪一行。

控制台​

查看来自浏览器以及测试的console日志。不同的图标会显示该日志是来自浏览器还是测试文件。

在操作侧边栏中双击测试中的某个操作。这将过滤控制台，仅显示该操作期间生成的日志。点击显示全部按钮可再次查看所有控制台日志。

使用时间轴来筛选操作，通过点击起点并拖动到终点。控制台选项卡也将被筛选，仅显示所选操作期间生成的日志。

网络​

网络选项卡显示测试期间发出的所有网络请求。您可以按不同类型的请求、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击某个请求可查看更详细信息，例如请求头、响应头、请求体和响应体。

在操作侧边栏中双击测试中的某个操作。这将筛选网络请求，仅显示在该操作期间发出的请求。点击显示全部按钮可再次查看所有网络请求。

使用时间轴来筛选操作，通过点击起点并拖动到终点。网络选项卡也将被筛选，仅显示在所选操作期间发出的网络请求。

元数据​

在Actions选项卡旁边，您会找到Metadata选项卡，它将显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。