Hvad er Cypress Json: 11 fakta, du bør vide

Vi vil diskutere JSON-strukturen, eksempler og detaljerede praktiske erfaringer med at skrive JSON i vores kode. Men lad os først dykke ned i vores artikel!

Hvad er Cypress Json: Eksempel, skema, detaljeret praktisk analyse

I vores tidligere artikel, diskuterede vi variabler og aliasser, og hvordan vi skrev vores første testcase. Nu vil vi diskutere Cypress JSON og hvordan man inkorporerer det i vores kode.

cypress json

Indholdsfortegnelse

Cypress JSON -fil

Som vi så tidligere, skaber det en første gang, vi åbner vores Cypress Test Runner cypress.json fil. Denne fil bruges til at videregive alle konfigurationsværdier, vi har brug for. Så først vil vi undersøge de muligheder, vi kan passere i vores cypress.json fil.

Standard JSON -indstillinger

Visse muligheder er som standard angivet i Cypress. Vi kan dog tilpasse dem i henhold til vores projekt. For at identificere de standardværdier, der er angivet af Cypress, skal du navigere til Indstillinger mappe i vores Cypress Test Runner. Udvid derfra konfigurationsindstillingen for at se standardindstillingerne, der er angivet af Cypress.

konfigurationsindstillinger
Cypress JSON -fil

Mulighederne er standardkonfigurationerne fra 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
}

Indstillinger

Vi kan ændre standardindstillingerne for Cypress ved at videregive alle argumenter, der er kompatible med vores projekt. Som navnet antyder, er cypress.json en JSON -fil, så vi skal videregive vores argumenter i JSON -format. I vores VS -kode kunne du se, at cypress.json er tom, uden at der blev givet argumenter til den. Lad os nu se de forskellige muligheder, som vi kan videregive i vores JSON -fil.

Globale optioner

Vi kan overføre de globale muligheder til argumenter, der skal tilgås globalt. I tabellen herunder repræsenterer kolonnen Indstillinger f.eks. Det søgeord, vi vil sende i vores JSON -fil; Standard angiver standardværdien for den særlige indstilling, der er angivet af Cypress, og Beskrivelse angiver indstillingens betydning.

OptionStandardBeskrivelse
baseUrlnullVi kan angive webadressen globalt i stedet for at videregive hver fil. Det kan bruges til cy.visit() or cy.request() kommandoer
clientCertificates[]Du kan bruge denne mulighed til at konfigurere klientcertifikater på en URL -basis
env{}Du kan videregive alle miljøvariabler som en værdi. Denne mulighed vil være nyttig, hvis vi tester vores applikation i forskellige miljøer som iscenesættelse eller produktion.
watchForFileChangestrueDenne indstilling kontrollerer, om Cypress ser og genstarter test på eventuelle filændringer.
portnullVi kan passere portnummeret på hosting af Cypress. En tilfældig port genereres, men vi kan tilføje det portnummer, vi har brug for.
numTestsKeptInMemory50Denne indstilling er antallet af test snapshots og kommandodata, der er gemt i hukommelsen. Hvis der er et højt hukommelsesforbrug i browseren under en testkørsel, kan vi reducere antallet.
retries{ "runMode": 0, "openMode": 0 }Denne indstilling er at angive antallet af gange for at prøve en test, der mislykkes igen. Vi kan konfigurere det separat for cypress løb , cypress åben.
redirectionLimit20Vi kan konfigurere grænsen for det antal gange, applikationen kan omdirigeres, før der opstår en fejl.
includeShadowDomfalseEvnen til at navigere inde i Shadow DOM for at interagere med elementer. Som standard er den indstillet til falsk. Hvis vores applikation har et element, der kræver skyggerodnavigation, kan du indstille det til true.

Cypress JSON Timeout

Timeout er et af de vigtigste begreber i enhver automatiseringsramme. Cypress giver en række muligheder, der hjælper med at håndtere timeouts i vores scripts. Først vil vi undersøge de muligheder, vi kan konfigurere.

OptionStandardBeskrivelse
defaultCommandTimeout4000Denne mulighed er at vente på, at de DOM Elements-baserede kommandoer indlæses. Dette er i millisekunder.
requestTimeout5000Tid, i millisekunder, til at vente til anmodningen fra cy.wait () kommandoen for at gå timeout.
responseTimeout30000Denne timeout er at vente, indtil et svar i en række kommandoer som f.eks  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies()og cy.screenshot() kommandoer
taskTimeout60000Timeout, i millisekunder, for færdiggørelsen for udførelsen af cy.task() kommando
execTimeout60000Denne gang i millisekunder er at vente med at afslutte udførelsen af cy.exec() kommando,
som er fuldførelsen af ​​systemkommandoen
pageLoadTimeout60000Denne timeout venter page navigation events eller kommandoer, der interagerer
med siderne som cy.visit()cy.go()cy.reload()

Cypress Læs JSON -fil

Nogle gange skal vi interagere med mapperne eller filerne i vores projekt. For at interagere skal vi angive bestemte muligheder i vores cypress.json fil for at manipulere filerne. Så lad os først undersøge de tilgængelige muligheder i vores mapper/ filkonfiguration.

OptionStandardBeskrivelse
downloadsFoldercypress/downloadsDette er stien, hvor filerne downloades og gemmes under en testkørsel
fixturesFoldercypress/fixturesDette er stien til den mappe, der indeholder fixturfilerne. Vi kan passere false for at deaktivere lagring af filerne.
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/integrationIntegrationstestfiler gemmes i denne sti til mappen.
pluginsFilecypress/plugins/index.jsDenne sti er, hvor plugins gemmes. Du kan videregive argumentet som falsk for at deaktivere denne konfiguration.
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**/*.*Sti til testfilerne, der skal indlæses. Det er enten en streng eller række globale mønstre.
videosFoldercypress/videosMappesti, der gemmer videoer under testkørsel

Skærmbilleder og videoindstillinger

Vi kan konfigurere vores snapshots og videoer i vores cypress.json () -fil, og Cypress giver os nogle muligheder for at tilpasse vores konfiguration.

OptionStandardBeskrivelse
screenshotOnRunFailuretrueMulighed for at indstille til enten sandt eller falsk, om Cypress tager et skærmbillede under testfejl, når cypress kører. Det er indstillet til true som standard
trashAssetsBeforeRunstrueDenne mulighed er at gemme aktiver i videosFolder, downloadsFolder , screenshotsFolder før hver cypress run
videoCompression32Denne mulighed er kvaliteten af ​​videokomprimering målt i Constant Rate Factor (CRF). Ved at passere false, kan du også deaktivere denne mulighed. Du kan videregive værdier fra 0 til 51, hvor den laveste værdi giver bedre kvalitet.
videosFoldercypress/videosMappen, hvor videoen af ​​testene er gemt.
videotrueBoolsk værdi til at optage videoen af ​​testudførelsen med cypress run.
videoUploadOnPassestrueDenne mulighed er at uploade videoerne til instrumentbrættet, når alle testcases i en spec -fil passerer.

Udsigtsport og handlekraft

Du kan konfigurere og videregive værdier til at ændre visningshøjden og -bredden med de muligheder, Cypress tilbyder. Handlingsmuligheder kan også konfigureres.

OptionStandardBeskrivelse
viewportHeight660Dette er for at angive standardhøjden for applikationen i pixels. Vi kan tilsidesætte denne kommando med cy.viewport()
viewportWidth1000Mulighed for visningsportens bredde i pixels for applikationen. Kan tilsidesættes med cy.viewport() kommando.
animationDistanceThreshold5Tærskelværdien for afstanden målt i pixels, hvor et element skal overstige i betragtning af animationstiden.
waitForAnimationstrueMulighed for at vente på, at elementerne fuldender animationen, før der udføres kommandoer.
scrollBehaviortopDette er en viewport -indstilling, der skal rulle til et element, lige før der udføres kommandoer. Tilgængelige muligheder er 'center''top''bottom''nearest' eller  false, Hvori false deaktiverer rulning.

Eksempel på Cypress JSON

Tidligere så vi de forskellige konfigurationer, vi kan passere i vores cypress.json fil. Nu vil vi se på et eksempel på, hvordan man bruger dem i vores projekt.

Tilsidesættelse af standardværdier i filen cypress.json

I vores VS -kode skal du åbne cypress.json fil. Vi vil tilsidesætte defaultCommandTimeout kommandoen til 8000.

{
    "defaultCommandTimeout" : 8000
}

Sådan ser det ud i vores VS -kodeprojekt.

standard timeout
fil cypress.json

Ved at ændre cypress.json fil, gælder det for hele rammen. Vi kan verificere ved at navigere til vores Cypress -indstillinger. Det er ændret fra en standardværdi på 4000 til 8000

indstillinger cypres
Cypress -indstillinger standardværdier

Tilsidesættelse af standardværdier via testscriptet

Vi kan også manipulere standardværdierne via vores test script. I stedet for at passere i cypress.json fil, sender vi den i vores testfil.


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

På denne måde kan vi tilsidesætte standardværdier i vores testfil. Dette påvirker imidlertid ikke nogen konfigurationsændringer på rammeniveau. Cypress prioriterer værdierne i cypress.json. Endelig optager det de globale konfigurationer.

Cypress Fixture JSON Array

Cypress cy.fixture() er en funktion, der indlæser et fast sæt data i en fil. Vi kan bruge armaturet som en JSON til at indlæse alle værdier eller array i JSON -filen. Lad os først forstå, hvordan du får adgang til JSON -filen i vores projekt.

Min JSON -fil har to egenskaber: brugernavn og adgangskode. Mit JSON filnavn er examples.json.

{
"email": "[email protected]",
"password" : test123
}

I vores spec -fil får vi adgang til vores armatur med kommandoen cy.fixture () og konceptet aliasser.

 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

Miljøvariabler bruges på tværs af mange projekter i organisationer. Vi bruger miljøvariabler

  • når værdier er dynamiske på tværs af forskellige maskiner
  • når vi vil teste under forskellige miljøer som iscenesættelse, test, udvikling, produktion/live

Disse tilfælde kræver, at vi definerer miljøvariabler. Men hvis vi angiver en env -variabel i en spec -fil, afspejles den ikke på tværs af andre spec -filer. Dette skyldes, at Cypress kører hver spec -fil uafhængigt. På denne måde bliver vi nødt til at konfigurere env -variabler separat.

Vi får adgang til vores miljøfiler fra vores Cypress JSON -fil, dvs. cypress.json fil. Så vi bliver forpligtet til at tildele indstillingen i vores cypress.json fil og brugte den på tværs af vores spec -fil. Så lad os dykke ned i vores eksempel.

Vi kan indstille vores miljøvariabler i vores konfigurationsfil eller cypress.env.json fil.

Indstilling af miljøvariabel i cypress.json -filen

Vi indstiller env-ejendommen med et nøgleværdipar. Eventuelle værdier passeret under søgeordet env falder ind under miljøvariabler, og Cypress tager argumentet fra env nøgleord. Syntaksen ligner nedenstående.

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

Hvis vi vil have adgang til env variabel i vores spec -fil, tildeler vi dem som nævnt nedenfor.

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

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

Vi tilføjer env konfiguration i vores projekt og får adgang til dem i vores spec -fil. I vores cypress.json fil, tilføj følgende konfiguration. Vi sætter vores URL ejendom og tildele dem til vores URL. Her, URL er nøglen, og https://lambdageeks.com/technology/ er værdien.

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

Da vi har erklæret konfigurationen, får vi adgang til dem i vores spec -fil. Det ligner noget herunder. Som nævnt ovenfor vil vi bruge Cypress.env() metode til at få adgang til env -variablen.

// 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'));

    })
})

Indstilling af miljøvariabel i cypress.env.json -filen

Vi kan tildele vores miljøvariabel i vores cypress env JSON -fil. Til det skulle vi oprette en ny fil kaldet cypress.env.json ved roden af ​​projektet. Vi vil ikke kræve env søgeord; i stedet kan vi få direkte adgang til dem ved at passere nøgleværdi-parret.

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

Lad os undersøge, hvordan vi tildeler dem i vores cypress.env.json fil.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
url cypres
Oprettelse af cypress.env.json -fil

Som du ser ovenfor, har vi oprettet en ny fil, cypress.env.json, og tilføjede vores URL ejendomme. Måden at få adgang til miljøvariablerne ville være den samme som nævnt ovenfor i det foregående afsnit.

Cypress JSON Reporter

Som vi ved, er Cypress bygget oven på Mocha; alle journalister, der er bygget til Mokka, kan bruges. Vi kan konfigurere reporter i vores JSON -fil globalt i vores cypress.json fil.

reporterspecHer kan du angive den reporter, der skal genereres under cypressen. Det er indstillet til spec som standardreporter.
reporterOptionsnullDette er for at angive de understøttede muligheder for reporteren.

De ovennævnte muligheder er de konfigurationer, der er angivet i reporter som standard. Desuden er spec reporter er som standard indstillet. I reporteren kan vi således indstille enhver reporter, der er kompatibel med Mokka. reporterOptions er at angive de understøttede muligheder afhængigt af den reporter, vi konfigurerer.

Lad os se, hvordan du konfigurerer reporteren i vores cypress.json fil.

Lad os betragte multi reporter mochawesome som vores reporter. Vi installerer først reporteren og tilføjer dem til vores cypress.json fil.

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

Installer reporteren ved at sende ovenstående kommando i kommandolinjen. Nu i vores cypress.json fil, tilføj følgende egenskab.

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

Vi vil forstå hver af ejendommene i detaljer.

reporter: Navnet på den reporter, som vi konfigurerer i vores projekt

rapportDir: Mappen, hvor vi skal sende vores resultater.

overskrivning: Dette flag beder om at overskrive de tidligere rapporter.

html: Genererer rapporten om afslutningen af ​​testen.

json: Om der skal genereres en JSON -fil ved testafslutning.

fil cypress.json
Cypress -reporter i cypress -JSON -filen

Cypress package-lock.json

 package-lock.json fil oprettes automatisk til enhver handling, når npm ændrer nodemodulerne eller filen package.json. Når vi tilføjer nogen muligheder eller installere eventuelle nye afhængigheder til vores Cypress pakke JSON-fil, så bliver Cypress package-lock.json opdateret automatisk.

Cypess -pakke. Lås JSON fil sporer hver pakke og dens version, så installationerne vedligeholdes og opdateres på hver npm -installation globalt. Så i vores Cypress-pakke-JSON-fil, når vi opdaterer versionen eller tilføjer afhængighed, bliver package-lock.json også opdateret, og vi ønsker ikke at foretage ændringer af den.

pakkelås json cypress
Cypress package-lock.json-fil