跳转到主要内容

Trace 查看器

简介

Playwright 跟踪查看器是一个 GUI 工具,可以让你浏览已录制的 Playwright 测试跟踪,这意味着你可以通过测试的每个操作前进或后退,并直观地看到每个操作发生的情况。

您将学到

录制跟踪

默认情况下,playwright.config 文件包含为每个测试创建 trace.zip 文件所需的配置。跟踪被设置为在 on-first-retry 上运行,这意味着它们在失败测试的第一次重试时运行。此外,当在 CI 上运行时,retries 设置为 2,在本地设置为 0。这意味着跟踪在失败测试的第一次重试时记录,而不是在第一次运行或第二次重试时记录。

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
// ...
use: {
trace: 'on-first-retry', // record traces on first retry of each test
},
});

要了解有关录制跟踪的可用选项,请查看我们关于跟踪查看器的详细指南。

跟踪通常在持续集成 (CI) 环境中运行,因为在本地你可以使用 UI 模式来开发和调试测试。但是,如果你想在不使用 UI 模式的情况下在本地运行跟踪,你可以使用 --trace on 强制开启跟踪。

npx playwright test --trace on

打开 HTML 报告

HTML 报告显示了所有已运行测试的报告,包括在哪些浏览器上运行以及耗时多久。测试可以按通过、失败、不稳定或跳过进行筛选。你还可以搜索特定的测试。点击测试会打开详细视图,你可以在其中查看有关测试的更多信息,例如错误、测试步骤和跟踪。

npx playwright show-report

打开跟踪

在 HTML 报告中,点击测试文件名旁边的跟踪图标,直接打开所需测试的跟踪。

你还可以点击打开测试的详细视图,然后向下滚动到 'Traces' 选项卡,通过点击跟踪截图来打开跟踪。

要了解有关报告器的更多信息,请查看我们关于报告器的详细指南,包括 HTML 报告器

查看跟踪

通过点击每个操作或使用时间线悬停来查看测试的跟踪,并查看操作前后页面的状态。在测试的每个步骤中检查日志、源和网络、错误以及控制台。跟踪查看器会创建 DOM 快照,因此你可以充分与之交互并打开浏览器开发工具来检查 HTML、CSS 等。

要了解有关跟踪的更多信息,请查看我们关于跟踪查看器的详细指南。

下一步