Playwright 代码生成

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll translate it into Simplified Chinese while preserving the formatting, markdown, and any code blocks.

什么是 codegen？

codegen 会记录你在应用中的所有操作——点击、填写字段、导航——并生成相应的 C# 代码。
它非常适合快速创建登录流程，例如：只需启动 codegen，像普通用户一样执行流程，让工具生成代码。虽然不是 100 % 自动化，但已经非常接近。

安装

完整步骤：

1. 创建一个测试项目，进入目录，添加 NuGet 包并进行构建：

   dotnet new xunit -n PlaywrightTests
   cd PlaywrightTests
   dotnet add package Microsoft.Playwright.Xunit
   dotnet build

2. 安装 Playwright 使用的浏览器：

   pwsh bin/Debug/net8.0/playwright.ps1 install

   注： 如果你愿意（不推荐，因为 CLI 已被弃用），可以使用：

   dotnet tool install --global Microsoft.Playwright.CLI
   playwright install --with-deps

   但推荐的方式是第一种，因为它确保浏览器版本与运行时保持一致。

Source: …

使用 codegen

我正在本地运行一个使用 Blueprint 的 Blazor 应用进行测试。
要开始录制，只需执行：

playwright codegen http://localhost:5000/

会打开两个面板：

1. 浏览器 – 你在这里与应用交互。
   

2. 检查/录制窗口 – 实时显示生成的代码。
   

初始生成的代码

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
    Headless = false,
});
var context = await browser.NewContextAsync();

var page = await context.NewPageAsync();
await page.GotoAsync("http://localhost:5000/");

这就是基本的 setup。在真实的测试中，你通常会把这段代码放在一个 fixture（基类）里，并且通常会将 Headless = true，这样浏览器就不会以可视方式打开。

录制默认已经开启（见下图）。如果想在开始录制前先导航到其他页面，只需暂停录制，正常导航后再重新激活它。

处理无效的 HTTPS 证书

如果您的应用使用自签名 HTTPS 证书，请将上下文配置为忽略错误：

using Microsoft.Playwright;
using Microsoft.Playwright.Xunit;

namespace PlaywrightTests;

public class MyProjectTestBase : PageTest
{
    public MyProjectTestBase()
    {
        // Define o atributo usado nos seletores de teste
        Playwright.Selectors.SetTestIdAttribute("propriedade-test");
    }

    public override BrowserNewContextOptions ContextOptions()
    {
        return new BrowserNewContextOptions
        {
            IgnoreHTTPSErrors = true
        };
    }
}

并在测试中继承此类：

namespace PlaywrightTests;

public class UnitTest1 : MyProjectTestBase
{
    [Fact]
    public async Task TestName()
    {
        // Given

        // When

        // Then
    }
}

使用录制的代码创建测试

在已经写好 await page.GotoAsync("http://localhost:5000/"); 之后，只剩下 assert。
codegen 可以简化这一步：点击 “assert visibility”（或其他选项），并将鼠标移到想要的元素上，相关代码会自动插入。

生成的 assert 示例：

await Expect(page.Locator("[data-test-id='login-button']")).ToBeVisibleAsync();

提示： 将选择器调整为使用 SetTestIdAttribute 中定义的属性（如上例的 data-test-id）。这样可以让测试更稳健、可读性更高。

快速概览

通过这些步骤，你就拥有了一个坚实的起点，能够在 .NET 中使用 Playwright 以及强大的 codegen 工具编写集成测试。祝编码愉快！

从 UI 生成的断言示例

点击元素后，代码生成器已自动生成 assert：

await Expect(page.GetByRole(AriaRole.Heading, new() { Name = "Welcome to BlazorBlueprint" }))
          .ToBeVisibleAsync();

文本断言

await Expect(page.Locator("h1"))
          .ToContainTextAsync("Welcome to BlazorBlueprint");

快照断言

await Expect(page.Locator("h1"))
          .ToMatchAriaSnapshotAsync("- heading \"Welcome to BlazorBlueprint\" [level=1]");

注： 由您自行决定在代码中使用哪种断言更符合您的规范。

表单交互捕获

例如，点击 保存，正常填写字段并生成代码：

并且在按下键盘按键和组合键时也会记录：

选项

这部分对于使用 codegen 并提供类似于在 MyProjectTestBase 重写中获得的上下文非常重要。
例如，如果在 BrowserNewContextOptions 中有：

return new BrowserNewContextOptions
{
    IgnoreHTTPSErrors = true,
    Locale = "en-US",
};

在 codegen 时应这样启动：

playwright codegen --ignore-https-errors --lang "en-US" http://localhost:5000/

对所有需要的选项都进行同样的操作（包括 --test-id-attribute，它可以在 Playwright 中通过 Playwright.Selectors.SetTestIdAttribute("propriedade-test"); 设置）。

结论

希望您已经学到一些能帮助您在 codegen 工作流中的东西。
如果还有疑问，请查阅文档，与 ChatGPT 交流，询问您的团队负责人或您可信赖的“屠夫”。
如果仍然无效，请在我的 LinkedIn 上给我发消息。