We zullen de JSON-structuur, voorbeelden en gedetailleerde praktische ervaring bespreken om JSON in onze code te schrijven. Maar laten we eerst in ons artikel duiken!

Wat is Cypress Json: voorbeeld, schema, gedetailleerde praktische analyse?

In onze vorige dit artikel, bespraken we variabelen en aliassen en hoe we onze eerste testcase moesten schrijven. Nu zullen we Cypress JSON bespreken en hoe we het in onze code kunnen opnemen.

Inhoudsopgave

• Cypress JSON-bestand
• Standaard JSON-opties
• Wereldwijde opties
• Cypress JSON-time-out
• Cypress Lees JSON-bestand
• Schermafbeelding en video-opties
• Viewport en actiemogelijkheden
• Cypress JSON-voorbeeld
• Cypress Armatuur JSON-array
• Cypress env JSON
• Cypress JSON-reporter
• Cypress pakket-lock.json

Cypress JSON-bestand

Zoals we eerder zagen, creëert het de eerste keer dat we onze Cypress Test Runner openen een cipres.json het dossier. Dit bestand wordt gebruikt om alle configuratiewaarden door te geven die we nodig hebben. Dus eerst zullen we kijken naar de opties die we kunnen doorgeven in onze cypress.json bestand.

Standaard JSON-opties

Bepaalde opties zijn standaard ingesteld in Cypress. We kunnen ze echter aanpassen aan ons project. Om de standaardwaarden te identificeren die zijn ingesteld door Cypress, navigeert u naar de Instellingen map in onze Cypress Test Runner. Vouw vanaf daar de configuratieoptie uit om de standaardopties te bekijken die door Cypress zijn ingesteld.

De opties zijn de standaardconfiguraties die door Cypress worden geleverd.

{
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
}

Opties

We kunnen de standaardopties van Cypress wijzigen door alle argumenten door te geven die compatibel zijn met ons project. Zoals de naam al doet vermoeden, is cypress.json een JSON-bestand, dus we moeten onze argumenten doorgeven in JSON-indeling. In onze VS-code kon je zien dat de cypress.json leeg is zonder dat er argumenten aan zijn doorgegeven. Laten we nu de verschillende opties bekijken die we kunnen doorgeven in ons JSON-bestand.

Wereldwijde opties

We kunnen de globale opties doorgeven aan argumenten die wereldwijd moeten worden benaderd. In de onderstaande tabel vertegenwoordigt de kolom Opties bijvoorbeeld het trefwoord dat we in ons JSON-bestand zullen doorgeven; Standaard geeft de standaardwaarde aan van de specifieke optie die is ingesteld door Cypress, en Beschrijving geeft de betekenis van de optie aan.

Cypress JSON-time-out

Time-out is een van de belangrijkste concepten in elk automatiseringsraamwerk. Cypress biedt een verscheidenheid aan opties die helpen bij het afhandelen van time-outs in onze scripts. Eerst zullen we kijken naar de opties die we kunnen configureren.

Cypress Lees JSON-bestand

Soms moeten we communiceren met de mappen of bestanden in ons project. Om te communiceren, moeten we bepaalde opties instellen in onze cypress.json bestand om de bestanden te manipuleren. Laten we dus eerst eens kijken naar de beschikbare opties in onze configuratie voor mappen/bestanden.

Schermafbeeldingen en video-opties

We kunnen onze snapshots en video's configureren in ons bestand cypress.json() en Cypress biedt ons enkele opties om onze configuratie aan te passen.

Viewport en actiemogelijkheden

U kunt waarden configureren en doorgeven om de hoogte en breedte van de viewport te wijzigen met de opties van Cypress. Actiemogelijkheden kunnen ook worden geconfigureerd.

Cypress JSON-voorbeeld

Eerder zagen we de verschillende configuraties die we kunnen doorgeven in onze cypress.json het dossier. Nu zullen we een voorbeeld bekijken van hoe we ze in ons project kunnen gebruiken.

Standaardwaarden in het bestand cypress.json overschrijven

Open in onze VS-code de cypress.json het dossier. We zullen de . overschrijven defaultCommandTimeout commando om 8000.

{
    "defaultCommandTimeout" : 8000
}

Zo ziet het eruit in ons VS-codeproject.

Door het veranderen van de cypress.json bestand, het is van toepassing op het hele raamwerk. We kunnen dit verifiëren door naar onze Cypress-instellingen te gaan. Het is veranderd van een standaardwaarde van 4000 naar 8000

Standaardwaarden overschrijven via het testscript

We kunnen de standaardwaarden ook manipuleren via ons testscript. In plaats van in de cypress.json bestand, zullen we het doorgeven in ons testbestand.

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

Op deze manier kunnen we de standaardwaarden in ons testbestand overschrijven. Dit heeft echter geen invloed op eventuele configuratiewijzigingen op framework-niveau. Cypress geeft prioriteit aan de waarden in cypress.json. Ten slotte neemt het de globale configuraties over.

Cypress Armatuur JSON-array

Cipres cy.fixture() is een functie die een vaste set gegevens in een bestand laadt. We kunnen de fixture gebruiken als een JSON om waarden of arrays in het JSON-bestand te laden. Laten we eerst eens kijken hoe we toegang kunnen krijgen tot het JSON-bestand in ons project.

Mijn JSON-bestand heeft twee eigenschappen: gebruikersnaam en wachtwoord. Mijn JSON-bestandsnaam is examples.json.

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

In ons specificatiebestand zullen we toegang krijgen tot onze armatuur met de opdracht cy.fixture() en het concept van aliassen.

 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

Omgevingsvariabelen worden in veel projecten in organisaties gebruikt. We gebruiken omgevingsvariabelen

• wanneer waarden dynamisch zijn op verschillende machines
• wanneer we willen testen onder verschillende omgevingen zoals enscenering, testen, ontwikkeling, productie/live

In deze gevallen moeten we omgevingsvariabelen definiëren. Als we echter een env-variabele in één spec-bestand instellen, wordt dit niet weerspiegeld in andere spec-bestanden. Dit komt omdat Cypress elk spec-bestand onafhankelijk uitvoert. Op deze manier moeten we env-variabelen afzonderlijk configureren.

We hebben toegang tot onze omgevingsbestanden vanuit ons Cypress JSON-bestand, dat wil zeggen, cypress.json het dossier. We zullen dus verplicht zijn om de optie toe te wijzen in onze cypress.json bestand en gebruikt het in ons spec-bestand. Laten we dus in ons voorbeeld duiken.

We kunnen onze omgevingsvariabelen instellen in ons configuratiebestand of cypress.env.json bestand.

Omgevingsvariabele instellen in bestand cypress.json

We stellen de env-eigenschap in met een sleutel-waardepaar. Alle waarden doorgegeven onder het trefwoord env vallen onder omgevingsvariabelen, en Cypress neemt het argument van de env trefwoord. De syntaxis ziet er als volgt uit.

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

Als we toegang willen tot de env variabele in ons specificatiebestand, wijzen we ze toe zoals hieronder vermeld.

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

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

We zullen de . toevoegen env configuratie in ons project en zal ze openen in ons specificatiebestand. In onze cypress.json bestand, voeg dan de volgende configuratie toe. We zetten onze URL eigendom en deze toe te wijzen aan onze URL. Hier, URL is de sleutel, en https://techiescience.com/technology/ is de waarde.

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

Omdat we de configuratie hebben gedeclareerd, zullen we ze openen in ons specificatiebestand. Het ziet er ongeveer uit als hieronder. Zoals hierboven vermeld, zullen we gebruiken Cypress.env() methode om toegang te krijgen tot de env-variabele.

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

    })
})

Omgevingsvariabele instellen in bestand cypress.env.json

We kunnen onze omgevingsvariabele toewijzen in ons cipres env JSON-bestand. Daarvoor moeten we een nieuw bestand maken met de naam cypress.env.json aan de basis van het project. We zullen de niet nodig hebben env trefwoord; in plaats daarvan hebben we er rechtstreeks toegang toe door het sleutel-waardepaar door te geven.

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

Laten we eens kijken hoe we ze kunnen toewijzen in onze cypress.env.json bestand.

{
    "url" : "https://techiescience.com/",
    "urlTechnology" : "https://techiescience.com/technology/"
}

Zoals je hierboven ziet, hebben we een nieuw bestand gemaakt, cypress.env.json, en onze . toegevoegd URL eigenschappen. De manier om toegang te krijgen tot de omgevingsvariabelen zou dezelfde zijn als hierboven vermeld in de vorige sectie.

Cypress JSON-reporter

Zoals we weten, is Cypress bovenop Mocha gebouwd; alle verslaggevers die voor Mocha zijn gebouwd, kunnen worden gebruikt. We kunnen de reporter in ons JSON-bestand globaal configureren in onze cypress.json bestand.

De hierboven genoemde opties zijn de configuraties die standaard in reporter zijn ingesteld. tevens de spec reporter is standaard ingesteld. In de reporter kunnen we dus elke reporter instellen die compatibel is met Mocha. reporterOptions is om de ondersteunde opties op te geven, afhankelijk van de reporter die we configureren.

Laten we eens kijken hoe we de reporter kunnen configureren in onze cypress.json bestand.

Laten we de multi-reporter mochawesome als onze reporter beschouwen. We zullen eerst de reporter installeren en toevoegen aan onze cypress.json bestand.

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

Installeer de reporter door de bovenstaande opdracht in de opdrachtregel door te geven. Nu, in onze cypress.json bestand, voeg dan de volgende eigenschap toe.

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

We zullen elk van de eigenschappen in detail begrijpen.

verslaggever: De naam van de reporter die we in ons project configureren

rapportDir: De map waar we onze resultaten gaan uitvoeren.

beschrijven: Deze vlag vraagt ​​om het overschrijven van de vorige rapporten.

html: genereert het rapport over de voltooiing van de test.

json: of een JSON-bestand moet worden gegenereerd bij het voltooien van de test.

Cypress pakket-lock.json

De pakket-lock.json bestand wordt automatisch gemaakt voor alle bewerkingen wanneer npm de knooppuntmodules of het bestand package.json wijzigt. Wanneer we opties toevoegen of installeer nieuwe afhankelijkheden van onze Cypress package JSON-bestand, dan wordt Cypress package-lock.json automatisch bijgewerkt.

Cypess-pakket.vergrendeling JSON bestand traceert elk pakket en zijn versie, zodat de installaties worden onderhouden en bijgewerkt bij elke npm-installatie wereldwijd. Dus in ons Cypress-pakket JSON-bestand, wanneer we de versie bijwerken of een afhankelijkheid toevoegen, wordt package-lock.json ook bijgewerkt en we willen er geen wijzigingen in aanbrengen.

Aishwarya Lakshmi

Hallo...Ik ben Aishwarya Lakshmi, heb mijn B.Tech afgerond en heb bijna 2+ jaar ervaring in het testdomein. Ik ben een testliefhebber en gepassioneerd door testen. Ik ontdek graag nieuwe dingen in mijn vakgebied en deel deze met mijn collega's. Ik geniet ervan om in mijn vrije tijd blogs te schrijven op de eenvoudigste maar effectieve manier. Als tester houd ik ervan om dingen tot in de perfectie te hebben, dus ik wens dat mijn lezers de technologie perfect begrijpen. Ik houd mezelf op de hoogte van de nieuwe technologieën met betrekking tot testen en besteed tijd aan het begrijpen ervan. Ik help studenten graag de concepten bij het testen te begrijpen.