Saltar al contenido principal

Serenity BDD con Playwright

El modulo serenity-playwright proporciona una integracion fluida entre las potentes capacidades de reportes de Serenity BDD y la automatizacion de navegadores moderna de Playwright. Esta combinacion te ofrece lo mejor de ambos mundos:

  • Velocidad y confiabilidad de Playwright - Automatizacion de navegadores moderna con espera automatica
  • Reportes enriquecidos de Serenity - Documentacion paso a paso con capturas de pantalla
  • Soporte para Page Object - Arquitectura de pruebas limpia y mantenible
  • Pruebas en multiples navegadores - Soporte para Chromium, Firefox y WebKit

Por que Playwright con Serenity?

Playwright es una biblioteca moderna de automatizacion de navegadores desarrollada por Microsoft que ofrece varias ventajas:

  • Espera automatica - Playwright espera automaticamente a que los elementos sean accionables antes de realizar acciones
  • Multiples contextos de navegador - Ejecuta pruebas en contextos de navegador aislados para una verdadera paralelizacion
  • Intercepcion de red - Simula y modifica peticiones de red facilmente
  • Emulacion movil - Prueba disenos responsivos con emulacion de dispositivos
  • Soporte para web moderna - Soporte de primera clase para Shadow DOM, iframes y componentes web

Combinado con Serenity BDD, obtienes:

  • Captura automatica de pantallas - Capturas de pantalla en cada paso completado
  • Reportes HTML enriquecidos - Reportes interactivos con documentacion paso a paso
  • Documentacion viva - Pruebas que documentan como funciona tu aplicacion
  • Captura de codigo fuente de pagina - Snapshots HTML para depurar pruebas fallidas

Dos enfoques: Page Object o Screenplay

Serenity Playwright soporta dos enfoques arquitectonicos:

Page Object (Tradicional)

El clasico patron de tres capas familiar para la mayoria de los ingenieros de automatizacion de pruebas:

Clase de prueba (escenarios de negocio)
└── Step Library (metodos @Step para reportes de Serenity)
└── Page Object (encapsula localizadores e interacciones de pagina)

Esta separacion asegura:

  • Pruebas que se leen como requisitos de negocio sin detalles tecnicos
  • Step Library que proporciona los reportes enriquecidos de Serenity con anotaciones @Step
  • Page Object que encapsula todas las estrategias de localizacion y logica especifica de pagina

Screenplay Pattern (Moderno)

El Screenplay Pattern es un enfoque mas moderno, centrado en el Actor:

Clase de prueba (escenarios de negocio)
└── El Actor realiza Task y hace Question
└── Los Task usan Target para interactuar con la UI

Con Screenplay:

  • Los Actor representan usuarios con Ability (como navegar por la web)
  • Los Task expresan acciones de alto nivel en lenguaje de negocio
  • Las Question consultan el estado de la aplicacion
  • Los Target definen elementos de UI usando selectores de Playwright

Ambos enfoques se integran perfectamente con los reportes de Serenity.

Ejemplos rapidos

Enfoque con Page Object

Asi se ve una prueba de Serenity Playwright basada en Page Object:

@ExtendWith(SerenityJUnit5Extension.class)
class SearchTest {

@Steps
WikipediaSteps wikipedia;

private Page page;

@BeforeEach
void setup() {
page = browser.newPage();
PlaywrightSerenity.registerPage(page);
}

@Test
void shouldSearchForATerm() {
wikipedia.openWikipedia(page);
wikipedia.searchFor(page, "Playwright");
wikipedia.verifyTitleContains(page, "Playwright");
}
}

Enfoque con Screenplay

Aqui esta la misma prueba usando el Screenplay Pattern:

@ExtendWith(SerenityJUnit5Extension.class)
class SearchTest {

Actor researcher;

@BeforeEach
void setup() {
researcher = Actor.named("Researcher");
researcher.can(BrowseTheWebWithPlaywright.usingTheDefaultConfiguration());
}

@Test
void shouldSearchForATerm() {
researcher.attemptsTo(
Open.url("https://en.wikipedia.org"),
SearchFor.term("Playwright"),
Ensure.that(ThePageTitle.displayed()).contains("Playwright")
);
}
}

Ambos enfoques se leen como especificaciones - sin selectores CSS ni llamadas a la API de bajo nivel de Playwright, solo lenguaje de negocio claro.

Comenzando

Listo para empezar? Dirígete a la guia Primeros pasos para configurar tu primer proyecto de Serenity Playwright.

Para un ejemplo completo y funcional:

  • Enfoque con Page Object: Revisa el Tutorial de TodoMVC que te guia paso a paso en la construccion de un conjunto completo de pruebas
  • Enfoque con Screenplay: Consulta la guia Screenplay con Playwright para el patron centrado en el Actor con ejemplos completos