This project implements automated UI and API tests using Playwright with TypeScript as the primary language and Allure for generating detailed reports. The Page Object Model (POM) approach ensures organized, maintainable, and reusable test cases.
Automate functional tests for a web application (e.g., a form at https://v0-classic-registration-form-u8ghow.vercel.app/) to validate:
✅ Required and optional fields.
✅ Format validations (email, phone).
✅ Success and error messages after form submission.
- Playwright - Browser automation tool for UI and API testing.
- TypeScript - Statically typed language for better maintainability.
- Allure - Generates visual and interactive reports for test results.
- Node.js - Execution environment.
project-root/
├── Pages/ # POM classes for web elements
│ └── FormPage.ts # Example: Class to interact with the form
├── tests/ # Test files
│ └── registration.spec.ts # Form validation test cases
├── api-tests/ # API test cases
├── allure-results/ # Raw Allure results (git ignored)
├── allure-report/ # Generated HTML report (git ignored)
├── test-results/ # Playwright traces and screenshots (git ignored)
├── playwright.config.ts # Playwright configuration
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── README.md # Documentation file
Install dependencies:
npm installInstall Playwright browsers:
npx playwright install- Node.js: v16 or higher.
- Java: v8 or higher (required for Allure CLI).
Run all tests:
npm run test
# or
npx playwright testRun a specific test file:
npx playwright test tests/registration.spec.tsRun tests in headed mode:
npx playwright test --headedUse Playwright's UI mode:
npx playwright test --uiRun tests and generate a report automatically:
npm run test-and-reportManually generate a report:
npx allure generate allure-results --clean -o allure-reportOpen the report in the browser:
npx allure open allure-reportFor a better development experience, install these plugins:
-
Playwright for Visual Studio Code
- Provides Playwright snippets and useful features.
- Install from the VS Marketplace
-
Playwright Test Snippets
- Offers common Playwright test snippets.
- Install from the VS Marketplace
Este proyecto implementa pruebas automatizadas de UI y API utilizando Playwright con TypeScript como lenguaje principal y Allure para la generación de reportes detallados. Se aplica el Page Object Model (POM) para garantizar pruebas organizadas, mantenibles y reutilizables.
Automatizar pruebas funcionales en una aplicación web (por ejemplo, un formulario en https://v0-classic-registration-form-u8ghow.vercel.app/) para validar:
✅ Campos obligatorios y opcionales.
✅ Validaciones de formato (correo electrónico, teléfono).
✅ Mensajes de éxito o error tras el envío del formulario.
- Playwright - Herramienta de automatización de navegadores para UI y API.
- TypeScript - Lenguaje tipado estáticamente para mejor mantenibilidad.
- Allure - Generación de reportes visuales e interactivos.
- Node.js - Entorno de ejecución.
project-root/
├── Pages/ # Clases POM para elementos web
│ └── FormPage.ts # Ejemplo: Clase para interactuar con el formulario
├── tests/ # Archivos de pruebas
│ └── registration.spec.ts # Casos de prueba del formulario
├── api-tests/ # Casos de prueba para APIs
├── allure-results/ # Resultados generados por Allure (git ignored)
├── allure-report/ # Reporte HTML generado (git ignored)
├── test-results/ # Trazas y capturas de Playwright (git ignored)
├── playwright.config.ts # Configuración de Playwright
├── package.json # Dependencias y scripts
├── tsconfig.json # Configuración de TypeScript
└── README.md # Archivo de documentación
Instalar dependencias:
npm installInstalar navegadores de Playwright:
npx playwright install- Node.js: v16 o superior.
- Java: v8 o superior (necesario para Allure CLI).
Ejecutar todas las pruebas:
npm run test
# o
npx playwright testEjecutar un archivo específico:
npx playwright test tests/registration.spec.tsEjecutar en modo gráfico:
npx playwright test --headedModo UI de Playwright:
npx playwright test --uiEjecutar pruebas y generar el reporte automáticamente:
npm run test-and-reportGenerar reporte manualmente:
npx allure generate allure-results --clean -o allure-reportAbrir el reporte en el navegador:
npx allure open allure-reportPara una mejor experiencia de desarrollo, instala estos plugins:
-
Playwright para Visual Studio Code
- Proporciona fragmentos de código y herramientas útiles.
- Instalar desde el VS Marketplace
-
Playwright Test Snippets
- Ofrece fragmentos comunes para pruebas con Playwright.
- Instalar desde el VS Marketplace