DEV Community

Inácio Bueno
Inácio Bueno

Posted on

Playwright Codegen

#csharp #dotnet #playwright #testing

Playwright é uma das libs de teste end-to-end mais completas disponíveis no mercado: suporte aos principais navegadores, sistemas operacionais, pronto para desenvolvimento local e execução em pipelines de integração.
Esse post não sobre playwight em si, mas sim uma ferramenta dessa lib que me ajudou demais fazendo testes de integração: codegen.
O que é a codegen? Resumindo bem, é uma ferramenta que grava toda a sua ação (clicks do mouse e ações no teclado) na aplicação que você quer testar. Então se você quer testar o fluxo de login, basta iniciar a codegen e fazer o fluxo como se você fosse um usuário comum fazendo login. É tudo tão simples assim? Não, mas é quase lá.

Instalação

Se quiser acompanhar está aqui o passo a passo:
Crie um projeto; entra no diretório; instala o nuget; faz o build

dotnet new xunit -n PlaywrightTests
cd PlaywrightTests
dotnet add package Microsoft.Playwright.Xunit
dotnet build
Enter fullscreen mode Exit fullscreen mode

Depois do build, executa isso para instalar os navegadores

pwsh bin/Debug/net8.0/playwright.ps1 install
Enter fullscreen mode Exit fullscreen mode

Uma alternativa a esse último passo, você pode fazer (não é muito recomendado pois é depreciado e em https://www.nuget.org/packages/Microsoft.Playwright.CLI recomenda você fazer pwsh bin/Debug/net8.0/playwright.ps1 install):

dotnet tool install --global Microsoft.Playwright.CLI
playwright install --with-deps
Enter fullscreen mode Exit fullscreen mode

Eu fiz isso pelo simples motivo de não querer instalar o pwsh agora. Mas você deve fazer o recomendado, eu não. Faça o que eu não faço e seja melhor por nós dois.

Codegen

Vamos logo para ferramenta. Eu estou com uma aplicação blazor (com blueprint) rodando localmente em http://localhost:5000.
Para iniciar o comando mais simples é:

playwright codegen http://localhost:5000/
Enter fullscreen mode Exit fullscreen mode

Isso deve abrir duas janelas aí no seu pc:
1 - Um navegador

2 - Janela Inspeção / gravação

Já de início temos o código:

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/");
Enter fullscreen mode Exit fullscreen mode

Que é o setup básico para início do teste. No seu teste de verdade quando for montar sua fixture, o Headless poderia ser false que evitaria que uma janela de navegador fosse "aberta visualmente".

Repare que ele já inicia com a gravação ligada

Então caso não queira testar algo direto na página inicial, você pode parar a gravação, navegar normalmente até onde deseja testar e depois voltar a gravação.

Uma observação antes de continuarmos, talvez você possa ter problemas com certificado, então faça isso:

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

namespace PlaywrightTests;

public class MyProjectTestBase : PageTest
{
 public MyProjectTestBase()
    {
        Playwright.Selectors.SetTestIdAttribute("propriedade-test");
    }
    public override BrowserNewContextOptions ContextOptions()
    {
        return new BrowserNewContextOptions
        {
            IgnoreHTTPSErrors = true
        };
    }
}
Enter fullscreen mode Exit fullscreen mode

e no seu teste herança de MyProjectTestBase:

namespace PlaywrightTests;

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

        // When

        // Then
    }
}
Enter fullscreen mode Exit fullscreen mode

1, 2, 3 teste testando

O nosso setup já foi dado:

await page.GotoAsync("http://localhost:5000/");
Enter fullscreen mode Exit fullscreen mode

falta nosso assert e aqui entra o arsenal do codegen:


Clicando em assert visibility e passando o mouse por cima da pagína ele mostra como ele vai obter o elemento:

e 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();
Enter fullscreen mode Exit fullscreen mode

O assert text geraria:

await Expect(page.Locator("h1")).ToContainTextAsync("Welcome to BlazorBlueprint");
Enter fullscreen mode Exit fullscreen mode

o assert snapshot:

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

E cabe a você decidir quais dessas segue mais o padrão de assert você quer fazer no seu código.
Aqui foquei mais na parte do assert, mas vou mostrar também um pouco mais sobre outros aspectos de captura.

Por exemplo num formulário, eu apenas clico em gravar, preencho normalmente e ele gera código:

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

Options

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

return new BrowserNewContextOptions
        {
            IgnoreHTTPSErrors = true,
Locale = "en-US",
        };
Enter fullscreen mode Exit fullscreen mode

no codegen você deve iniciar ele com

playwright codegen --ignore-https-errors --lang "en-US" http://localhost:5000/
Enter fullscreen mode Exit fullscreen mode

E assim para todas as opções (incluindo --test-id-attribute que acho bem interessante no playwright que é definido no Playwright.Selectors.SetTestIdAttribute("propriedade-test"); por exemplo) que você pode encontrar no BrowserNewContextOptions.

Conclusão

Espero que você tenha aprendido alguma coisa que te ajude no seu fluxo de trabalho com codegen. No mais, qualquer dúvida, leia a documentação, converse com o chatgpt, pergunte ao seu líder de equipe, o seu açogueiro de confiança... Se nenhum deles te ajudar, manda uma mensagem lá no meu linkedin.

Top comments (0)