Ejemplo de Cypress: Open Cypress, Variables, Primera secuencia de comandos de prueba

En el último artículo, vimos qué es Cypress, su arquitectura, el proceso de instalación y los requisitos previos necesarios para la instalación. Sin embargo, antes de comenzar a escribir nuestras pruebas, necesitamos instalar Cypress. Hacer clic aquí para obtener los pasos detallados para instalar Cypress.

Ejemplo de ciprés
Ejemplo de ciprés

Ejemplo de ciprés

Este artículo discutirá el ejemplo de Cypress, ejemplos JSON, variables y alias, y cómo escribir casos de prueba. Entonces empecemos.

Indice de contenido

Ejemplo de Cypress JSON

Inicialmente, cuando abrimos nuestro Cypress Test Runner, un cypress.json Se crea el archivo de configuración. Tendemos a almacenar el fragmento que proporciona una forma de implementar y mantener algunas propiedades que ayudan en el programa o código de automatización a ejecutar. Del mismo modo, Cypress también tiene un archivo JSON para almacenar cualquier valor que proporcionemos como propiedades de configuración.

Veamos algunos ejemplos que podemos configurar en nuestro archivo Cypress JSON.

Cypress ya tiene asignados algunos valores de configuración predeterminados. Hay varias opciones que podemos personalizar según nuestros requisitos. Por ejemplo, podemos proporcionar el baseURL propiedad en nuestra cypress.json expediente. Entonces, cada vez que ejecutamos el script, la baseURL se establece y se activa.

OptiónValores predeterminadosDescripción
baseUrlnuloEsta opción se puede utilizar como Enlance prefijo para el cy.request () or cy.visit () comandos.
watchForFileChangesverdaderoEsta opción está configurada como verdadera de forma predeterminada. Observa los archivos en busca de cambios y los reinicia cuando se realizan modificaciones.

A continuación se muestra la instantánea que hemos modificado las propiedades baseURL y watchForFileChanges en nuestro Cypress.json archivo.

Nota: Discutiremos todas las opciones en Cypress Configuration como un tema separado más adelante.

Ejemplo de ciprés
archivo cypress.json

Ciprés abierto

Anteriormente, vimos cómo crear un proyecto Cypress. Aquí veremos cómo abrir y ejecutar Cypress Test runner. ¡Así que vamos a sumergirnos!

Si había instalado Cypress a través de npm, entonces se ha instalado en el directorio ./node_modules. Por lo tanto, podemos abrir nuestro corredor de pruebas Cypress pasando un comando npm desde el raíz de nuestro directorio de proyectos.

Podemos abrir Cypress de una de las siguientes formas

1. dando el comando de ruta completa

./node_modules/.bin/cypress open

2. usando el atajo para npm bin

$(npm bin)/cypress open

3. usando npx

Aquí npx solo es compatible con npm> v5.2, o podemos instalarlo por separado.

npx cypress open

4. usando hilo

yarn run cypress open

Ahora veremos cómo abrir Cypress pasando el comando de ruta completa en nuestra terminal.

1. Tienes que pasar el comando que se menciona arriba en el punto 1, y puedes ver lo siguiente en la terminal

Apertura de Cypress en la terminal

2. Después de un momento, podemos ver el lanzamiento del corredor de prueba de Cypress y podremos ver el corredor de prueba como se muestra a continuación. Una vez que se haya lanzado el corredor de pruebas, podrá ver algunos casos de prueba de muestra. Cypress ha creado una carpeta de prueba en la raíz de nuestro proyecto que nos ayuda con la configuración básica y la redacción de casos de prueba.

Archivos de ejemplo en Test Runner

Ahora volvamos a VS Code. Primero, puede ver algunas estructuras de carpetas que se completaron. Ahora analicemos cada una de las estructuras de carpetas y veámoslas en detalle.

Estructura de carpetas en Cypress

Como vemos, Cypress ha creado una estructura de carpetas en nuestro editor de código. Los discutiremos en detalle.

Carpetas en Cypress Ejemplo
  1. Partidos de fútbol - La carpeta de accesorios contiene los datos que son estáticos y se pueden reutilizar durante todo el proyecto. Una de las mejores prácticas son los datos no estrictos (como credenciales, mensajes de prueba) en nuestras pruebas. En su lugar, accedemos a ellos a través de un archivo JSON, CSV o HTML. Deberíamos crear nuestros archivos de datos en la carpeta de accesorios. Accedemos a este archivo en nuestra prueba usando cy.fixture mando.
  2. Integración - En esta carpeta, escribimos los casos de prueba reales que normalmente llamamos archivo de especificaciones. Dentro de la carpeta de integración, podemos crear varias carpetas y muchos archivos de prueba en cada carpeta según los requisitos de nuestro proyecto. También puede ver algunos archivos de especificaciones predeterminados generados con algunos ejemplos.
  3. Plugins - La carpeta de complementos contiene archivos que le permiten tocar, acceder y modificar el comportamiento de trabajo interno de Cypress. Con los complementos, puede escribir el código personalizado que puede ayudarlo a ejecutar los comandos de prueba que tienen acceso directo a cada parte (antes o después de la ejecución) de la estructura de su código. De forma predeterminada, Cypress crea los complementos en esta ruta cypress/plugin/index.js
  4. Soporte -Debajo de la carpeta de soporte, tenemos los archivos que nos ayudan a proporcionar métodos estándar o reutilizables. Antes de cada ejecución de especificaciones, Cypress ejecuta la carpeta de soporte. Por lo tanto, no es necesario importar el archivo de soporte en todos los demás archivos de especificaciones. Esta carpeta es el lugar adecuado para agregar métodos reutilizables o funciones globales esenciales para usar con todos los demás archivos de especificaciones.
  5. Módulos de nodo - Esta carpeta contiene todos los paquetes npm que instalamos. Los módulos de nodo son importantes para ejecutar cualquier proyecto de nodo. Todas las funciones que están en nuestro proyecto Cypress están escritas dentro de nuestra carpeta de módulos de nodo. No modificaremos ningún archivo dentro de los módulos de nodo.
  6. Cypress.json - Podemos agregar múltiples configuraciones en nuestro Cypress.json expediente. Por ejemplo, podemos agregar variables de entorno, baseURL, tiempos de espera o cualquier otra opción para anular las opciones predeterminadas en el archivo de configuración de Cypress.

Variables y alias

Discutiremos las variables y los alias en Cypress en detalle.

A medida que entendemos y aprendemos Cypress, puede ser difícil para nosotros entender el API asincrónica naturaleza en Cypress. Pero como veremos muchos ejemplos en el futuro, se convertiría en pan comido. Muchos navegadores modernos utilizan API asincrónicas, e incluso los módulos principales de Node se escriben con código asincrónico. Además, el código asincrónico está presente en todas partes en el código Javascript. Por lo tanto, analizaremos los valores de retorno en Cypress.

Valores devueltos en Cypress

Todos los comandos de Cypress son en cola y corrida de forma asíncrona. por lo tanto, nosotros no puede asignar ni interactuar con ningún valor de retorno de cualquier comando de Cypress. Veremos un pequeño ejemplo de lo mismo.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

cierres

No podemos acceder a los atributos del botón a través del comando mencionado anteriormente. En su lugar, podemos generar comandos de Cypress usando .then (). A estos los llamamos cierres.

.luego()

.then () le ayuda a acceder al hilo generado por el comando anterior. Si has entendido promesas nativas, es de la misma manera .then () funciona con Cypress. También podemos anidar diferentes comandos dentro de .then (). Cada comando anidado puede acceder al comando anterior en el ciclo. Veremos eso con un ejemplo.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Hemos usado cierres en el ejemplo anterior, lo que nos permite mantener la referencia del comando anterior en el bucle.

Variables

Por lo general, tendemos a asignar un valor a una variable. Pero en Cypress, apenas usamos const, vary let. Cuando usamos cierres, podemos acceder a los objetos cedidos sin asignarlos a una variable.

Pero hay algunos casos en los que podemos declarar una variable cuando el el estado del objeto cambia (objetos mutables). Por ejemplo, si requerimos comparar un objeto con su valor anterior, lo estaremos declarando a una variable para compararlo con el siguiente valor. Veamos un ejemplo para esto.

<button>increment</button>

You clicked button <span id="num">0</span> times

Aquí, el intervalo con el recuento 0 sigue aumentando cada vez que hacemos clic en el botón. Entonces, el objeto de botón tiende a cambiar su estado cada vez.

Ahora veamos cómo podemos asignar esto a una variable en nuestro código Cypress.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Dado que span cambia su estado cada vez que hacemos clic en el botón, podemos asignarlo a una variable para comparar su estado actual y anterior. Solo en el caso de objetos mutables necesitaremos variables, y usando const es un buen enfoque.

Alias

Anteriormente, vimos qué son las variables y su limitación en Cypress. Para superar esta limitación, Aliases entra en escena. Alias ​​es una de las poderosas construcciones de Cypress. Veremos esto en detalle con ejemplos.

Generalmente, los alias pueden ayudarlo a trabajar como una variable. Sin embargo, hay algunos casos de uso en los que un alias puede ayudarnos en lugar de una variable.

1. Reutilizar elementos DOM

Podemos alias de elementos DOM y luego acceder a ellos para su reutilización. Los alias también superan las limitaciones de .luego() mando.

2. Compartiendo contexto

En un sentido simple, compartir contexto es compartir el objeto entre los ganchos y las pruebas. El caso de uso principal para compartir contexto es lidiar con cy.fixture - que consiste en cargar un conjunto fijo de datos en un archivo.

¿Cómo acceder a los alias?

Aquí veremos cómo acceder a los alias. Estaremos usando el .as() comando para asignar el elemento para su uso posterior. El parámetro requerido es el sobre nombre. El nombre del alias se utiliza como referencia dentro de un cy.get() or cy.wait() usando el @ prefijo.

Veremos un ejemplo de cómo acceder a los alias.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

En la primera línea, obtenemos el id del user_login de DOM. Entonces estamos usando .as() y declarando con un nombre de usuario. En la segunda línea, estamos accediendo a nuestro alias con @ símbolo y realizando el tipo acción.

Ejemplo de prueba de Cypress

Comenzaremos a escribir nuestro primer caso de prueba con Cypress. Es muy simple y facil. Pero antes de eso, analizaremos las construcciones de la prueba Cypress.

Construcciones básicas de ciprés

Cypress ha adoptado la sintaxis de Mocha para sus casos de prueba y utiliza todas las opciones que ofrece Mocha. A continuación se muestran las construcciones básicas de Cypress que se utilizan en común para nuestros casos de prueba.

  • Describir() - combina todos los casos de prueba en una única prueba más grande y los agrupa. Se necesitan dos parámetros: la descripción de la prueba y una función de devolución de llamada.
  • eso() - escribimos casos de prueba individuales en nuestro bloque it (). Este bloque también toma dos parámetros: lo que hace una prueba, y el segundo parámetro es la función de devolución de llamada.
  • después() - esto se ejecuta después de todas las pruebas en el archivo de especificaciones.
  • después de cada() - esto se ejecuta después de cada caso de prueba individual.
  • antes de() - se ejecuta antes de todas las pruebas en el archivo de especificaciones.
  • beforeEach () - se ejecuta antes de cada caso de prueba individual.

¿Cómo escribir un caso de prueba?

Antes de comenzar, debemos saber qué es un caso de prueba, escribirlo y cuáles son los pasos para un caso de prueba básico.

1. Requisito previo - El estado de la aplicación que vamos a probar.

2. Acción - Realizamos alguna acción sobre la aplicación.

3. afirmación - Afirmamos o validamos el comportamiento cambiado con respecto a nuestras acciones.

Nosotros lo consideraremos LamdaGeeks aplicación para nuestros ejemplos de prueba. Con el mismo procedimiento, consideraremos automatizar el siguiente escenario

1. Visita el sitio web https://lambdageeks.com/

2. Valide si el título es Inicio - Lambda Geeks
Usos del ciprés cy como su definición de tipo. Estaremos agregando el cy comando para invocar cualquier método.
En primer lugar, creemos un nuevo archivo en nuestro editor de código.

1. Cree una nueva carpeta llamada Demo en la carpeta de integración.

Creación de nuevo folder

2. En la carpeta Demo, cree un archivo nuevo. sample.js. Escribiremos nuestro primer caso de prueba en este archivo.

Creación de nuevo archivo

¡Ahora comencemos a escribir nuestros casos de prueba!

1. 1. En primer lugar, visitaremos la página utilizando el visitar() método en Cypress. Este comando navegará a la URL que proporcionamos. Los englobaremos dentro de un bloque describe () y it ().

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Una vez abierta la aplicación, validaremos el título mediante el get() método en Cypress .get() recupera todos los selectores css del DOM.

Estamos accediendo al título usando el title() método, y estamos afirmando el uso de la biblioteca Chai con el comando debería pasar el primer parámetro como igual, en resumen eq. El segundo parámetro es la cadena que esperamos.

 cy.title().should('eq','Home - Lambda Geeks')

¡Viva! Con dos simples pasos, hemos escrito nuestro caso de prueba Cypress.

Aquí está el código completo de nuestro caso de prueba.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});
Ejemplo de ciprés: Primer caso de prueba

Ejemplo de inicio de sesión de Cypress

Veremos ejemplos de cómo automatizar una página de inicio de sesión con Cypress. Como vimos antes, escribir un caso de prueba en Cypress es simple. Ahora pasemos a establecer los valores en el campo de texto y las afirmaciones.

1. Visitamos el sitio web https://demo.applitools.com/ mediante el uso cy.visit mando.

 cy.visit('https://demo.applitools.com/')

2. Ingrese el nombre de usuario en el campo de nombre de usuario usando el comando de tipo. Pasaremos el nombre de usuario como una cadena en el tipo como parámetro.

 cy.get('#username').type('test123')

3. Del mismo modo, escribimos el mismo comando para ingresar la contraseña

 cy.get('#password').type('123')

4. Ahora, hacemos clic en el botón de inicio de sesión con el click() método en Cypress.

cy.get('#log-in').click();

5. Después de iniciar sesión, llegamos a la página de la aplicación. Así que afirmamos que la URL tiene la /app extensión usando el .include() palabra clave en chai. El primer parámetro de debería es la palabra clave que estamos afirmando y el segundo parámetro es el resultado esperado.

cy.url().should('include', '/app')

Hemos escrito un código completo para una funcionalidad de inicio de sesión en cinco sencillos pasos. A continuación se muestra el código completo para su referencia.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});
Caso de prueba de inicio de sesión

Soluciones a problemas comunes al iniciar Cypress y preguntas frecuentes

Puede haber algunos problemas comunes que enfrentaremos cuando intentemos iniciar Cypress. Discutiremos algunos de los problemas comunes.

1. No se puede encontrar el comando 'Cypress' durante el comando Abrir Cypress

Una vez después de la instalación, debemos pasar el comando open cypress desde la raíz del directorio del proyecto. Por ejemplo, ha creado un proyecto llamado CypressProject; deberías pasar el npm init comando navegando a la carpeta CypressProject. Puede navegar dando el siguiente comando en la terminal

cd CypressProject

Una vez que esté en la raíz del proyecto, pase el npm init comando para descargar las dependencias.

Ahora, para abrir Cypress, algunas personas intentan navegar a la /node_modules carpeta y ./bin y luego pasar el comando cypress open. Sin embargo, no funciona de esta manera. Entonces, en su lugar, dé todo el comando de apertura desde la raíz del directorio del proyecto para abrir Cypress.

./node_modules/.bin/cypress open

Además, tenga cuidado con la barra '/ '. Siempre proporcione esto '/ ' para abrir Cypress.

2. Ciprés no se puede cargar porque la ejecución de scripts está deshabilitada en este pulverizador

Al instalar Cypress en Windows, es posible que a veces se enfrente al error anterior. Es debido a una excepción de seguridad. Podemos resolver este error pasando el siguiente comando en PowerShell.

Set-ExecutionPolicy RemoteSigned

Pasos para reproducir:

  • Abre PowerShell
  • Ejecuta este comando Set-ExecutionPolicy RemoteSigned
  • Tipo Yes
  • Ahora abre el Cypress pasando ./node_modules/.bin/cypress open. Test Runner se abrirá ahora.

Preguntas Frecuentes

1. ¿Cuáles son los sistemas operativos compatibles con Cypress?

Soportes de ciprés Mac, Windowsy Linux sistemas operativos.

2. ¿Cypress admite la automatización en aplicaciones móviles nativas?

Cypress nunca podrá ejecutarse en una aplicación móvil nativa. Pero podemos probar aplicaciones móviles que están escritas en un navegador como Iconic Frameworks.

3. ¿Cypress solo admite aplicaciones basadas en Javascript?

¡No! Cypress puede interactuar con cualquier navegador web escrito en lenguajes como Ruby on Rails, Node, PHP, C #. Pero escribiremos nuestras pruebas en Javascript. De lo contrario, Cypress puede interactuar con cualquier interfaz, interfaz, lenguaje y marco.

Acerca de Aishwarya Lakshmi

Soy un entusiasta de las pruebas y tengo más de 2 años de experiencia en el dominio de las pruebas. Me apasionan las pruebas y me encanta explorar cosas nuevas en mi campo y compartirlas con mis compañeros. Disfruto escribiendo blogs durante mi tiempo libre de la forma más sencilla pero eficaz. Como tester, me gusta tener las cosas a la perfección, por lo que deseo que mis lectores comprendan perfectamente la tecnología. Me mantengo actualizado con las nuevas tecnologías relacionadas con las pruebas y dedico tiempo a comprenderlas. Me complace ayudar a los estudiantes a comprender los conceptos de las pruebas.
Conectémonos a través de LinkedIn: https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

Frikis Lambda