-ajustes del read.me

agusdinax · agusdinax · commit 43865f4a343b · 2025-02-20T18:53:26.000-03:00
diff --git a/README.md b/README.md
@@ -1,17 +1,112 @@
-Aquí tienes un ejemplo de un archivo README.md para un proyecto de Playwright con Allure en TypeScript. Incluye información sobre el propósito del proyecto, el uso del Page Object Model (POM), la integración con Allure, cómo ver reportes, y una lista de comandos útiles, incluyendo --ui.
-Proyecto de Automatización con Playwright, TypeScript y Allure
-Este proyecto implementa pruebas automatizadas de interfaz de usuario usando Playwright con TypeScript como lenguaje principal y Allure para la generación de reportes detallados. El enfoque sigue el patrón Page Object Model (POM) para mantener las pruebas organizadas, mantenibles y reutilizables.
-Propósito
+# README - Playwright Automation Project with TypeScript and Allure
+
+## English
+
+### Project Overview
+This project implements automated UI tests using Playwright with TypeScript as the primary language and Allure for generating detailed reports. The approach follows the Page Object Model (POM) to keep tests organized, maintainable, and reusable.
+
+### Purpose
+Automate functional tests for a web application (e.g., a form at https://v0-classic-registration-form-u8ghow.vercel.app/) to validate behaviors such as:
+- Required and optional fields.
+- Format validations (email, phone).
+- Success or error messages after form submission.
+
+### Technologies Used
+- **Playwright**: Browser automation tool.
+- **TypeScript**: Statically typed language for better maintainability.
+- **Allure**: Generates visual and interactive reports.
+- **Node.js**: Execution environment.
+
+### Project Structure
+```
+project-root/
+├── Pages/                # POM classes for pages
+│   └── FormPage.ts       # Example: Class to interact with the form
+├── tests/                # Test files
+│   └── registration.spec.ts  # Test cases for the form
+├── allure-results/       # Allure-generated 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             # This file
+```
+
+### Installation
+Clone the repository:
+```bash
+git clone <REPOSITORY_URL>
+cd <PROJECT_NAME>
+```
+Install dependencies:
+```bash
+npm install
+```
+Install Playwright browsers:
+```bash
+npx playwright install
+```
+
+### Prerequisites
+- **Node.js**: v16 or higher.
+- **Java**: v8 or higher (required for Allure CLI).
+
+### Running Tests
+Execute all tests:
+```bash
+npm run test
+# or
+npx playwright test
+```
+Run a specific test file:
+```bash
+npx playwright test tests/registration.spec.ts
+```
+Run in headed mode:
+```bash
+npx playwright test --headed
+```
+Use Playwright's UI mode:
+```bash
+npx playwright test --ui
+```
+
+### Generating Allure Reports
+Run tests and generate a report:
+```bash
+npm run test-and-report
+```
+Manually generate a report:
+```bash
+npx allure generate allure-results --clean -o allure-report
+```
+Open the report:
+```bash
+npx allure open allure-report
+```
+
+---
+
+## Español
+
+### Descripción del Proyecto
+Este proyecto implementa pruebas automatizadas de interfaz de usuario utilizando Playwright con TypeScript como lenguaje principal y Allure para la generación de reportes detallados. El enfoque sigue el patrón Page Object Model (POM) para mantener las pruebas organizadas, mantenibles y reutilizables.
+
+### Propósito
 Automatizar pruebas funcionales en una aplicación web (por ejemplo, un formulario en https://v0-classic-registration-form-u8ghow.vercel.app/) para validar comportamientos como:
-Campos obligatorios y no obligatorios.
-Validaciones de formato (email, teléfono).
-Mensajes de éxito o error tras el envío del formulario.
-Tecnologías
-Playwright: Herramienta de automatización de navegadores.
-TypeScript: Lenguaje para tipado estático y mejor mantenibilidad.
-Allure: Generación de reportes visuales e interactivos.
-Node.js: Entorno de ejecución.
-Estructura del Proyecto
+- Campos obligatorios y opcionales.
+- Validaciones de formato (correo electrónico, teléfono).
+- Mensajes de éxito o error tras el envío del formulario.
+
+### Tecnologías Usadas
+- **Playwright**: Herramienta de automatización de navegadores.
+- **TypeScript**: Lenguaje con tipado estático para mejor mantenibilidad.
+- **Allure**: Generación de reportes visuales e interactivos.
+- **Node.js**: Entorno de ejecución.
+
+### Estructura del Proyecto
+```
 project-root/
 ├── Pages/                # Clases POM para las páginas
 │   └── FormPage.ts       # Ejemplo: Clase para interactuar con el formulario
@@ -24,177 +119,57 @@ project-root/
 ├── package.json          # Dependencias y scripts
 ├── tsconfig.json         # Configuración de TypeScript
 └── README.md             # Este archivo
-Page Object Model (POM)
-Este proyecto usa el patrón POM para encapsular la lógica de interacción con las páginas web:
-Ubicación: Las clases POM están en la carpeta Pages/.
-Ejemplo: FormPage.ts contiene métodos como fillName(), submitForm(), y expectErrorForField() para interactuar con un formulario.
-Ventajas:
-Código reutilizable.
-Separación de lógica de pruebas y elementos de la UI.
-Fácil mantenimiento si la UI cambia.
-Instalación
-Clona el repositorio:
-bash
+```
+
+### Instalación
+Clonar el repositorio:
+```bash
 git clone <URL_DEL_REPOSITORIO>
 cd <NOMBRE_DEL_PROYECTO>
-Instala las dependencias:
-bash
+```
+Instalar dependencias:
+```bash
 npm install
-Instala los navegadores de Playwright:
-bash
+```
+Instalar navegadores de Playwright:
+```bash
 npx playwright install
-Requisitos previos
-Node.js: v16 o superior.
-Java: v8 o superior (necesario para Allure CLI).
-Configuración
-El archivo playwright.config.ts define las opciones de ejecución:
-Carpeta de pruebas: ./tests.
-Reporteros: 'line' (consola) y 'allure-playwright' (Allure).
-Navegadores: Chromium por defecto.
-Base URL: https://v0-classic-registration-form-u8ghow.vercel.app/.
-Ejemplo de configuración:
-typescript
-import { defineConfig } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './tests',
-  timeout: 30000,
-  reporter: [['line'], ['allure-playwright', { outputFolder: 'allure-results' }]],
-  use: {
-    baseURL: 'https://v0-classic-registration-form-u8ghow.vercel.app/',
-    headless: true,
-    screenshot: 'only-on-failure',
-    trace: 'on',
-  },
-  projects: [
-    { name: 'chromium', use: { browserName: 'chromium' } },
-  ],
-});
-Uso del Proyecto
-Comandos más utilizados
-Ejecución de pruebas
-Correr todas las pruebas:
-bash
+```
+
+### Requisitos Previos
+- **Node.js**: v16 o superior.
+- **Java**: v8 o superior (necesario para Allure CLI).
+
+### Ejecución de Pruebas
+Ejecutar todas las pruebas:
+```bash
 npm run test
 # o
 npx playwright test
-Correr un archivo específico:
-bash
+```
+Ejecutar un archivo específico:
+```bash
 npx playwright test tests/registration.spec.ts
-Correr con interfaz gráfica:
-bash
+```
+Ejecutar en modo gráfico:
+```bash
 npx playwright test --headed
+```
 Modo UI de Playwright:
-Usa la interfaz gráfica de Playwright para explorar y ejecutar pruebas:
-bash
+```bash
 npx playwright test --ui
-Abre una UI en el navegador donde puedes:
-Ver y filtrar pruebas.
-Ejecutarlas individualmente.
-Depurar con inspector.
-Generación de reportes con Allure
-Correr pruebas y generar reporte:
-bash
+```
+
+### Generación de Reportes Allure
+Ejecutar pruebas y generar reporte:
+```bash
 npm run test-and-report
-Este script:
-Ejecuta las pruebas (npx playwright test).
-Genera el reporte (npx allure generate).
-Abre el reporte (npx allure open).
+```
 Generar reporte manualmente:
-bash
+```bash
 npx allure generate allure-results --clean -o allure-report
+```
 Abrir reporte:
-bash
-npx allure open allure-report
-Limpieza
-Limpiar caché y resultados:
-bash
-npm run clean
-Elimina node_modules, test-results, allure-results, allure-report, y el caché de npm.
-Instalar desde cero:
-bash
-npm run install-fresh
-Depuración
-Depurar paso a paso:
-bash
-npx playwright test --debug
-Ver salida en consola:
-bash
-npx playwright test --reporter=line
-Scripts en package.json
-json
-{
-  "scripts": {
-    "test": "npx playwright test",
-    "test-ui": "npx playwright test --ui",
-    "clean": "rm -rf node_modules package-lock.json test-results allure-results allure-report && npm cache clean --force",
-    "install-fresh": "npm run clean && npm install && npx playwright install",
-    "generate-report": "npx allure generate allure-results --clean -o allure-report",
-    "open-report": "npx allure open allure-report",
-    "test-and-report": "npm run test && npm run generate-report && npm run open-report"
-  }
-}
-Integración con Allure
-Allure se integra como reportero en Playwright para generar reportes detallados:
-Configuración: Definida en playwright.config.ts con 'allure-playwright'.
-Resultados: Guardados en allure-results tras ejecutar las pruebas.
-Generación: Convertidos a HTML con npx allure generate.
-Visualización: Abiertos con npx allure open.
-Ver los reportes
-Después de correr npm run test-and-report, el reporte se abre automáticamente en tu navegador (e.g., http://localhost:XXXX).
-Si no se abre, usa:
-bash
+```bash
 npx allure open allure-report
-El reporte muestra:
-Lista de pruebas con estado (passed, failed, skipped).
-Pasos detallados (test.step).
-Capturas y trazas (si habilitadas).
-Ejemplo de prueba
-typescript
-// tests/registration.spec.ts
-import { test } from '@playwright/test';
-import { FormPage } from '../Pages/FormPage';
-
-test.describe('Automation testing on a form', () => {
-  let formPage: FormPage;
-
-  test.beforeEach(async ({ page }) => {
-    formPage = new FormPage(page);
-    await test.step('Given that I navigate to the web page', async () => {
-      await formPage.navigate();
-    });
-  });
-
-  test('Empty mandatory fields prevent form submission', async () => {
-    await test.step('Given that I do not fill any mandatory fields', async () => {});
-    await test.step('When I try to submit the form', async () => {
-      await formPage.submitForm();
-    });
-    await test.step('Then I see errors in the mandatory fields', async () => {
-      await formPage.expectErrorForField('El nombre debe tener al menos 2 caracteres.');
-    });
-  });
-});
-Notas
-POM: Las clases en Pages/ encapsulan localizadores y métodos, haciendo las pruebas más legibles.
-Allure: Requiere Java para npx allure generate. Verifica con java -version.
-TypeScript: Usa tsconfig.json para configurar el compilador:
-json
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "commonjs",
-    "strict": true,
-    "rootDir": "./",
-    "outDir": "./dist",
-    "esModuleInterop": true
-  },
-  "include": ["./tests/**/*.ts", "./Pages/**/*.ts"]
-}
-Solución de problemas
-Reporte Allure "unknown":
-Limpia: rm -rf allure-results allure-report.
-Re-ejecuta: npm run test-and-report.
-Pruebas no corren: Verifica localizadores en FormPage.ts con el HTML real.
-Errores de caché: Usa npm run clean y reinstala.
-Este README cubre lo esencial para empezar, ejecutar, y mantener el proyecto. ¿Te gustaría que añada algo más, como ejemplos específicos del formulario o detalles de CI/CD? ¡Avísame!
+```
