Uso de Cypress para Localizar Elementos en Formularios Web

¿Cómo optimizar la URL en Cypress?

Para aquellos que están comenzando a automatizar pruebas con Cypress, optimizar el uso de URLs es esencial para mantener un código limpio y eficiente. A menudo en nuestras pruebas, necesitamos acceder repetidamente a la misma base de URL, lo que puede volverse tedioso. Mediante el uso del archivo de configuración de Cypress, podemos definir una "base URL". Esta configuración nos permite acortar las URLs que tenemos que escribir, haciendo que solo sea necesario añadir el segmento particular del endpoint o página.

¿Qué es la base URL?

La base URL es una propiedad dentro de la configuración de Cypress donde defines la dirección común de las páginas que vas a probar. Esto es especialmente útil si estás trabajando en una aplicación de tamaño considerable, donde la mayoría de tus pruebas se realizan sobre la misma plataforma o proyecto.

Para configurarla, simplemente incluye la propiedad baseUrl en tu archivo cypress.json. Por ejemplo:

{
  "baseUrl": "https://demo.qa"
}

¿Cómo interactuar con los elementos usando localizadores?

Interactuar con los elementos de una página es una de las tareas clave en Cypress. El uso de selectores es la principal forma de identificar y manipular estos elementos. Puedes utilizar distintos métodos que te ofrece Cypress, como seleccionar elementos por tag, atributo, ID o clase.

¿Cómo utilizar selectores por tags y atributos?

Una forma eficiente de obtener elementos es mediante etiquetas HTML. Esto es útil para casos donde las etiquetas están bien definidas y son únicas. Por ejemplo, para obtener todos los elementos input, puedes usar:

cy.get('input')

También es posible seleccionar por un atributo específico. Por ejemplo, si una etiqueta tiene un atributo placeholder, así se podría obtener un input específico:

cy.get('[placeholder="First Name"]')

¿Cómo combinar atributos y tags?

Cuando existe la posibilidad de que varios elementos compartan un mismo atributo, es recomendable combinarlo con un tag para especificar más la búsqueda. De esta forma, reduzco la posibilidad de obtener múltiples elementos:

cy.get('input[placeholder="First Name"]')

¿Cómo seleccionar usando IDs y clases?

Los IDs son una de las formas más sencillas y claras de identificar elementos, ya que deben ser únicos en el DOM. Si ya tienes el ID del elemento, usar Cypress es tan sencillo como:

cy.get('#elementID')

En cuanto a clases, el principio es similar al uso de CSS. Las clases pueden conducir a múltiples coincidencias, por lo que siempre que sea posible, combinarlas con otros selectores. Si una clase tiene espacios, no olvides reemplazarlos por un punto:

cy.get('.class1.class2')

¿Qué considerar para una correcta selección de elementos?

Cuando trabajas con selectores, vale la pena recalcar que debes tener cuidado con los nombres de las clases o IDs autogenerados, especialmente en frameworks modernos como React o Angular. Además, algunas librerías de CSS introducen hashes o clases dinámicas, lo que complica aún más el uso de selectores directos.

Explora tus elementos con las herramientas de desarrollo de tu navegador para obtener una mejor idea de cómo están estructurados y de qué manera puedes identificarlos efectivamente. Siempre busca maneras de ser específico en las selecciones, lo cual no solo ayuda a la precisión de tus pruebas sino también a su mantenibilidad.

Implementar buenas prácticas al identificar elementos y optimizar la escritura de URLs te beneficiará en el largo plazo, facilitando la lectura y el mantenimiento de tus pruebas automatizadas. Te animo a seguir explorando y practicando con Cypress para continuar refinando tus habilidades.