Trace viewer

简介

Playwright Trace Viewer 是一个 GUI 工具，可让您浏览已录制的 Playwright 测试的 trace，这意味着您可以回溯并前进测试的每个操作，并直观地查看每个操作期间发生的情况。

您将学习

• 如何录制 trace
• 如何打开 HTML 报告
• 如何打开和查看 trace

录制 Trace

默认情况下，playwright.config 文件将包含为每个测试创建 trace.zip 文件所需的配置。Traces 设置为 on-first-retry 运行，这意味着它们将在失败测试的第一次重试时运行。此外，在 CI 中运行时，retries 设置为 2，在本地运行时设置为 0。这意味着 traces 将在失败测试的第一次重试时记录，但不会在第一次运行和第二次重试时记录。

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
  },
});

要了解有关录制 trace 的可用选项的更多信息，请查看我们关于 Trace Viewer 的详细指南。

Traces 通常在持续集成 (CI) 环境中运行，因为在本地您可以使用 UI 模式 来开发和调试测试。但是，如果您想在本地运行 traces 而不使用 UI 模式，则可以使用 --trace on 强制启用 tracing。

npx playwright test --trace on

打开 HTML 报告

HTML 报告向您展示了所有已运行测试以及在哪些浏览器上运行以及它们花费了多长时间的报告。可以按通过的测试、失败的、不稳定的或跳过的测试来过滤测试。您还可以搜索特定的测试。单击测试将打开详细视图，您可以在其中查看有关测试的更多信息，例如错误、测试步骤和 trace。

npx playwright show-report

打开 trace

在 HTML 报告中，单击测试名称文件名旁边的 trace 图标，直接打开所需测试的 trace。

您还可以单击打开测试的详细视图，然后向下滚动到 'Traces' 选项卡，并通过单击 trace 屏幕截图打开 trace。

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

查看 trace

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

要了解有关 traces 的更多信息，请查看我们关于 Trace Viewer 的详细指南。

下一步是什么

• 在 CI 上使用 GitHub Actions 运行测试
• 了解更多关于 Trace Viewer 的信息