跳转到主要内容

Trace 查看器

简介​

Playwright 跟踪查看器是一个图形用户界面工具，可帮助您在脚本运行后探索记录的 Playwright 跟踪。在 CI 上失败时，跟踪是调试测试的好方法。您可以在 本地 或在您的浏览器中通过 trace.playwright.dev 打开跟踪。

打开追踪查看器​

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

pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip

使用 trace.playwright.dev​

trace.playwright.dev 是跟踪查看器的静态托管版本。您可以使用拖放或通过 Select file 按钮上传跟踪文件。

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

Drop Playwright Trace to load

查看远程追踪​

您可以直接使用其 URL 打开远程追踪。这使得查看远程追踪变得容易，例如，无需手动从 CI 运行中下载文件。

pwsh bin/Debug/netX/playwright.ps1 show-trace https://example.com/trace.zip

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

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

记录追踪​

Traces can be recorded using the BrowserContext.Tracing API as follows

using System.Text.RegularExpressions;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTestsMSTest;

[TestClass]
public class UnitTest1 : PageTest
{
    [TestInitialize]
    public async Task TestInitialize()
    {
         await Context.Tracing.StartAsync(new()
        {
            Title = TestContext.TestName,
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TestCleanup]
    public async Task TestCleanup()
    {
        // This will produce e.g.:
        // bin/Debug/net8.0/playwright-traces/PlaywrightTests.UnitTest1.zip
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
                $"{TestContext.FullyQualifiedTestClassName}.zip"
            )
        });
    }

    [TestMethod]
    public async Task TestYourOnlineShop()
    {
        // ...
    }
}

This will record the trace and place it into the bin/Debug/net8.0/playwright-traces/ directory.

仅在失败时运行跟踪​

Setup your tests to record a trace only when the test fails

using System.Text.RegularExpressions;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTests;

[TestClass]
public class ExampleTest : PageTest
{
    [TestInitialize]
    public async Task TestInitialize()
    {
         await Context.Tracing.StartAsync(new()
        {
            Title = $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TestCleanup]
    public async Task TestCleanup()
    {
        var failed = new[] { UnitTestOutcome.Failed, UnitTestOutcome.Error, UnitTestOutcome.Timeout, UnitTestOutcome.Aborted }.Contains(TestContext.CurrentTestOutcome);

        await Context.Tracing.StopAsync(new()
        {
            Path = failed ? Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
                $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}.zip"
            ) : null,
        });
    }

    [TestMethod]
    public async Task GetStartedLink()
    {
        // ...
    }
}

追踪查看器功能​

操作​

在“操作”选项卡中，您可以看到每个操作使用的定位器及其运行时间。将鼠标悬停在测试的每个操作上，即可直观地看到 DOM 快照的变化。在时间轴上来回移动，单击某个操作进行检查和调试。使用“之前”和“之后”选项卡可直观地查看操作发生之前和之后的情况。

actions tab in trace viewer

选择每个操作将显示

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

截图​

When tracing with the Screenshots option turned on (default), each trace records a screencast and renders it as a film strip. You can hover over the film strip to see a magnified image of for each action and state which helps you easily find the action you want to inspect.

双击一个操作以查看该操作的时间范围。您可以使用时间轴上的滑块来增加选定的操作，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志将过滤为仅显示所选操作的日志。

timeline view in trace viewer

快照​

When tracing with the Snapshots option turned on (default), Playwright captures a set of complete DOM snapshots for each action. Depending on the type of the action, it will capture

类型描述
之前在调用操作时的快照。
操作执行输入时的快照。这种类型的快照在探究 Playwright 究竟点击了哪里时特别有用。
之后操作后的快照。

这是典型的动作快照：

action tab in trace viewer

请注意，它同时突出显示了 DOM 节点和精确的点击位置。

源代码​

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

showing source code tab in trace viewer

调用​

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

showing call tab in trace viewer

日志​

查看测试的完整日志，以更好地了解 Playwright 在幕后正在做什么，例如滚动到视图中、等待元素可见、启用和稳定，以及执行点击、填充、按下等操作。

showing log of tests in trace viewer

错误​

如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间线还将显示一条红线，突出显示错误发生的位置。您还可以单击“源”选项卡以查看错误在源代码的哪一行。

showing errors in trace viewer

控制台​

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

showing log of tests in trace viewer

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

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

网络​

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

network requests tab in trace viewer

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

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

元数据​

在“操作”选项卡旁边，您会找到“元数据”选项卡，其中会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。

meta data in trace viewer