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

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.

Índice del contenido

• Archivo JSON Cypress
• Opciones JSON predeterminadas
• Opciones Globales
• Tiempo de espera de Cypress JSON
• Archivo JSON de lectura de Cypress
• Opciones de captura de pantalla y video
• Viewport y accionabilidad
• Ejemplo de Cypress JSON
• Matriz JSON de accesorio Cypress
• entorno de ciprés JSON
• Reportero de Cypress JSON
• Cypress paquete-lock.json

Archivo JSON Cypress

Como vimos anteriormente, la primera vez que abrimos nuestro Cypress Test Runner, crea un ciprés.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.

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
}

Opciones

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.

Tiempo de espera de Cypress JSON

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.

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.

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.

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.

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.

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

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.

Matriz JSON de accesorio Cypress

Cypress 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": "[email protected]",
"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)
          }       

entorno de ciprés 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://techiescience.com/technology/ es el valor.

{
  "env" : {
      "url" : "https://techiescience.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://techiescience.com/",
    "urlTechnology" : "https://techiescience.com/technology/"
}

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.

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.

molécula indicadora: El nombre del reportero que estamos configurando en nuestro proyecto.

informeDir: 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.

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 cualquier opción o instale cualquier nueva dependencia en nuestro Cypress paquete JSON, luego 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.

Aishwarya Lakshmi

Hola... Soy Aishwarya Lakshmi, completé mi B.Tech y tengo casi más de 2 años de experiencia en el ámbito de las pruebas. Soy un entusiasta de las pruebas y un apasionado de 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 eso 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.