Cypress-xpath ha sido deprecado
Introducción al curso
Presentación del curso
Instalación de recursos
Cookies y Localstorage
Cookies
Local Storage
Emulando dispositivos
Emulando dispositivos
Instalando plugins
Usando xpaths
Flaky tests
¿Qué son los Flaky Tests?
Interceptando Network Requests
Interceptando request
Buenas prácticas
Patrones de diseño: Page Object Model
Custom commands
Variables de entorno
Cypress.env
Visual testing
Visual testing
Seguridad
Seguridad en Cypress
Navegación entre pestañas del mismo sitio
Navegar entre diferentes dominios en diferentes tests
Navegar entre diferentes dominios en diferentes tests y compartir información entre ambas páginas
Data Driven Test
Cypress fixtures
BDD
Configuración de plugins y steps dinámicos
Shared Step Definitions
Data Driven Test por medio de Scenarios Outline
Reportes
Múltiples reportes
Allure report
Docker
Cypress con docker container
Dashboard
Usando dashboard de Cypress
Alternativas gratuitas al Dashboard de Cypress
CI/CD
Jenkins
Final
Cypress Scenario recorder plugin
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Trabajar de manera eficiente con Cypress y sus complementos es esencial para realizar pruebas automatizadas efectivas. En esta clase, te enseñaremos a instalar y configurar un complemento específico para trabajar con XPath, una necesidad crucial, sobre todo cuando los selectores CSS convencionales no son suficientes. Exploraremos su instalación, configuraciones básicas, y diferenciaremos el uso entre XPath y selectores CSS en Cypress.
El primer paso para aprovechar las capacidades de XPath en Cypress es la instalación de un complemento específico. El complemento que instalaremos se llama Cypress-XPath
. Aquí tienes cómo realizarlo:
Instalación del plugin: Ejecuta el siguiente comando en tu terminal para instalar el complemento:
npm install -D cypress-xpath
Configuración post-instalación: Luego de la instalación, es necesario importar el complemento en el archivo de soporte de Cypress. Esto asegura que Cypress reconozca los comandos de XPath.
Dirígete a la carpeta support
dentro del directorio de Cypress.
Abre el archivo e importa el complemento:
import 'cypress-xpath';
Ahora que tenemos nuestro complemento instalado y configurado, es el momento de compararlo frente a los selectores CSS estándar para entender por qué y cuándo es ventajoso utilizar XPath.
Para seleccionar un elemento con un CSS selector en Cypress:
cy.visit('/url-de-tu-pagina');
cy.get('div.container > h1').contains('Bulbasaur');
Este método obtiene un elemento h1
específico dentro de un contenedor div, verificando que el texto sea "Bulbasaur".
XPath ofrece una mayor flexibilidad, como se muestra en este ejemplo:
cy.xpath("//h1[contains(text(), 'Bulbasaur')]");
En este caso, seleccionamos cualquier elemento h1
que contenga el texto "Bulbasaur". La syntax es más legible y poderosa para ciertos contextos donde los CSS selectors pueden ser limitantes.
Los complementos en Cypress no solo extienden su funcionalidad sino que también mejoran la legibilidad y mantenimiento del código. Aunque Cypress, por defecto, no soporte XPath, los complementos de la comunidad amplían sus capacidades para satisfacer necesidades específicas.
Te alentamos a familiarizarte más con los complementos disponibles y compartir en los comentarios de qué maneras los has implementado en tus proyectos. No olvides que el manejo de XPath es vasto y de gran utilidad, especialmente en estructuras HTML complejas.
Nuestra próxima clase abordará cómo manejar los "flaky tests", pruebas que fallan ocasionalmente, y las técnicas para evitar estos problemas. ¡No te lo pierdas!
Aportes 4
Preguntas 1
Cypress-xpath ha sido deprecado
si tienes problemas al instalar el plugin de xpath prueba introduciendo este código:
npm install -D cypress-xpath
Cypress-xpath lo deprecaron, a mi me ha sido util crear mis propios plugins introduciendo logica de javascript y Cypress.Commands.add, considero que han sido demasiado utiles. Sobre todo para el E2E
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?