🧪 Suite E2E - ParaBank (WebdriverIO + Cucumber)

---

🛠️ Stack tecnologico y Arquitectura

👤 Autor

👨‍💻 Nombre	📧 Correo	🏫 Link directo al repositorio	🐙 Usuario GitHub
Jonathan David Fernandez Vargas	jonathanfdez62@gmail.com	LinkRepositorio	jonathand77

Suite de pruebas E2E para ParaBank, automatizando los flujos críticos de un cliente bancario mediante BDD.

---

1. 🔍 Introducción

Este proyecto automatiza pruebas end-to-end sobre ParaBank, una aplicación bancaria de demostración. La solución implementa WebdriverIO como motor de automatización, Cucumber para escribir los escenarios en formato Gherkin (BDD) y el patrón Page Object Model para separar la lógica de interacción con la UI de la definición de los pasos, facilitando el mantenimiento y la reutilización de código.

2. ⚙️ Requisitos Previos

Antes de comenzar, asegúrate de contar con:

• Git
• Node.js v18 o superior (incluye npm)
• Google Chrome instalado
• Conexión a internet (los tests corren contra https://para.testar.org/parabank)
• Un editor de código como Visual Studio Code (opcional)

📦 Estructura del Proyecto

WebdriverIO_ProyectoPS/
├──  RAÍZ
│   ├── .gitignore
│   ├── .git/
│   ├── .github/
│   ├── package.json
│   ├── package-lock.json
│   ├── wdio.conf.js
│   └── features/
│       ├── login.feature
│       ├── register.feature
│       ├── updateContactInfo.feature
│       ├── pagos.feature
│       ├── prestamos.feature
│       ├── pageobjects/
│       │   ├── page.js
│       │   ├── login.page.js
│       │   ├── register.page.js
│       │   ├── updateContactInfo.page.js
│       │   ├── pagos.page.js
│       │   └── prestamos.page.js
│       └── step-definitions/
│           ├── steps.js
│           ├── pagosSteps.js
│           ├── prestamosSteps.js
│           └── updateContactInfoSteps.js

---

3. 🖥️ Guía Paso a Paso para Ejecutar la Suite

3.1 Clonar el repositorio

git clone https://github.com/Jonathand77/WebdriverIO_ProyectoPS.git
cd WebdriverIO_ProyectoPS

3.2 Instalar dependencias

npm install

Esto instalará:

• @wdio/cli, @wdio/local-runner y @wdio/cucumber-framework (motor de ejecución BDD)
• @wdio/browserstack-service y @wdio/visual-service (servicios adicionales de WebdriverIO)
• chai (aserciones)
• wdio-vscode-service (integración con VS Code)

3.3 Ejecutar la suite completa

npm run wdio

También se puede ejecutar directamente con:

npx wdio run ./wdio.conf.js

⚠️ Nota: No se requiere levantar ningún servidor local; las pruebas corren contra el ambiente público de ParaBank (https://para.testar.org/parabank).

---

4. 🧩 Features Cubiertas y Buenas Prácticas

4.1 Escenarios automatizados

Feature	Descripción
login.feature	Inicio de sesión (credenciales válidas e inválidas)
register.feature	Registro de un nuevo cliente
updateContactInfo.feature	Actualización de información de contacto
pagos.feature	Pago a un beneficiario (Bill Pay)
prestamos.feature	Solicitud de préstamo

4.2 Buenas Prácticas y Arquitectura

• Page Object Model: cada pantalla de ParaBank tiene su propia clase en pageobjects/, exponiendo selectores y acciones reutilizables.
• Separación de responsabilidades: los escenarios Gherkin (*.feature) describen el comportamiento esperado, mientras que los step-definitions/ traducen esos pasos a interacciones concretas sobre los page objects.
• Reutilización: page.js centraliza comportamiento común (navegación, esperas) heredado por el resto de los page objects.
• BDD legible: los escenarios se redactan en lenguaje natural (Gherkin), permitiendo que perfiles no técnicos comprendan el alcance de las pruebas.

5. 🚀 Motor de Pruebas - WebdriverIO + Cucumber

Componente	Rol	Configuración
wdio.conf.js	Configuración central del runner	specs, capabilities, framework: cucumber
capabilities	Navegador utilizado en la ejecución	Chrome (maxInstances: 1)
runner	Modo de ejecución	local

6. 🎨 Escenarios - Detalle Funcional

6.1 Funcionalidades cubiertas

• Login con validación de credenciales correctas e incorrectas.
• Alta de un nuevo cliente a través del formulario de registro.
• Actualización de datos de contacto de un cliente ya autenticado.
• Pago a un beneficiario mediante el módulo Bill Pay.
• Solicitud de un préstamo y verificación del resultado (aprobado/denegado).

6.2 Page Objects clave

• login.page: interacción con el formulario de inicio de sesión.
• register.page: alta de un nuevo cliente.
• updateContactInfo.page: edición del perfil del cliente.
• pagos.page: flujo de pago a beneficiarios (Bill Pay).
• prestamos.page: flujo de solicitud de préstamos.

---

Fin de la guía y manual de usuario.

---