Skip to main content

追蹤檢視器

簡介​

Playwright Trace Viewer 是一個 GUI 工具，可以幫助你在腳本執行後探索記錄的 Playwright Traces。Traces 是在 CI 上測試失敗時進行除錯的好方法。你可以在 本地 或在瀏覽器上 trace.playwright.dev 打開 traces。

Trace Viewer features​

Actions​

在 Actions 頁籤中，你可以看到每個動作使用了什麼定位器以及每個動作執行了多長時間。將滑鼠懸停在測試的每個動作上，可以直觀地看到 DOM 快照中的變化。可以在時間上前後移動，並點擊一個動作來檢查和偵錯。使用 Before 和 After 頁籤，可以直觀地看到動作前後發生了什麼。

actions tab in trace viewer

選擇每個動作會顯示:

  • 動作快照
  • 動作日誌
  • 原始程式碼位置

螢幕截圖​

當啟用 screenshots 選項（預設）進行追蹤時，每個追蹤記錄會錄製螢幕錄影並將其呈現為影片條。你可以將滑鼠懸停在影片條上，以查看每個動作和狀態的放大圖像，這有助於你輕鬆找到你想要檢查的動作。

雙擊一個動作以查看該動作的時間範圍。你可以使用時間軸中的滑塊來增加選擇的動作，這些動作將顯示在 Actions 頁籤中，所有控制台日誌和網路日誌將被過濾以僅顯示選擇的動作的日誌。

時間軸檢視在 trace viewer 中

快照​

當開啟 snapshots 選項（預設）進行追蹤時，Playwright 會為每個動作捕捉一組完整的 DOM 快照。根據動作的類型，它將捕捉:

TypeDescription
Before呼叫時的快照。
Action執行輸入時的快照。這種類型的快照在探索 Playwright 點擊的確切位置時特別有用。
After動作之後的快照。

這是典型的 Action 快照的樣子:

動作標籤在追蹤檢視器中

注意它如何同時突出顯示 DOM 節點以及精確的點擊位置。

Source​

當你點擊側邊欄中的某個動作時，該動作的程式碼行會在 Source 面板中突出顯示。

顯示程式碼標籤在追蹤檢視器中

Call​

Call 頁籤顯示有關動作的資訊，例如所花費的時間、使用的定位器、是否處於嚴格模式以及使用了什麼鍵。

顯示在追蹤檢視器中的Call 頁籤

Log​

查看完整的測試日誌，以更好地了解 Playwright 在幕後執行的操作，例如滾動到視圖中、等待元素可見、啟用和穩定，以及執行點擊、填寫、按壓等操作。

顯示測試日誌於 trace viewer

Errors​

如果您的測試失敗，您將在錯誤標籤中看到每個測試的錯誤訊息。時間軸還會顯示一條紅線，突出顯示錯誤發生的位置。您也可以點擊來源標籤，查看錯誤發生在來源程式碼的哪一行。

顯示錯誤在 trace viewer

Console​

請查看來自瀏覽器以及測試的控制台日誌。不同的圖示會顯示控制台日誌是來自瀏覽器還是測試檔案。

顯示測試日誌於追蹤檢視器中

雙擊操作側邊欄中測試中的一個操作。這將過濾控制台，只顯示在該操作期間生成的日誌。點擊顯示全部按鈕以再次查看所有控制台日誌。

使用時間軸來篩選動作，點擊一個起點並拖動到一個終點。控制台標籤也將被篩選，只顯示在選定動作期間生成的日誌。

Network​

Network 頁籤顯示了測試期間所做的所有網路請求。你可以按不同類型的請求、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊一個請求以查看更多關於它的資訊，例如請求標頭、回應標頭、請求主體和回應主體。

network requests tab in trace viewer

雙擊在操作側邊欄中的測試操作。這將過濾網路請求，只顯示在該操作期間發出的請求。點擊顯示全部按鈕以再次查看所有網路請求。

使用時間軸來篩選動作，點擊一個起點並拖動到一個終點。Network 頁籤也將被篩選，只顯示在所選動作期間發出的網路請求。

Metadata​

在 Actions 分頁旁邊，你會找到 Metadata 分頁，該分頁會顯示更多有關測試的資訊，例如瀏覽器、視口大小、測試持續時間等。

Metadata in trace viewer

錄製追蹤​

追蹤可以使用 BrowserContext.Tracing API 如下記錄:

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()
    {
        // ...
    }
}

這將記錄追蹤並將其放入 bin/Debug/net8.0/playwright-traces/ 目錄。

僅在失敗時執行追蹤​

設定你的測試僅在測試失敗時記錄追蹤:

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()
    {
        // ...
    }
}

開啟追蹤​

您可以使用 Playwright CLI 或在您的瀏覽器中打開已保存的追蹤，網址為 trace.playwright.dev。請確保添加 trace.zip 文件所在的完整路徑。

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

使用 trace.playwright.dev​

trace.playwright.dev 是 Trace Viewer 的靜態託管變體。你可以使用拖放上傳 trace 檔案。

拖放 Playwright Trace 以載入

查看遠端追蹤​

您可以使用其 URL 開啟遠端追蹤。它們可以在 CI 執行時生成，這使得查看遠端追蹤變得容易，無需手動下載文件。

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

你也可以將上傳的 trace 的 URL（例如在你的 CI 中）從某些可存取的儲存空間作為參數傳遞。CORS (Cross-Origin Resource Sharing) 規則可能適用。

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