Playwright Codegen

Source: Dev.to

O que é a codegen?

A codegen grava tudo o que você faz na aplicação – cliques, preenchimento de campos, navegação – e gera o código C# correspondente.
É ideal para criar rapidamente o fluxo de login, por exemplo: basta iniciar a codegen, executar o fluxo como um usuário comum e deixar a ferramenta gerar o código. Não é 100 % automática, mas chega bem perto.

Instalação

Passo a passo completo:

1. Crie um projeto de teste, entre no diretório, adicione o pacote NuGet e faça o build:

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

2. Instale os navegadores que o Playwright usa:

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

   Obs.: Se preferir (não recomendado, pois a CLI está depreciada) você pode usar:

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

   Mas a forma recomendada é a primeira, pois garante que a versão dos navegadores esteja alinhada ao seu runtime.

Usando a codegen

Estou testando uma aplicação Blazor (com Blueprint) rodando localmente em .
Para iniciar a gravação basta executar:

playwright codegen http://localhost:5000/

Dois painéis são abertos:

1. Navegador – onde você interage com a aplicação.
   

2. Janela de inspeção / gravação – mostra o código gerado em tempo real.
   

Código gerado inicialmente

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/");

Esse é o setup básico. Em testes reais você costuma colocar esse código em uma fixture (classe base) e, normalmente, deixar Headless = true para que o navegador não abra visualmente.

A gravação já está ativa por padrão (veja a captura abaixo). Caso queira navegar até outra página antes de iniciar a gravação, basta pausar a captura, navegar normalmente e reativá‑la.

Lidando com certificados HTTPS inválidos

Se a sua aplicação usa HTTPS com certificado auto‑assinado, configure o contexto para ignorar erros:

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
        };
    }
}

E herde essa classe nos seus testes:

namespace PlaywrightTests;

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

        // When

        // Then
    }
}

Criando os testes com o código gravado

Com o await page.GotoAsync("http://localhost:5000/"); já definido, falta apenas o assert.
A codegen facilita isso: ao clicar em “assert visibility” (ou outras opções) e passar o mouse sobre o elemento desejado, o código correspondente é inserido automaticamente.

Exemplo de assert gerado:

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

Dica: ajuste os seletores para usar o atributo definido em SetTestIdAttribute (no exemplo acima, data-test-id). Isso deixa os testes mais estáveis e legíveis.

Resumo rápido

Com esses passos você tem um ponto de partida sólido para criar testes de integração em .NET usando Playwright e a poderosa ferramenta codegen. Boa codificação!

Exemplo de assert gerado a partir da UI

Depois de clicar no elemento, já é feito o assert no gerador de código:

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

Assert de texto

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

Assert de snapshot

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

Obs.: Cabe a você decidir qual desses asserts segue mais o padrão que deseja aplicar no seu código.

Captura de interações em formulários

Por exemplo, ao clicar em Gravar, preencher campos normalmente e gerar código:

E grava também ao pressionar teclas e combinações:

Options

Essa parte é importante para executar o codegen com um contexto semelhante ao que você teria na sobrescrita do MyProjectTestBase.
Por exemplo, se no BrowserNewContextOptions você tem:

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

No codegen você deve iniciá‑lo assim:

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

Faça o mesmo para todas as opções que precisar (incluindo --test-id-attribute, que pode ser definido no Playwright com Playwright.Selectors.SetTestIdAttribute("propriedade-test");).

Conclusão

Espero que você tenha aprendido algo que ajude no seu fluxo de trabalho com codegen.
Se ainda restarem dúvidas, consulte a documentação, converse com o ChatGPT, pergunte ao seu líder de equipe ou ao seu “açougueiro” de confiança.
Caso nada funcione, mande uma mensagem lá no meu LinkedIn.