跳到主要内容

追踪查看器

简介

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 报告中,单击测试名称文件名旁边的追踪图标,直接打开所需测试的追踪记录。

playwright html report

您还可以单击打开测试的详细视图,向下滚动到 'Traces' 选项卡,然后单击追踪记录屏幕截图打开追踪记录。

playwright html report detailed view

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

查看追踪

通过单击每个操作或使用时间线悬停来查看测试的追踪记录,并查看操作前后页面的状态。在测试的每个步骤中检查日志、源代码和网络、错误和控制台。追踪查看器创建一个 DOM 快照,因此您可以完全与之交互并打开浏览器 DevTools 来检查 HTML、CSS 等。

playwright trace viewer

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

下一步是什么