Trace 查看器

介绍

Playwright Trace Viewer 是一个图形用户界面工具,允许你浏览记录的 Playwright 测试追踪。通过该工具,你可以回顾和前进每个测试动作,并直观地查看每个动作发生时的情况。

你将学习:

  • 如何记录追踪

  • 如何打开 HTML 报告

  • 如何打开并查看追踪

记录 Trace

默认情况下,【playwright.config】 文件将包含创建每个测试的 trace.zip 文件所需的配置。追踪默认设置为 on-first-retry,意味着它们将在失败测试的第一次重试时运行。并且在 CI 环境中重试次数设置为 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
  },
});

要了解有关记录追踪的更多选项,请查看我们的 【Trace Viewer】 详细指南。

追踪通常在持续集成(CI)环境中运行,因为本地开发和调试测试时可以使用 【UI 模式】。然而,如果你想在本地运行追踪而不使用 【UI 模式】,你可以通过 --trace on 强制启用追踪。

npx playwright test --trace on

打开 HTML 报告

HTML 报告会显示所有已运行测试的报告,包括运行的浏览器以及每个测试的运行时长。你可以按通过的测试、失败的测试、易错的测试或跳过的测试进行筛选,也可以搜索特定的测试。点击某个测试名称可以打开详细视图,查看该测试的错误信息、测试步骤和追踪。

npx playwright show-report

打开追踪

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

image 2024 12 15 21 41 57 854

你也可以点击测试的详细视图,向下滚动到 'Traces' 标签,点击追踪截图来打开追踪。

image 2024 12 15 21 42 22 750

要了解更多关于报告的内容,请查看我们关于报告的详细指南,包括 【HTML 报告器】。

查看追踪

通过点击时间轴中的每个动作或悬停,你可以查看测试过程中页面在每个动作前后的状态。你可以在每个测试步骤中检查日志、源代码、网络、错误和控制台。Trace Viewer 会创建一个 DOM 快照,使你可以完全交互并打开浏览器开发者工具来检查 HTML、CSS 等内容。

image 2024 12 15 21 43 29 408

要了解更多关于跟踪的信息,请查看我们关于 【Trace Viewer】 的详细指南。

下一步

  • 在 CI 环境中使用 GitHub Actions 运行测试

  • 进一步了解 Trace Viewer