Les comparto el código de como realice el reto de esta clase:
Introducción al curso
Cypress Avanzado: Pruebas Automatizadas con Docker y Jenkins
Configuración Inicial de Cypress Avanzado en Node.js
Cookies y Localstorage
Gestión de Cookies en Cypress: Métodos Tradicionales y Experimentales
Automatización de Pruebas con Local Storage y Cypress
Emulando dispositivos
Emulación de Dispositivos Móviles con Cypress
Instalando plugins
Uso de Plugins y XPath en Cypress para Automatización Web
Flaky tests
Evitar pruebas inestables con Cypress: uso de retries y buenas prácticas
Interceptación de solicitudes de red con Cypress
Simulación de Errores de Red con Cypress Intercept
Buenas prácticas
Implementación de Page Object Model en Cypress
Comandos Personalizados en Cypress: Alternativa al Page Object Model
Variables de Entorno: Uso y Configuración en Cypress
Configuración de Variables de Entorno en Cypress
Visual testing
Implementación de Visual Testing con Cypress y Plugins
Seguridad
Seguridad en Cypress: Navegación y Pruebas entre Dominios
Manipulación de pestañas en Cypress: eliminar atributo target
Visitar múltiples dominios y compartir datos en Cypress 10
Creación de plugins en Cypress para compartir datos entre tests
Data Driven Test
Uso de Fixtures en Pruebas Automatizadas con Cypress
BDD
Configuración de Cucumber y Cypress para pruebas BDD
Reutilización de Step Definitions en Gherkin y Cucumber
Pruebas Automatizadas con Gherkin: Escenarios Outline y Tags
Reportes
Configuración y uso de múltiples reportes con Cypress
Configuración de Allure con Cypress y uso de plugins
Docker
Uso de Docker y Cypress para Pruebas Automatizadas
Dashboard
Conexión y uso del Dashboard de Cypress para pruebas automatizadas
Alternativa gratuita al dashboard de Cypress: instalación y uso
CI/CD
Integración de Jenkins y Cypress para Pruebas en Paralelo
Final
Instalación y uso del plugin Cypress Escenario Recorder
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Reutilización de Step Definitions en Gherkin y Cucumber
21/29Recursos
¿Cómo compartir información entre diferentes features usando Gherkin?
La automatización de pruebas es fundamental para asegurar la calidad en el desarrollo de software, y el uso de herramientas como Gherkin y Cucumber en Cypress nos permite escribir pruebas de manera entendible y eficiente. En esta sesión, te enseñaré cómo compartir pasos comunes entre diferentes features, algo comúnmente requerido y altamente beneficioso para evitar la duplicación.
¿Cómo se estructura la carpeta de navegación?
Nuestra primera tarea consiste en crear una nueva estructura en nuestra carpeta de features. Los pasos son los siguientes:
- Dentro de la carpeta
features, crea una nueva carpeta llamadaNavigation. - Dentro de
Navigation, crea un archivonavigation.jsy otronavigation.feature.
Estos archivos serán el núcleo de nuestra prueba de navegación. El archivo .feature se escribe en Gherkin, donde definimos los pasos a probar, como hacer clic en una opción del menú "Account Activity" y verificar el contenido.
¿Cómo evitar la repetición utilizando backgrounds?
Un background en Gherkin es un conjunto de pasos que se ejecutan antes de cada escenario en un feature. Sirve para evitar la repetición del código y establecer precondiciones:
Background:
Given que estoy en la página principal
Con esto, cada escenario bajo este feature tendrá como precondición estar en la página principal, evitando código redundante.
¿Cómo estructuramos y compartimos los step definitions?
Para que WebStorm pueda identificar correctamente dónde están los steps, debemos importar lo necesario en nuestro archivo navigation.js. A menudo, verás que algunos pasos ya existen, y no son reconocidos debido a cómo están organizados nuestros directorios. Así, podemos mover nuestros step definitions a una ubicación común y compartida.
- Dentro de Cypress, crea una carpeta
support, si es que no existe. - Dentro de
support, crea una carpetaStepDefinitions. - Mueve los step definitions necesarios a esta nueva carpeta usando una herramienta como WebStorm o VS Code.
Esto no solo centraliza nuestros steps, sino que permite que sean compartidos entre múltiples features, facilitando su mantenimiento y reuso.
¿Qué hacer si Cypress no reconoce un paso compartido?
A veces, Cypress puede no reconocer immediately los pasos compartidos. En ese caso:
- Reinicia Cypress: Cierra y abre nuevamente la aplicación para que reconozca la nueva configuración.
- Verifica configuraciones de auto-importación: Asegúrate de que tus herramientas de desarrollo automático gestionen correctamente las importaciones de tus módulos.
¿Cómo validar que estamos en la página correcta?
Para comprobar que estamos en la página de inicio (homepage) después de iniciar sesión, podemos reutilizar la lógica del login:
Given estoy en la página principal
Este paso utiliza la lógica del login para confirmar que estamos correctamente en la página inicial, lo cual es esencial para la validación de la prueba.
¿Por qué es útil reutilizar pasos con Gherkin y Cucumber?
La capacidad de compartir pasos no solo ahorra tiempo, sino que asegura la consistencia en las pruebas. Con Gherkin y Cucumber, podemos escribir en lenguaje natural y, progresivamente, automatizar nuestras pruebas de manera efectiva. Además, al convertir features en Page Objects, simplificamos el proceso de importación y hacemos más robusta nuestra configuración.
Te desafío a practicar y aplicar estas técnicas a un Page Object para el feature de navegación, y a compartir tus experiencias en la sección de comentarios. La práctica constante y la optimización del código son claves para convertirte en un experto en testing automatizado. ¡Nos vemos en la próxima clase donde veremos escenarios outline con Cucumber en Cypress!
Aportes 2
Preguntas 1
Ordenar por:
navigation.js
```js
const {
Given,
When,
Then,
} = require('@badeball/cypress-cucumber-preprocessor');
const {loginPage} = require("../../pageObjects/loginPage");
Given('I am on the login page', () => {
loginPage.validateSuccessLogin();
});
When('I click on the Account Activity Nav', ()=> {
cy.contains("Account Activity").click();
});
Then('I should see theAccount Activity content',()=> {
cy.contains("Show Transactions").should("be.visible");
});
```**navigation.feature**
```js
Feature: NavigationBar
# esto va a fallar porque no esta en shared steps teneos que mover login.js en shared steps
Background:
Given I am on the login page
When I fill in my email and password with "username" and "password"
Scenario: Navigate to the Feature Navigation Bar
Given I am on the home page
When I click on the Account Activity Nav
Then I should see the Account Activity content
```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?