Manejo de selectores e interacciones básicas para un primer test en Cypress

Published in

Pragma

5 min readMar 19, 2024

En este artículo te contamos cómo llevar a cabo tu primer test en Cypress sin morir en el intento.

Antes de comenzar, es esencial asegurarse de tener instaladas todas las herramientas necesarias para ejecutar las pruebas de manera eficiente. Para ello, puedes referirte al artículo detallado disponible en el siguiente enlace: Guía de preparación de ambiente de Cypress, el cual proporciona instrucciones paso a paso para configurar el entorno de desarrollo de manera óptima.

Una vez preparado el ambiente, estaremos listos para empezar nuestro primer test. En este caso, nos enfocaremos en automatizar el proceso de registro en el sitio web de https://utest.com/, donde se ofrece una amplia gama de interacciones y funcionalidades que lo convierte en un excelente punto de partida para explorar las capacidades de Cypress.

Creación de la estructura del proyecto

Para comenzar se crea un carpeta en el PC en donde se guardará el proyecto; para este test práctico se llamará: Test Cypress

Dentro de esta carpeta se tiene la siguiente estructura:

Cypress: Es la carpeta principal donde residirán la mayoría de los archivos que se van a ejecutar
Fixtures: Es donde se almacenan los archivos JSON que conlleven datos o usuarios de pruebas.
Support: En este directorio se guardan los scripts de soporte que se utilizan para las pruebas, como comandos personalizados o funciones de utilidad.
node_modules/: Este directorio contiene todas las dependencias de tu proyecto de Cypress.
Package.json: Este archivo contiene metadatos sobre tu proyecto y las dependencias npm necesarias para ejecutar Cypress.
.env: Puede ser opcional si se necesita configurar variables de entorno para la ejecución del proyecto.
Nota: puede que tu PC tome a Cypress como virus y se visualice el siguiente modal, de ser el caso solo debes hacer click en Permitir

¿Que se debe de tener en cuenta para realizar una primera prueba en cypress?

A continuación se muestran distintas forma de mapear o identificar elementos en una página web:

Por ID: Puedes seleccionar un elemento por su ID utilizando el prefijo “#”. Ejemplo: cy.get(‘#miElemento’)
Por clase: Para seleccionar un elemento por su clase, se usa el prefijo “.” Ejemplo: cy.get(‘.miClase’)
Por etiqueta: Puedes seleccionar elementos por su etiqueta HTML. Ejemplo: cy.get(‘button’) seleccionará todos los botones en la página.
Por atributo: Puedes seleccionar elementos por sus atributos, como href, src, name, etc. Ejemplo: cy.get(‘[href=”/mi-enlace”]’)
Por texto: También puedes seleccionar elementos por su texto visible utilizando el método contains(). Ejemplo: cy.contains(‘Texto a buscar’)

Cypress además cuenta con diversas interacciones las cuales son acciones que se pueden realizar sobre el elemento de la página durante la ejecución de la prueba, entre las más comunes

Clic (click): Hace clic en un elemento específico de la página. Puedes hacer clic en botones, enlaces, campos de entrada, etc. Ejemplo: cy.get(‘button’).click()
Escribir (type): Escribe texto en un campo de entrada. Esto puede simular la entrada del usuario en formularios o campos de búsqueda. Ejemplo: cy.get(‘input[type=”text”]’).type(‘Texto a escribir’)
Limpiar (clear): Limpia el contenido de un campo de entrada. Puede ser útil para borrar texto antes de escribir nuevo contenido. Ejemplo: cy.get(‘input[type=”text”]’).clear()
Seleccionar (select): Selecciona opciones en elementos select o menús desplegables. Puedes seleccionar por valor o por texto visible. Ejemplo: cy.get(‘selector’).select(‘Opción a seleccionar’)
Esperar (wait): Espera un tiempo determinado o a que ocurra un evento antes de continuar con la prueba. Puede ser útil para manejar tiempos de carga o animaciones en la página. Ejemplo: cy.wait(1000) espera un segundo.
Verificar (should): Realiza afirmaciones sobre el estado de un elemento. Puedes verificar que un elemento exista, contenga cierto texto o esté visible. Ejemplo: cy.get(‘h1’).should(‘contain’, ‘Título de la página’)
Desplazarse (scroll): Desplazar la ventana del navegador o un elemento específico a una posición determinada. Puede ser útil para interactuar con elementos que están fuera del área visible de la página. Ejemplo: cy.get(‘.scrollable-element’).scrollTo(‘bottom’)