Playwright Cap 13: POM (Page Object Model): arquitectura, fixtures, patrones y anti-flakiness

Domina Playwright implementando Page Object Model (POM) con estándares profesionales. En este tutorial largo y completo verás cómo diseñar una arquitectura escalable, crear BasePage, componer páginas y componentes, aislar estado con fixtures, y aplicar buenas prácticas para pruebas estables y mantenibles en JavaScript/TypeScript. Incluye ejemplos listos, organización del repositorio, y recomendaciones para integrarlo en CI/CD.

Qué aprenderás

POM en Playwright: cuándo conviene, beneficios y límites.

Estructura de proyecto: tests/, pages/, components/, fixtures/, utils/, data/.

BasePage y composición de componentes (headers, modales, tablas) sin herencia frágil.

Locators modernos: getByRole, getByTestId, estrategias de selectores y resiliencia.

Fixtures y datos: test.extend, contexto por test, login rápido, semillas y limpieza.

Paralelismo seguro, tiempos de espera, retry, expect.poll, manejo de flakiness.

Configuración avanzada: playwright.config.(ts), proyectos, trace, video, screenshots.

Integración en GitHub Actions/GitLab CI: caching, matriz de navegadores, artefactos.

Reportes: HTML, Allure (visión general), métricas útiles para equipos QA.

POM (Page object model).

Que es POM?
Page object Model, es un patron de diseño. Es una forma de ordenar u organizar tu codigo para que sea lo mas legible y modular posible.

Nos ayuda a que nuestro codigo sea modular y que podamos utilizar funciones o localizadores en diferentes partes de nuestro proyecto.

Cual es la estructura?
- Carpeta Test
- Carpeta Page Objects
Recordar que es un objeto?
Un objeto en progrmaacion es util porque puede tomar varias formas segun sus propiedades y asi podemos usar diferentes tipos de datos o informacion para
las mismas funciones.

Cada pagemodel files tendra
- una clase exportable
- un constructor dentro de cada clase.

Que es un constructor?
En un bloque que se ejecutra una sola vez. Ayuda a inicilizar las clases, en este caso "loginpage".
Tambien ayuda a inicilizar las dependencias de page, que contiene la informacion del contexto del brower y en el qeu se esta ejecutando tu prueba.

Видео Playwright Cap 13: POM (Page Object Model): arquitectura, fixtures, patrones y anti-flakiness канала LARQA