Cos'è Cypress Json: 11 fatti che dovresti sapere


Discuteremo la struttura JSON, gli esempi e l'esperienza pratica dettagliata per scrivere JSON nel nostro codice. Ma, prima, tuffiamoci nel nostro articolo!

Che cos'è Cypress Json: esempio, schema, analisi pratica dettagliata

Nel nostro precedente articolo, abbiamo discusso di variabili e alias e di come scrivere il nostro primo caso di test. Ora parleremo di Cypress JSON e di come incorporarlo nel nostro codice.

cipresso json

Sommario

File JSON di Cypress

Come abbiamo visto in precedenza, la prima volta che apriamo il nostro Cypress Test Runner, viene creato un cipresso.json file. Questo file viene utilizzato per passare tutti i valori di configurazione richiesti. Quindi, per prima cosa, esamineremo le opzioni che possiamo passare nel nostro cypress.json file.

Opzioni JSON predefinite

Alcune opzioni sono impostate di default in Cypress. Tuttavia, possiamo personalizzarli secondo il nostro progetto. Per identificare i valori predefiniti impostati da Cypress, accedere a Impostazioni profilo cartella nel nostro Cypress Test Runner. Da lì, espandi l'opzione Configurazione per visualizzare le opzioni predefinite impostate da Cypress.

File JSON di Cypress

Le opzioni sono le configurazioni predefinite fornite da 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
}

Opzioni

Possiamo modificare le opzioni predefinite di Cypress passando qualsiasi argomento compatibile con il nostro progetto. Come suggerisce il nome, cypress.json è un file JSON, quindi dobbiamo passare i nostri argomenti in formato JSON. Nel nostro codice VS, puoi vedere che cypress.json è vuoto senza che gli vengano passati argomenti. Ora vediamo le diverse opzioni che possiamo passare nel nostro file JSON.

Opzioni globali

Possiamo passare le opzioni globali agli argomenti a cui è necessario accedere a livello globale. Ad esempio, nella tabella seguente, la colonna Opzioni rappresenta la parola chiave che passeremo nel nostro file JSON; Predefinito indica il valore predefinito della particolare opzione impostata da Cypress e Descrizione indica il significato dell'opzione.

OptionPredefinitoDESCRIZIONE
baseUrlnullPossiamo impostare l'URL globalmente invece di passare in ogni file. Può essere usato per cy.visit() or cy.request() comandi
clientCertificates[]È possibile utilizzare questa opzione per configurare i certificati client in base all'URL
env{}Puoi passare qualsiasi variabile di ambiente come valore. Questa opzione sarà utile se stiamo testando la nostra applicazione in ambienti diversi come staging o produzione.
watchForFileChangestrueQuesta opzione controlla se Cypress controlla e riavvia i test su eventuali modifiche ai file.
portnullPossiamo passare il numero di porta sull'hosting di Cypress. Viene generata una porta casuale, ma possiamo aggiungere il numero di porta richiesto.
numTestsKeptInMemory50Questa opzione è il numero di istantanee di prova e dati dei comandi archiviati in memoria. Se c'è un elevato consumo di memoria nel browser durante un'esecuzione di test, possiamo ridurne il numero.
retries{ "runMode": 0, "openMode": 0 }Questa opzione serve a specificare il numero di volte in cui riprovare un test che non riesce. Possiamo configurarlo separatamente per corsa di cipressi e cipresso aperto.
redirectionLimit20Possiamo configurare il limite per il numero di volte in cui l'applicazione può essere reindirizzata prima che si verifichi un errore.
includeShadowDomfalseLa possibilità di navigare all'interno dello Shadow DOM per interagire con gli elementi. Per impostazione predefinita, è impostato su false. Se la nostra applicazione ha qualche elemento che richiede la navigazione root shadow, puoi impostarlo su true.

Timeout JSON di Cypress

Il timeout è uno dei concetti più importanti in qualsiasi framework di automazione. Cypress offre una varietà di opzioni che aiutano a gestire i timeout nei nostri script. Per prima cosa, esamineremo le opzioni che possiamo configurare.

OptionPredefinitoDESCRIZIONE
defaultCommandTimeout4000Questa opzione è di attendere il caricamento dei comandi basati su DOM Elements. Questo è in millisecondi.
requestTimeout5000Tempo, in millisecondi, di attesa fino al timeout della richiesta del comando cy.wait().
responseTimeout30000Questo timeout è quello di attendere una risposta in una serie di comandi come  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies()cy.screenshot() comandi
taskTimeout60000Timeout, in millisecondi, per il completamento dell'esecuzione di cy.task() command
execTimeout60000Questa volta in millisecondi è di attendere per completare l'esecuzione del cy.exec() comando,
che è il completamento del comando di sistema
pageLoadTimeout60000Questo timeout aspetta page navigation events o comandi che interagiscono
con le pagine like cy.visit()cy.go()cy.reload()

Cypress Leggi file JSON

A volte, sarà necessario interagire con le cartelle oi file nel nostro progetto. Per interagire, dobbiamo impostare alcune opzioni nel nostro cypress.json file per manipolare i file. Quindi, per prima cosa, esaminiamo le opzioni disponibili nella nostra configurazione di cartelle/file.

OptionPredefinitoDESCRIZIONE
downloadsFoldercypress/downloadsQuesto è il percorso in cui i file vengono scaricati e archiviati durante un'esecuzione di prova
fixturesFoldercypress/fixturesQuesto è il percorso della cartella che contiene i file delle apparecchiature. possiamo passare false per disabilitare la memorizzazione dei file.
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files.
integrationFoldercypress/integrationI file di test di integrazione sono archiviati in questo percorso della cartella.
pluginsFilecypress/plugins/index.jsQuesto percorso è dove sono archiviati i plugin. Puoi passare l'argomento come false per disabilitare questa configurazione.
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing false
testFiles**/*.*Percorso dei file di test che devono essere caricati. È una stringa o una matrice di modelli globali.
videosFoldercypress/videosPercorso della cartella che memorizzerà i video durante l'esecuzione del test

Screenshot e opzioni video

Possiamo configurare le nostre istantanee e video nel nostro file cypress.json() e Cypress ci fornisce alcune opzioni per personalizzare la nostra configurazione.

OptionPredefinitoDESCRIZIONE
screenshotOnRunFailuretrueOpzione per impostare su true o false se Cypress acquisisce uno screenshot durante il fallimento del test quando Cypress è in esecuzione. È impostato su true per impostazione predefinita,
trashAssetsBeforeRunstrueQuesta opzione è quella di cestinare le risorse nel videosFolder, downloadsFolder e screenshotsFolder prima di ogni cypress run
videoCompression32Questa opzione è la qualità della compressione video misurata in Constant Rate Factor (CRF). passando false, puoi anche disabilitare questa opzione. È possibile passare valori da 0 a 51, dove il valore più basso fornisce una qualità migliore.
videosFoldercypress/videosLa cartella in cui è salvato il video dei test.
videotrueValore booleano con cui catturare il video dell'esecuzione del test cypress run.
videoUploadOnPassestrueQuesta opzione consente di caricare i video nella Dashboard quando tutti i casi di test in un file di specifiche vengono superati.

Viewport e azionabilità

È possibile configurare e passare valori per modificare l'altezza e la larghezza della finestra con le opzioni fornite da Cypress. È inoltre possibile configurare le opzioni di azione.

OptionPredefinitoDESCRIZIONE
viewportHeight660Questo serve a fornire l'altezza predefinita per l'applicazione in pixel. Possiamo sovrascrivere questo comando con cy.viewport()
viewportWidth1000Opzione per la larghezza della finestra in pixel per l'applicazione. Può essere sovrascritto con cy.viewport() comando.
animationDistanceThreshold5Il valore di soglia per la distanza misurata in pixel dove un elemento deve superare considerando il tempo per l'animazione.
waitForAnimationstruePossibilità di attendere che gli elementi completino l'animazione prima di eseguire qualsiasi comando.
scrollBehaviortopQuesta è un'opzione della finestra che deve scorrere fino a un elemento appena prima di eseguire qualsiasi comando. Le opzioni disponibili sono 'center''top''bottom''nearest', o false, In cui false disabilita lo scorrimento.

Esempio JSON Cypresspress

In precedenza, abbiamo visto le diverse configurazioni che possiamo passare nel nostro cypress.json file. Ora esamineremo un esempio di come usarli nel nostro progetto.

Sovrascrivere i valori predefiniti nel file cypress.json

Nel nostro codice VS, apri il cypress.json file. Sovrascriveremo il defaultCommandTimeout comando a 8000.

{
    "defaultCommandTimeout" : 8000
}

Ecco come appare nel nostro progetto di codice VS.

file cypress.json

Modificando il cypress.json file, si applica all'intero framework. Possiamo verificare navigando nelle nostre impostazioni di Cypress. È cambiato da un valore predefinito di 4000 a 8000

Valori di default delle impostazioni di Cypress

Sovrascrivere i valori predefiniti tramite lo script di test

Possiamo manipolare i valori predefiniti anche tramite il nostro script di test. Invece di passare in cypress.json file, lo passeremo nel nostro file di prova.


//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()

In questo modo, possiamo sovrascrivere i valori predefiniti nel nostro file di test. Tuttavia, ciò non influisce sulle modifiche alla configurazione a livello di framework. Cypress dà priorità ai valori in cypress.json. Infine, riprende le configurazioni globali.

Array JSON di Cypress Fixture

Cipresso cy.fixture() è una funzione che carica un insieme fisso di dati in un file. Possiamo usare il dispositivo come JSON per caricare qualsiasi valore o array nel file JSON. Innanzitutto, capiamo come accedere al file JSON nel nostro progetto.

Il mio file JSON ha due proprietà: nome utente e password. Il nome del mio file JSON è examples.json.

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

Nel nostro file delle specifiche, accederemo al nostro dispositivo con il comando cy.fixture() e il concetto di 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

Le variabili di ambiente vengono utilizzate in molti progetti nelle organizzazioni. Usiamo le variabili d'ambiente

  • quando i valori sono dinamici tra macchine diverse
  • quando vogliamo testare in ambienti diversi come staging, testing, development, production/live

Questi casi richiedono la definizione di variabili di ambiente. Tuttavia, se impostiamo una variabile env in un file spec, non si riflette negli altri file spec. Questo perché Cypress esegue ogni file delle specifiche in modo indipendente. In questo modo, avremo bisogno di configurare le variabili env separatamente.

Accediamo ai nostri file di ambiente dal nostro file JSON Cypress, ad es. cypress.json file. Quindi ci verrà richiesto di assegnare l'opzione nel nostro cypress.json file e l'abbiamo usato nel nostro file spec. Allora tuffiamoci nel nostro esempio.

Possiamo impostare le nostre variabili d'ambiente nel nostro file di configurazione o cypress.env.json file.

Impostazione della variabile di ambiente nel file cypress.json

Impostiamo la proprietà env con una coppia chiave-valore. Qualsiasi valore passato sotto la parola chiave env rientrano nelle variabili d'ambiente e Cypress prende l'argomento dal env parola chiave. La sintassi è simile alla seguente.

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

Se vogliamo accedere al env variabile nel nostro file spec, li assegniamo come indicato di seguito.

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

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

Aggiungeremo il env configurazione nel nostro progetto e accederà a loro nel nostro file spec. Nel nostro cypress.json file, aggiungere la seguente configurazione. Stiamo impostando il nostro URL proprietà e assegnandoli al nostro URL. Qui, URL è la chiave, e https://lambdageeks.com/technology/ è il valore.

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

Poiché abbiamo dichiarato la configurazione, accederemo ad esse nel nostro file delle specifiche. Sembra qualcosa di simile sotto. Come accennato in precedenza, useremo Cypress.env() metodo per accedere alla variabile 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'));

    })
})

Impostazione della variabile di ambiente nel file cypress.env.json

Possiamo assegnare la nostra variabile di ambiente nel nostro file JSON cypress env. Per questo, dovremmo creare un nuovo file chiamato cypress.env.json alla radice del progetto. Non richiederemo il env parola chiave; invece, possiamo accedervi direttamente passando la coppia chiave-valore.

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

Vediamo come assegnarli nel nostro cypress.env.json file.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
Creazione del file cypress.env.json

Come vedi sopra, abbiamo creato un nuovo file, cypress.env.json, e ha aggiunto il nostro URL proprietà. Il modo di accedere alle variabili di ambiente sarebbe lo stesso menzionato sopra nella sezione precedente.

Reporter JSON di Cypress

Come sappiamo, Cypress è costruito sopra Mocha; qualsiasi reporter creato per Mocha può essere utilizzato. Possiamo configurare reporter nel nostro file JSON a livello globale nel nostro cypress.json file.

reporterspecQui puoi specificare il reporter che dovrebbe generare durante la corsa dei cipressi. È impostato su spec come giornalista predefinito.
reporterOptionsnullQuesto serve a specificare le opzioni supportate per il reporter.

Le opzioni sopra menzionate sono le configurazioni impostate in reporter per impostazione predefinita. Inoltre, il spec reporter è impostato per impostazione predefinita. Pertanto, nel reporter, possiamo impostare qualsiasi reporter compatibile con Mocha. reporterOptions è specificare le opzioni supportate a seconda del reporter che stiamo configurando.

Vediamo come configurare il reporter nel nostro cypress.json file.

Consideriamo il multi reporter mochawesome come il nostro reporter. Per prima cosa installeremo il reporter e lo aggiungeremo al nostro cypress.json file.

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

Installa il reporter passando il comando sopra nella riga di comando. Ora, nel nostro cypress.json file, aggiungere la seguente proprietà.

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

Capiremo ciascuna delle proprietà in dettaglio.

reporter: Il nome del giornalista che stiamo configurando nel nostro progetto

rapporto Dir: La directory in cui andremo a produrre i nostri risultati.

sovrascrivere: Questo flag chiede di sovrascrivere i rapporti precedenti.

html: Genera il report sul completamento del test.

json: se generare un file JSON al completamento del test.

Reporter di cipresso nel file JSON di cipresso

Pacchetto Cypress-lock.json

 Pacchetto-lock.json viene creato automaticamente per qualsiasi operazione quando npm modifica i moduli del nodo o il file package.json. Quando aggiungiamo qualsiasi opzione o installa eventuali nuove dipendenze sul nostro Cypress pacchetto JSON, quindi Cypress package-lock.json viene aggiornato automaticamente.

Pacchetto Cypess.lock JSON file traccia ogni pacchetto e la sua versione in modo che le installazioni vengano mantenute e aggiornate a ogni installazione di npm a livello globale. Quindi, nel nostro file JSON del pacchetto Cypress, quando aggiorniamo la versione o aggiungiamo qualsiasi dipendenza, anche package-lock.json viene aggiornato e non vogliamo apportare alcuna alterazione.

File Cypress package-lock.json

Aishwarya Lakshmi

Sono un appassionato di test e ho quasi 2 anni di esperienza nel campo dei test. Sono appassionato di test e amo esplorare nuove cose nel mio campo e condividerle con i miei colleghi. Mi piace scrivere blog durante il mio tempo libero nel modo più semplice ma efficace. Come tester, mi piace avere le cose alla perfezione, quindi auguro ai miei lettori di avere la perfetta comprensione della tecnologia. Mi tengo aggiornato con le nuove tecnologie relative ai test e passo il tempo a capirle. Sono lieto di aiutare gli studenti a comprendere i concetti durante i test. Connettiamoci tramite LinkedIn - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

Post Recenti