Guía Completa de Pruebas Automatizadas con Playwright

--- title: Guía de Pruebas Automatizadas con Playwright --- # Guía de Pruebas Automatizadas con Playwright **Manual Explicativo Detallado** --- ## Introducción Las pruebas automatizadas son un proceso fundamental dentro del desarrollo de software moderno, ya que permiten verificar que una aplicación funcione correctamente sin necesidad de realizar validaciones manuales repetitivas. Estas pruebas simulan el comportamiento real de un usuario y confirman que cada funcionalidad del sistema responde de la manera esperada. Playwright es una herramienta profesional de automatización desarrollada para probar aplicaciones web modernas. Permite ejecutar pruebas en diferentes navegadores, validar resultados automáticamente, detectar errores en interfaces y asegurar la calidad del software antes de su entrega o publicación. El propósito de esta guía es explicar detalladamente el funcionamiento de Playwright desde cero, mostrando distintas formas de utilizarlo, contemplando: - Diseño de pruebas con código - Diseño de pruebas con la herramienta de grabación integrada (Codegen) - Ejecución de pruebas con comandos desde Visual Studio Code De esta manera, cualquier persona puede comprender cómo implementar pruebas automatizadas correctamente. --- ## Requisitos previos y entorno necesario Antes de instalar y utilizar Playwright, es indispensable contar con ciertos componentes base en el sistema, ya que Playwright depende directamente de ellos para su correcto funcionamiento. ### Node.js (obligatorio) Playwright funciona sobre el entorno de ejecución Node.js. Su instalación es indispensable, ya que permite: - Ejecutar comandos `npx` - Instalar Playwright y sus dependencias - Ejecutar y administrar las pruebas automatizadas Sin Node.js, Playwright no puede instalarse ni ejecutarse. ### Python (recomendado en el entorno) En sistemas Windows es común contar con Python instalado. Aunque Playwright web se basa en Node.js, disponer de Python ayuda a evitar problemas de compatibilidad y errores durante la instalación o ejecución de herramientas auxiliares del sistema. En la práctica, contar con Python instalado contribuye a un entorno más estable. ### Visual Studio Code Visual Studio Code se utiliza como: - Editor principal del proyecto - Terminal integrada para ejecutar comandos - Herramienta de visualización y depuración Todo el flujo de trabajo descrito en esta guía se realiza desde la terminal integrada de VS Code. --- ## 1. ¿Qué es Playwright? Playwright es un framework de automatización que permite controlar navegadores web de forma programada para simular acciones reales de un usuario. Entre sus principales capacidades se encuentran: - Abrir páginas web automáticamente - Interactuar con botones, formularios y menús - Simular escritura en campos - Validar contenido visible - Verificar navegación - Ejecutar múltiples pruebas simultáneamente - Generar reportes automáticos Playwright trabaja con múltiples motores de navegador, lo que permite verificar que una aplicación funcione correctamente en distintos entornos. --- ## 2. Instalación de Playwright La instalación de Playwright se realiza una sola vez por proyecto y depende de que los requisitos previos estén correctamente configurados. ### Pasos de instalación 1. Abrir Visual Studio Code 2. Abrir la terminal dentro del proyecto 3. Ejecutar: ```bash npx init playwright@latest ``` 4. Seguir el asistente de instalación 5. Verificar la instalación ejecutando: ```bash npx playwright test ``` Si la instalación fue correcta, Playwright ejecutará pruebas de ejemplo y mostrará los resultados en la terminal. Ver ayuda general de Playwright ```bash npx playwright --help ``` Esto permite conocer todos los comandos disponibles desde la terminal. ### 2.1 Configuración del entorno (.env) En proyectos reales de automatización no es recomendable escribir directamente en el código datos sensibles como usuarios, contraseñas o direcciones URL. Para solucionar esto, se utilizan variables de entorno, las cuales permiten centralizar la configuración del sistema y reutilizarla en distintos entornos. Las variables de entorno se almacenan en un archivo .env, el cual no debe compartirse en repositorios públicos. ### Instalación de dependencia necesaria Para habilitar el uso de variables de entorno, se debe instalar el siguiente paquete: ```bash npm install dotenv ``` ### Beneficios del uso de variables de entorno - Permiten cambiar de entorno sin modificar los tests. - Protegen información sensible. - Facilitan la ejecución en entornos de QA, desarrollo y producción. - Mejoran la mantenibilidad del proyecto. --- ## 3. Diseño de pruebas usando código Este método es el más elaborado y completo, ya que permite controlar completamente el comportamiento de las pruebas. Los testers escriben scripts donde especifican paso a paso qué acciones debe realizar el navegador. ### ¿Cómo funciona? Cada prueba es un archivo dentro de la carpeta: ```bash tests/ ``` Dentro del archivo se define: - Nombre de prueba - Acciones - Validaciones ### Ejemplo explicado paso a paso ```bash const { test, expect } = require('@playwright/test'); test('Login correcto', async ({ page }) => { await page.goto('http://localhost:5500/Login.html'); await page.fill('#email', 'admin@test.com'); await page.fill('#password', '123'); await page.click('button[type=submit]'); await expect(page).toHaveURL(/Home.html/); }); ``` ### Explicación línea por línea - test() define un caso de prueba - page.goto() abre la página - fill() escribe en inputs - click() presiona botones - expect() valida resultado esperado Si una validación falla, la prueba se detiene y se marca como error. Se recomienda usar este método en sistemas que no tienen una interfaz visual, por ejemplo, APIs. --- ## 4. Diseño de pruebas utilizando Codegen Playwright incluye una función llamada codegen que permite grabar pruebas automáticamente mientras el usuario navega en el sistema. Este modo es ideal para personas que no tienen mucha experiencia en desarrollo o para crear pruebas rápidamente. Se recomienda usar este método cuando: - El tester no tiene experiencia de desarrollo - Se necesita crear pruebas rápidamente ### Funcionamiento Al ejecutar el comando: - Se abre un navegador controlado por Playwright - Se muestra una ventana con el registro de acciones - Cada clic, escritura y navegación es capturada automáticamente Playwright identifica los elementos, sus selectores y genera el flujo completo de la prueba. ### Cómo iniciar grabación Ejecutar en terminal: ```bash npx playwright codegen http://localhost:5500 ``` Se abrirá una ventana de navegador especial que grabará todas las acciones. ### Opciones avanzadas del comando codegen Grabar y generar prueba directamente en un archivo: ```bash npx playwright codegen --output tests/login.spec.js http://localhost:5500 ``` Grabar en modo móvil: ```bash npx playwright codegen --device="Pixel 5" http://localhost:5500 ``` Grabar usando un navegador específico: ```bash npx playwright codegen --browser=firefox http://localhost:5500 ``` ### Qué debe hacer el usuario Simplemente usar el sistema normalmente: - Escribir Datos - Dar clic - Navegar - Abrir módulos Playwright registrará automáticamente cada acción realizada. ### Resultado Mientras el usuario interactúa, Playwright genera el código correspondiente. Esto permite: - Aprender estructura de tests - Ahorrar tiempo - Crear pruebas base ### Uso del código generado El código generado: - Se copia y guarda en un archivo dentro de la carpeta tests/ - Puede ejecutarse directamente sin modificaciones - Sirve como base reutilizable ### Ventajas del modo grabador - No requiere programación - Fácil de usar - Ideal para aprendizaje - Genera código automáticamente - Reduce errores humanos ### Limitaciones - No genera validaciones complejas - El código puede necesitar limpieza - No es ideal para pruebas grandes --- ## 5. Validaciones esenciales en pruebas Una prueba automatizada no solo debe ejecutar acciones, también debe confirmar resultados. Sin validaciones, una prueba solo sería una simulación de navegación. Validaciones recomendadas: #### Validar texto visible Permite confirmar mensajes, títulos o estados. Ejemplo: verificar que aparezca “Bienvenido”. #### Validar existencia de elemento Permite confirmar que un componente existe. Ejemplo: botón Guardar visible. #### Validar URL Confirma que el sistema redirige correctamente. #### Validar valores de campos Permite verificar datos precargados o editados. ### 5.1 Uso de selectores estables con data-testid Uno de los problemas más comunes en las pruebas automatizadas es la inestabilidad de los selectores. Cuando se utilizan selectores basados en texto, clases o estructuras HTML, cualquier cambio visual puede romper las pruebas. Para evitar esto, se recomienda el uso de atributos exclusivos para pruebas, comúnmente llamados data-testid. #### ¿Por qué usar data-testid? - Los selectores no dependen del diseño visual - No se rompen al cambiar estilos o textos - Son claros y fáciles de mantener - Son el estándar en proyectos profesionales Este tipo de selectores permite que las pruebas sean más confiables y estables a largo plazo. --- ## 6. Organización profesional de casos de prueba Nombrar correctamente los tests facilita su mantenimiento y comprensión. Formato requerido: MODULO-ID-DESCRIPCION Ejemplo: LOGIN-01-LoginCorrecto LOGIN-02-LoginIncorrecto REPORTES-01-VerDetalle USUARIOS-01-Registro --- ## 7. Agrupación de pruebas (Suites) Las pruebas pueden organizarse en grupos para ejecutarse juntas. Tipos comunes: #### Smoke tests Validan funciones críticas: - Login - Carga inicial - Navegación #### Pruebas por módulo Permiten validar secciones específicas: - Administración - Reportes - Usuarios - Configuración --- ## 8. Ejecución de pruebas Para ejecutar todas las pruebas: ```bash npx playwright test ``` Para ver reporte visual: ```bash npx playwright show-report ``` El reporte muestra: - Pruebas exitosas - Pruebas fallidas - Errores detallados - Capturas - Tiempos #### Ejecución avanzada desde la terminal Ejecutar un solo archivo de prueba: ```bash npx playwright test tests/example.spec.js ``` Ejecutar pruebas en modo visual (con navegador visible): ```bash npx playwright test --headed ``` Ejecutar pruebas en modo debug paso a paso: ```bash npx playwright test --debug ``` Ejecutar solo pruebas que fallaron previamente: ```bash npx playwright test --last-failed ``` --- ## 9. Emulación de dispositivos Playwright permite simular dispositivos móviles sin configuraciones adicionales. Ejemplo: ```bash npx playwright codegen --device="iPhone 13" http://url.com ``` Esto permite validar diseño responsivo y flujos móviles. --- ## 10. Errores comunes y soluciones Problema: falla por carga lenta Solución: esperar elementos visibles Problema: selectores se rompen Solución: usar ID o data-testid Problema: pruebas dependientes Solución: hacerlas independientes Problema: API lenta Solución: esperar contenido renderizado Problema: error de permisos al ejecutar npx (Windows) Mensaje común: ejecución de scripts deshabilitada. Solución (ejecutar PowerShell como administrador): ```bash Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned ``` Problema: Playwright no abre navegador Solución: reinstalar navegadores ```bash npx playwright install --force ``` --- ## 11. Buenas prácticas profesionales - Crear pruebas pequeñas. - Validar siempre resultados. - Usar nombres claros. - No repetir lógica. - Mantener tests independientes. - Priorizar selectores estables. - Ejecutar pruebas localmente antes de subir cambios. - Usar --debug cuando una prueba falla. - Validar reportes después de cada ejecución. - Mantener consistencia en comandos de ejecución. - Documentar comandos usados en el proyecto. ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.