如何在.NET环境下使用Playwright录制跟踪（Trace）？

一、代码层面的问题解决 #

1. await using报错 & NewContextAsync找不到的原因 #

你使用的是Microsoft.Playwright.MSTest集成包，测试类需要继承PageTest基类——框架会自动初始化并管理Browser、Context、Page的生命周期，不需要手动调用NewContextAsync。

• 若测试方法未标记async Task，await关键字会报错，修正测试方法签名：

  [TestMethod]
  public async Task YourTestName()
  {
      // 测试代码
  }
  

• 若需手动创建多上下文场景，通过基类提供的Browser属性调用NewContextAsync，并配合await using确保资源释放：

  await using var customContext = await Browser.NewContextAsync();
  var customPage = await customContext.NewPageAsync();
  // 后续测试操作
  

2. 代码中录制Trace的两种方式 #

方式1：全局配置（测试类级别）

在测试类上添加[PlaywrightTest]属性，指定Trace录制策略：

[PlaywrightTest(Trace = TraceMode.Record)] // 可选Record/RecordOnFailure/Off
public class BlazorTests : PageTest
{
    [TestMethod]
    public async Task NavigateToCounterPage()
    {
        await Page.GotoAsync("https://your-blazor-app-url");
        await Page.ClickAsync("text=Counter");
        await Expect(Page.Locator("p")).ToHaveTextAsync("Current count: 0");
    }
}

• TraceMode.Record：始终录制Trace
• TraceMode.RecordOnFailure：仅测试失败时录制
• TraceMode.Off：关闭录制

方式2：单测试手动控制

对单个测试做精细的Trace启停控制：

[TestMethod]
public async Task TestCounterIncrement()
{
    // 启动Trace，开启截图、快照、源码捕获
    await Context.Tracing.StartAsync(new TracingStartOptions
    {
        Title = "Blazor Counter Increment Test",
        Screenshots = true,
        Snapshots = true,
        Sources = true
    });

    try
    {
        await Page.GotoAsync("https://your-blazor-app-url");
        await Page.ClickAsync("button");
        await Expect(Page.Locator("p")).ToHaveTextAsync("Current count: 1");
    }
    finally
    {
        // 停止并保存Trace到指定路径
        await Context.Tracing.StopAsync(new TracingStopOptions
        {
            Path = "counter-trace.zip"
        });
    }
}

二、命令行录制Trace #

直接用Playwright的codegen命令录制操作并生成Trace：

1. 打开命令行，导航到测试项目目录
2. 运行录制命令：

   playwright codegen --trace on https://your-blazor-app-url
   

   • --trace on：录制完整Trace（含截图、快照、源码）
   • 可选--trace retain-on-failure：仅在操作失败时保留Trace
3. 操作Blazor应用，完成后关闭codegen窗口，Trace文件会自动保存为trace.zip
4. 查看Trace文件：

   playwright show-trace trace.zip
   

补充注意事项 #

• 确保已运行playwright install安装浏览器驱动
• MSTest运行测试后，Trace默认保存在TestResults目录的对应测试运行文件夹中
• 查看Trace时，可通过时间线回放操作，定位问题节点

内容的提问来源于stack exchange，提问作者CrispinH