Qué es Cypress Json: ejemplo, esquema, análisis práctico detallado

Discutiremos la estructura JSON, ejemplos y experiencia práctica detallada para escribir JSON en nuestro código. Pero, primero, ¡profundicemos en nuestro artículo!

cypress json

Qué es Cypress Json: ejemplo, esquema, análisis práctico detallado

En nuestro anterior artículo, discutimos variables y alias y cómo escribir nuestro primer caso de prueba. Ahora, discutiremos Cypress JSON y cómo incorporarlo a nuestro código.

Indice de contenido

Archivo JSON Cypress

Como vimos anteriormente, la primera vez que abrimos nuestro Cypress Test Runner, crea un cypress.json expediente. Este archivo se utiliza para pasar cualquier valor de configuración que necesitemos. Entonces, primero, veremos las opciones que podemos pasar en nuestro cypress.json archivo.

Opciones JSON predeterminadas

Ciertas opciones están configuradas de forma predeterminada en Cypress. Sin embargo, podemos personalizarlos según nuestro proyecto. Para identificar los valores predeterminados establecidos por Cypress, navegue hasta el Ajustes carpeta en nuestro Cypress Test Runner. Desde allí, expanda la opción Configuración para ver las opciones predeterminadas establecidas por Cypress.

Archivo JSON Cypress

Las opciones son las configuraciones predeterminadas proporcionadas por Cypress.

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

de pago

Podemos cambiar las opciones predeterminadas de Cypress pasando cualquier argumento que sea compatible con nuestro proyecto. Como sugiere el nombre, cypress.json es un archivo JSON, por lo que tenemos que pasar nuestros argumentos en formato JSON. En nuestro código VS, puede ver que cypress.json está vacío y no se le pasan argumentos. Ahora veamos las diferentes opciones que podemos pasar en nuestro archivo JSON.

Opciones Globales

Podemos pasar las opciones globales a argumentos a los que se debe acceder globalmente. Por ejemplo, en la siguiente tabla, la columna Opciones representa la palabra clave que pasaremos en nuestro archivo JSON; Predeterminado indica el valor predeterminado de la opción particular establecida por Cypress, y Descripción indica el significado de la opción.

OptiónPredeterminadoDescripción
baseUrlnullPodemos configurar la URL globalmente en lugar de pasar cada archivo. Se puede utilizar para cy.visit() or cy.request() comandos
clientCertificates[]Puede utilizar esta opción para configurar certificados de cliente por URL.
env{}Puede pasar cualquier variable de entorno como valor. Esta opción será útil si estamos probando nuestra aplicación en diferentes entornos como staging o producción.
watchForFileChangestrueEsta opción comprueba si Cypress observa y reinicia las pruebas cuando se realizan cambios en el archivo.
portnullPodemos pasar el número de puerto en el alojamiento Cypress. Se genera un puerto aleatorio, pero podemos agregar el número de puerto que necesitamos.
numTestsKeptInMemory50Esta opción es la cantidad de instantáneas de prueba y datos de comandos que se almacenan en la memoria. Si hay un alto consumo de memoria en el navegador durante una ejecución de prueba, podemos reducir el número.
retries{ "runMode": 0, "openMode": 0 }Esta opción sirve para especificar el número de veces que se reintentará una prueba que no esté funcionando correctamente. Podemos configurarlo por separado para carrera de cipreses y ciprés abierto.
redirectionLimit20Podemos configurar el límite para la cantidad de veces que se puede redirigir la aplicación antes de que ocurra un error.
includeShadowDomfalseLa capacidad de navegar dentro del Shadow DOM para interactuar con los elementos. De forma predeterminada, se establece en falso. Si nuestra aplicación tiene algún elemento que requiera navegación de raíz oculta, puede configurarlo en true.

Cypress JSON Timeout

El tiempo de espera es uno de los conceptos más importantes en cualquier marco de automatización. Cypress proporciona una variedad de opciones que ayudan a manejar los tiempos de espera en nuestros scripts. Primero, veremos las opciones que podemos configurar.

OptiónPredeterminadoDescripción
defaultCommandTimeout4000Esta opción es esperar a que se carguen los comandos basados ​​en DOM Elements. Esto es en milisegundos.
requestTimeout5000Tiempo, en milisegundos, para esperar hasta que se agote el tiempo de espera del comando cy.wait ().
responseTimeout30000Este tiempo de espera es esperar hasta una respuesta en una serie de comandos como  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies()cy.screenshot() comandos
taskTimeout60000Tiempo de espera, en milisegundos, para la finalización de la ejecución de cy.task() comando
execTimeout60000Este tiempo en milisegundos es esperar a que finalice la ejecución del cy.exec() mando,
que es la finalización del comando del sistema
pageLoadTimeout60000Este tiempo de espera espera page navigation events o comandos que interactúan
con las paginas como cy.visit()cy.go()cy.reload()

Archivo JSON de lectura de Cypress

A veces, necesitaremos interactuar con las carpetas o archivos de nuestro proyecto. Para interactuar, tenemos que configurar ciertas opciones en nuestro cypress.json archivo para manipular los archivos. Entonces, primero, veamos las opciones disponibles en nuestra configuración de carpetas / archivos.

OptiónPredeterminadoDescripción
downloadsFoldercypress/downloadsEsta es la ruta donde se descargan y almacenan los archivos durante una ejecución de prueba.
fixturesFoldercypress/fixturesEsta es la ruta a la carpeta que contiene los archivos del aparato. Podemos pasar false para deshabilitar el almacenamiento de archivos.
ignoreTestFiles*.hot-update.jsPuede pasar esto como una cadena o matriz de patrones globales para ignorar los archivos de prueba para la ejecución de prueba. Sin embargo, se mostrará en los archivos de prueba.
integrationFoldercypress/integrationLos archivos de prueba de integración se almacenan en esta ruta a la carpeta.
pluginsFilecypress/plugins/index.jsEsta ruta es donde se almacenan los complementos. Puede pasar el argumento como falso para deshabilitar esta configuración.
screenshotsFoldercypress/screenshotsCapturas de pantalla de la ejecución de cy.screenshot() falla de comando y prueba durante cypress run se almacenan en esta carpeta
supportFilecypress/support/index.jsAquí se almacenan los archivos de prueba que se cargan antes de la prueba. Tienes la opción de deshabilitar pasando false
testFiles**/*.*Ruta de los archivos de prueba que deben cargarse. Es una cadena o una matriz de patrones globales.
videosFoldercypress/videosRuta de la carpeta que almacenará videos durante la ejecución de la prueba

Capturas de pantalla y opciones de video

Podemos configurar nuestras instantáneas y videos en nuestro archivo cypress.json (), y Cypress nos brinda algunas opciones para personalizar nuestra configuración.

OptiónPredeterminadoDescripción
screenshotOnRunFailuretrueOpción para establecer en verdadero o falso si Cypress toma una captura de pantalla durante la falla de la prueba cuando se ejecuta cypress. Está configurado para true por defecto
trashAssetsBeforeRunstrueEsta opción es eliminar los activos en el videosFolder, downloadsFolder y screenshotsFolder antes de cada cypress run
videoCompression32Esta opción es la calidad de la compresión de video medida en el factor de frecuencia constante (CRF). Pasando false, también puede desactivar esta opción. Puede pasar valores de 0 a 51, donde el valor más bajo proporciona una mejor calidad.
videosFoldercypress/videosLa carpeta donde se guarda el video de las pruebas.
videotrueValor booleano para capturar el video de la ejecución de la prueba con cypress run.
videoUploadOnPassestrueEsta opción es para cargar los videos en el Tablero cuando todos los casos de prueba en un archivo de especificaciones están pasando.

Viewport y accionabilidad

Puede configurar y pasar valores para cambiar la altura y el ancho de la ventana gráfica con las opciones proporcionadas por Cypress. También se pueden configurar opciones de accionabilidad.

OptiónPredeterminadoDescripción
viewportHeight660Esto es para proporcionar la altura predeterminada para la aplicación en píxeles. Podemos anular este comando con cy.viewport()
viewportWidth1000Opción para el ancho de la ventana gráfica en píxeles para la aplicación. Puede anularse con cy.viewport() mando.
animationDistanceThreshold5El valor umbral para la distancia medida en píxeles donde un elemento debe exceder considerando el tiempo de animación.
waitForAnimationstrueOpción de esperar a que los elementos completen la animación antes de ejecutar cualquier comando.
scrollBehaviortopEsta es una opción de ventana gráfica que debe desplazarse a un elemento justo antes de ejecutar cualquier comando. Las opciones disponibles son 'center''top''bottom''nearest'false, En el que false desactiva el desplazamiento.

Ejemplo de Cypress JSON

Anteriormente, vimos las diferentes configuraciones que podemos pasar en nuestro cypress.json expediente. Ahora, veremos un ejemplo de cómo usarlos en nuestro proyecto.

Anulación de los valores predeterminados en el archivo cypress.json

En nuestro código VS, abra el cypress.json expediente. Anularemos el defaultCommandTimeout orden a 8000.

{
    "defaultCommandTimeout" : 8000
}

Así es como se ve en nuestro proyecto de código VS.

archivo cypress.json

Cambiando el cypress.json archivo, se aplica a todo el marco. Podemos verificar navegando a nuestra configuración de Cypress. Ha cambiado de un valor predeterminado de 4000 a 8000

Cypress settings valores predeterminados

Anular los valores predeterminados mediante el script de prueba

También podemos manipular los valores predeterminados a través de nuestro script de prueba. En lugar de pasar en el cypress.json archivo, lo pasaremos en nuestro archivo de prueba.


//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

De esta manera, podemos anular los valores predeterminados en nuestro archivo de prueba. Sin embargo, esto no afecta ningún cambio de configuración en el nivel del marco. Cypress da prioridad a los valores en cypress.json. Por último, retoma las configuraciones globales.

Cypress Fixture JSON Array

Ciprés cy.fixture() es una función que carga un conjunto fijo de datos en un archivo. Podemos usar el accesorio como JSON para cargar cualquier valor o matriz en el archivo JSON. Primero, entendamos cómo acceder al archivo JSON en nuestro proyecto.

Mi archivo JSON tiene dos propiedades: nombre de usuario y contraseña. Mi nombre de archivo JSON es examples.json.

{
"email": "test@gmail.com",
"password" : test123
}

En nuestro archivo de especificaciones, accederemos a nuestro dispositivo con el comando cy.fixture () y el concepto de alias.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

Cypress env JSON

Las variables de entorno se utilizan en muchos proyectos de organizaciones. Usamos variables de entorno

  • cuando los valores son dinámicos en diferentes máquinas
  • cuando queremos probar en diferentes entornos, como puesta en escena, pruebas, desarrollo, producción / en vivo

Estos casos requieren que definamos variables de entorno. Sin embargo, si configuramos una variable env en un archivo de especificaciones, no se refleja en otros archivos de especificaciones. Esto se debe a que Cypress ejecuta cada archivo de especificaciones de forma independiente. De esta forma, necesitaremos configurar las variables env por separado.

Accedemos a nuestros archivos de entorno desde nuestro archivo Cypress JSON, es decir, cypress.json expediente. Por lo que se nos pedirá que asignemos la opción en nuestro cypress.json y lo usamos en nuestro archivo de especificaciones. Así que profundicemos en nuestro ejemplo.

Podemos establecer nuestras variables de entorno en nuestro archivo de configuración o cypress.env.json archivo.

Configuración de la variable de entorno en el archivo cypress.json

Establecemos la propiedad env mediante un par clave-valor. Cualquier valor pasado bajo la palabra clave env caen bajo las variables de entorno, y Cypress toma el argumento de la env palabra clave. La sintaxis se parece a la siguiente.

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

Si queremos acceder al env variable en nuestro archivo de especificaciones, las asignamos como se menciona a continuación.

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

Agregaremos el env configuración en nuestro proyecto y accederá a ellos en nuestro archivo de especificaciones. En nuestro cypress.json archivo, agregue la siguiente configuración. Estamos estableciendo nuestro URL propiedad y asignándolos a nuestra URL. Aquí, URL es la clave, y https://lambdageeks.com/technology/ es el valor.

{
  "env" : {
      "url" : "https://lambdageeks.com/technology/"
    }
}

Como hemos declarado la configuración, accederemos a ellos en nuestro archivo de especificaciones. Se ve algo como abajo. Como se mencionó anteriormente, usaremos Cypress.env() método para acceder a la variable env.

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

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

Configuración de la variable de entorno en el archivo cypress.env.json

Podemos asignar nuestra variable de entorno en nuestro archivo JSON cypress env. Para eso, debemos crear un nuevo archivo llamado cypress.env.json en la raíz del proyecto. No necesitaremos el env palabra clave; en su lugar, podemos acceder directamente a ellos pasando el par clave-valor.

{
    "key1": "value1",
    "key2": "value2"
}

Veamos cómo asignarlos en nuestro cypress.env.json archivo.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
Creación del archivo cypress.env.json

Como ve arriba, hemos creado un nuevo archivo, cypress.env.json, y agregó nuestro URL propiedades. La forma de acceder a las variables de entorno sería la misma que se mencionó anteriormente en el apartado anterior.

Reportero de Cypress JSON

Como sabemos, Cypress está construido sobre Mocha; se puede utilizar cualquier reportero creado para Mocha. Podemos configurar reporter en nuestro archivo JSON globalmente en nuestro cypress.json archivo.

reporterspecAquí, puede especificar el reportero que debe generar durante la carrera de cipreses. Está configurado para spec como reportero predeterminado.
reporterOptionsnullEsto es para especificar las opciones admitidas para el reportero.

Las opciones mencionadas anteriormente son las configuraciones establecidas en Reporter por defecto. además, el spec reporter está configurado de forma predeterminada. Así, en el reportero, podemos configurar cualquier reportero que sea compatible con Mocha. reporterOptions es especificar las opciones admitidas según el reportero que estemos configurando.

Veamos cómo configurar el reportero en nuestro cypress.json archivo.

Consideremos al reportero múltiple mochawesome como nuestro reportero. Primero instalaremos el reporter y lo agregaremos a nuestro cypress.json archivo.

npm install --save-dev mocha cypress-multi-reporters mochawesome

Instale el reporter pasando el comando anterior en la línea de comandos. Ahora, en nuestro cypress.json archivo, agregue la siguiente propiedad.

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

Entenderemos cada una de las propiedades en detalle.

reportero: El nombre del reportero que estamos configurando en nuestro proyecto.

reportDir: El directorio donde vamos a generar nuestros resultados.

exagerar: Esta bandera solicita la sobrescritura de los informes anteriores.

html: Genera el informe sobre la finalización de la prueba.

json: Si se debe generar un archivo JSON al finalizar la prueba.

Reportero de Cypress en el archivo JSON de Cypress

Cypress paquete-lock.json

La Paquete-lock.json El archivo se crea automáticamente para cualquier operación cuando npm modifica los módulos de nodo o el archivo package.json. Cuando agregamos opciones o instalamos nuevas dependencias a nuestro archivo JSON del paquete Cypress, Cypress package-lock.json se actualiza automáticamente.

Paquete de Cypess.lock JSON file rastrea cada paquete y su versión para que las instalaciones se mantengan y actualicen en cada instalación de npm a nivel mundial. Entonces, en nuestro archivo JSON del paquete Cypress, cuando actualizamos la versión o agregamos cualquier dependencia, package-lock.json también se actualiza y no queremos hacerle ninguna alteración.

Archivo Cypress package-lock.json

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