Introducción a Playwright: Tests E2E en C#

Imagina que estás creando una aplicación web donde tienes ciertos formularios o funcionalidades en la interfaz de usuario, obviamente necesitas saber que estas funcionalidades están siempre disponibles y funcionan de la forma correcta.

1 - ¿Qué es playwright? 

Para ello vamos a ver hoy playwright, una librería o framework que nos ayuda a testear aplicaciones web automatizando los flujos end to end. 

Este framework de automatización es open source y creado por Microsoft, la idea es poder comprobar que nuestras aplicaciones funcionan en todos los navegadores de forma confiable. 

Pese a ser de Microsoft, tiene varios SDKs oficiales, tanto .NET que es el que veremos en este post, como Typescript, java o python.

Muchos habréis visto Selenium en el pasado y es que playwright es un competidor directo de este (y yo personalmente lo he usado bastante). La realidad es que en la actualizad playwright le esta comiendo la tostada, por lo menos en lo que yo veo de forma profesional, ya que trae mejoras como el aislamiento de los tests por contexto, o habilidad de tener traces, screenshots y vídeos por defecto dentro del propio framework. 

Lo primero que necesitas es una web que vas a necesitar, técnicamente puede ser cualquier web ya sea tuya o de internet, para evitar cualquier problema he creado una web de forma rápida utilziando Codex y la tengo corriendo en este caso en mi máquina lcoal, en mi caso es un simple formulario de denuncia.

Recuerda que ya estés haciendo automatización debes hacerlo con webs donde tengas permisos, ya que puedes estar incumpliendo los términos de condiciones o la ley.

Lo mismo aplica si estás utilizando estas herramientas para hacer scraping

2 - Cómo utilizar playwright en C#

EL uso es muy sencillo, debemos crear un proyecto de test de C#, funciona tanto con MSTests, como NUnit como XUnit, dependiendo de qué motor de tests utilicemos tendremos que utilizar un paquete u otro, pero luego el código es prácticamente igual en todos.

Microsoft.Playwright.Nunit

Y hacemos build. ahora tenemos que instalar playwright o basicamente los navegadores que va a utilizar.

powershell -NoProfile -ExecutionPolicy Bypass -File .\bin\Debug\net8.0\playwright.ps1 install

NOTA: date cuenta de que este comando tiene net8 en él, eso quiere decir que tienes que actualizarlo conforme a la versión de .net que estés utilizando. 

2.1 - Crear un test con Playwright en C#

Ahora solo nos queda crear el test end to end para ver cómo funciona.

Todo el código de este post está disponible en Github de forma gratuita y corriendo en mi máquina.  Pero por supuesto funciona también contra webs online. 

Para mi caso, he creado un simple formulario para reportar avistamientos de ratas (🐀) ya que este post es para mostrar la herramienta y no hacer un desglose de su documentación. 

El primer paso de todos es ir a una web, para ello utilizamos el comando Page.GotoAsync lo que hace es iniciar el navegador e ir a dicha URL

await Page.GotoAsync("file:///C:/repos/playwright-example/frontend/index.html");

Podemos comprobar que estamos donde debemos si utilizamos el comando Expect junto al método ToHaveTitleAsync y luego una regex para el texto:

await Page.GotoAsync("file:///C:/repos/playwright-example/frontend/index.html");

await Expect(Page).ToHaveTitleAsync(new Regex("Avistamientos de RATAS"));

Cada vez que utilizamos Expect en nuestro código estamos haciendo una Assertion.

2.2 - Interactuar con una web utilizando Playwright en C#

Ahora debemos interactuar con la web, que es donde entraría todo el tema de End2End.

En el caso de nuestro formulario tenemos varios campos para decir donde hemos avistado a las ratas, así que tenemos que ir uno por uno localizandolos, para ello utilizamos el comando Page.Locator el cual busca lo que indiquemos entre los elementos del DOM, para nuestro caso, el primer elemento del formulario lo podemos encontrar y rellenar de la siguiente forma: 

string cornerPub = "el bar de la esquina";
var localNameField = Page.Locator("input[name='form_fields[local__name]']");
await localNameField.FillAsync(cornerPub);
await Expect(localNameField).ToHaveValueAsync(cornerPub);

Alternativamente podemos encontrar elementos por ID, por la ruta del dom completa, css, xpath o incluso por el placeholder.

Ahora solo nos queda rellenar el resto de elementos del formulario para finalmente enviarlo. 

[Test]
public async Task ShowcasePlaywright()
{
    await Page.GotoAsync("file:///C:/repos/playwright-example/frontend/index.html");

    await Expect(Page).ToHaveTitleAsync(new Regex("Avistamientos de RATAS"));


    string cornerPub = "el bar de la esquina";
    var localNameField = Page.Locator("input[name='form_fields[local__name]']");
    await localNameField.FillAsync(cornerPub);
    await Expect(localNameField).ToHaveValueAsync(cornerPub);


    string street = "calle number 1";
    var localStreetField = Page.Locator("input[name='form_fields[local__street]']");
    await localStreetField.FillAsync(street);
    await Expect(localStreetField).ToHaveValueAsync(street);

    string postal = "calle number 1";
    var localPostalField = Page.Locator("input[name='form_fields[local__street]']");
    await localPostalField.FillAsync(postal);
    await Expect(localPostalField).ToHaveValueAsync(postal);


    string city = "Madriz";
    var localCityField = Page.Locator("input[name='form_fields[local__localy]']");
    await localCityField.FillAsync(city);
    await Expect(localCityField).ToHaveValueAsync(city);

    string activity = "madrid - barcelona";
    var eventField = Page.Locator("input[name='form_fields[field__evento]']");
    await eventField.FillAsync(activity);
    await Expect(eventField).ToHaveValueAsync(activity);

    string message = "muchas ratas por todas partes";
    var messageField = Page.Locator("textarea[name='form_fields[field__message]']");
    await messageField.FillAsync(message);
    await Expect(messageField).ToHaveValueAsync(message);

    string quantity = "100";
    var quantityField = Page.Locator("input[name='form_fields[rats_count]']");
    await quantityField.FillAsync(quantity);
    await Expect(quantityField).ToHaveValueAsync(quantity);

    var size = Page.GetByLabel("como de gordas");
    await size.SelectOptionAsync(new SelectOptionValue { Label = "tremendas" });


    var status = Page.Locator("id=form-status");
    await Expect(status).ToHaveTextAsync(string.Empty);
    await Expect(status).Not.ToHaveClassAsync(new Regex(@"\bshow\b"));

    await Page.GetByRole(AriaRole.Button, new() { NameRegex = new Regex("Enviar reporte") }).ClickAsync();

    await Expect(status).ToHaveTextAsync("Reporte enviado. Gracias por tu ayuda.");
    await Expect(status).ToHaveClassAsync(new Regex(@"\bshow\b"));
}

Esto que hemos visto es un ejemplo de un test para un formulario, como vemos no tiene mayor complicación y no solo eso, se puede reducir mucho el código. 

3 - Funcionalidades adicionales de Playwright 

Playwright no se acaba ahí, tiene un montón de funcionalidades, prácticamente todo lo que se te ocurra que tiene que ver con webs lo puede hacer. Esto incluye autenticación, tiene un módulo donde podemos asignar autenticación y cada test se autentica, podemos reutilizar tokens si hace falta, etc. 

Si quieres simular la respuesta de una API con mock lo puedes hacer desde el propio framework. Administrar o comprobar las descargas o incluso interaccionar con los vídeos. 

Todo esto y más lo puedes encontrar en su documentación , aun así hay dos funcionalidades de las que voy a hablar.

3.1 - Capturas de pantalla con Playwright

La primera son las capturas de pantalla, estamos haciendo test end to end de una aplicación web a la cual no tenemos acceso, es más, lo más probable es que estemos ejecutando los tests desde nuestra pipeline de CI/CD por ello es muy importante tener registros de todo lo que pasa, y uno de estos elementos son las capturas de pantalla, las podemos hacer en cualquier momento, tanto cuando algo falla (dentro de un try catch) o las podemos tener cuando todo va bien.

await Page.ScreenshotAsync(new()
{
    Path = "screenshot.png",
});

Y este es el resultado:

Esto es una funcionalidad muy útil porque incluso podemos hacer capturas de elementos en vez de la página completa. 

3.2 - Traces en Playwright

Playwright tiene la posibilidad de ver los traces de todas las acciones que realiza y de los tiempos que tarda.

Para ello únicamente debemos indicarlo en el código, dependiendo que tipo de framework estes utilizando para los test, el cóigo será de una forma u otra, pero la idea es la misma, montar los traces:

[SetUp]
public async Task Setup()
{
    await Context.Tracing.StartAsync(new()
    {
        Title = $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}",
        Screenshots = true,
        Snapshots = true,
        Sources = true
    });
}

[TearDown]
public async Task TearDown()
{
    // var failed = TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Error
    //              || TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Failure;
    // Ideally store traces only on failure


    await Context.Tracing.StopAsync(new()
    {
        Path = Path.Combine(
            TestContext.CurrentContext.WorkDirectory,
            "playwright-traces",
            $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
        ),
    });
}

El resultado es un zip que contiene la información y podemos ver utilizando la herramienta para ver traces con el comando:

npx playwright show-trace path/to/trace.zip

Y en mi opinión personal esa herramienta es brutal. 

Por supuesto no tiene mucho sentido añadir estos traces a todos los test, sino a los que se rompen. 

3.3 - Modo UI

Finalmente mencionar que tiene un modo editor donde podemos ver los tests e ir testeando de forma manual.