Megvitatjuk a JSON-struktúrát, a példákat és a részletes gyakorlati tapasztalatokat a JSON kódba írásához. De először merüljünk el cikkünkben!

Mi az a Cypress Json: példa, séma, részletes gyakorlati elemzés

Előzőnkben cikk, megbeszéltük a változókat és az álneveket, valamint az első teszteset megírását. Most megvitatjuk a Cypress JSON-t, és azt, hogyan építhetjük be a kódunkba.

Tartalomjegyzék

• Cypress JSON fájl
• Alapértelmezett JSON-beállítások
• Globális opciók
• Cypress JSON időtúllépés
• Cypress Read JSON fájl
• Képernyőkép és videó opciók
• Nézetablaka és cselekvési képesség
• Cypress JSON példa
• Ciprus lámpatest json tömb
• Cypress env JSON
• Cypress JSON Reporter
• Cypress csomag-lock.json

Cypress JSON fájl

Ahogy korábban láttuk, amikor először nyitjuk meg Cypress Test Runnerünket, létrehoz egy ciprus.json fájlt. Ez a fájl a szükséges konfigurációs értékek átadására szolgál. Tehát először megvizsgáljuk azokat a lehetőségeket, amelyeket át tudunk adni cypress.json fájlt.

Alapértelmezett JSON-beállítások

Bizonyos beállítások alapértelmezés szerint be vannak állítva a Cypressben. Ezeket azonban a projektünknek megfelelően testre szabhatjuk. A Cypress által beállított alapértelmezett értékek azonosításához navigáljon a beállítások mappát a Cypress Test Runnerben. Innen bontsa ki a Konfiguráció lehetőséget a Cypress által beállított alapértelmezett beállítások megtekintéséhez.

Az opciók a Cypress által biztosított alapértelmezett konfigurációk.

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

Opciók

A Cypress alapértelmezett beállításait megváltoztathatjuk a projektünkkel kompatibilis argumentumok átadásával. Ahogy a neve is sugallja, a cypress.json egy JSON-fájl, ezért az argumentumokat JSON-formátumban kell átadnunk. A VS-kódunkban láthatta, hogy a cypress.json üres, és nincs átadva neki argumentum. Most lássuk a különböző lehetőségeket, amelyeket átadhatunk a JSON-fájlunkban.

Globális opciók

A globális opciókat átadhatjuk olyan argumentumoknak, amelyeket globálisan kell elérni. Például az alábbi táblázatban a Beállítások oszlop azt a kulcsszót jelöli, amelyet a JSON-fájlunkban fogunk átadni; Az alapértelmezett az adott opció Cypress által beállított alapértelmezett értékét jelöli, a Leírás pedig az opció jelentését.

opció	alapértelmezett	Leírás
baseUrl	null	Az URL-t globálisan is beállíthatjuk, ahelyett, hogy minden fájlban átadnánk. Arra lehet használni cy.visit() or cy.request() parancsok
clientCertificates	[]	Ezt a lehetőséget használhatja az ügyféltanúsítványok URL-alapú konfigurálására
env	{}	Bármely környezeti változót átadhat értékként. Ez a lehetőség akkor lesz hasznos, ha az alkalmazásunkat különböző környezetekben, például stádiumban vagy éles környezetben teszteljük.
watchForFileChanges	true	Ez az opció ellenőrzi, hogy a Cypress figyeli-e és újraindítja-e a teszteket a fájlmódosításokra.
port	null	A portszámot átadhatjuk a Cypress fogadására. Véletlenszerű port generálódik, de hozzáadhatjuk a kívánt portszámot.
numTestsKeptInMemory	50	Ez a beállítás a memóriában tárolt teszt pillanatképek és parancsadatok száma. Ha egy próbaüzem során nagy a memóriafelhasználás a böngészőben, csökkenthetjük a számot.
retries	{ "runMode": 0, "openMode": 0 }	Ezzel a beállítással megadhatja, hogy hányszor próbálkozzon újra egy sikertelen teszttel. Külön beállíthatjuk ciprusfutás és a ciprus nyitva.
redirectionLimit	20	Beállíthatjuk azt a korlátot, hogy hányszor lehet az alkalmazást átirányítani, mielőtt hiba történik.
includeShadowDom	false	A Shadow DOM-on belüli navigálás lehetősége az elemekkel való interakcióhoz. Alapértelmezés szerint false értékre van állítva. Ha az alkalmazásunknak van olyan eleme, amely árnyékgyökér navigációt igényel, akkor azt beállíthatja true.

Cypress JSON időtúllépés

Az időtúllépés az egyik legfontosabb fogalom bármely automatizálási keretrendszerben. A Cypress számos lehetőséget kínál, amelyek segítik a szkriptjeink időtúllépéseinek kezelését. Először megvizsgáljuk a konfigurálható lehetőségeket.

opció	alapértelmezett	Leírás
defaultCommandTimeout	4000	Ez a beállítás arra szolgál, hogy megvárja, amíg a DOM-elemeken alapuló parancsok betöltődnek. Ez ezredmásodpercben értendő.
requestTimeout	5000	A várakozási idő ezredmásodpercben a cy.wait() parancs kérésére az időtúllépésig.
responseTimeout	30000	Ez az időtúllépés arra szolgál, hogy megvárja a választ egy sor parancsra, mint pl  cy.request(), cy.wait(), cy.fixture(), cy.getCookie(),  cy.getCookies(), cy.setCookie(), cy.clearCookie(), cy.clearCookies()és cy.screenshot() parancsok
taskTimeout	60000	Időtúllépés, ezredmásodpercben, a végrehajtás befejezéséhez cy.task() parancs
execTimeout	60000	Ez az idő ezredmásodpercben azt jelenti, hogy várni kell a végrehajtás befejezésére cy.exec() parancs, ami a rendszerparancs befejezése
pageLoadTimeout	60000	Ez az időkorlát vár page navigation events vagy kölcsönhatásba lépő parancsok a hasonló oldalakkal cy.visit(), cy.go(), cy.reload()

Cypress Read JSON fájl

Néha szükségünk lesz a projektünkben található mappákra vagy fájlokra. Az interakcióhoz be kell állítanunk bizonyos beállításokat cypress.json fájlt a fájlok kezeléséhez. Tehát először nézzük meg a mappák/fájlok konfigurációjában elérhető lehetőségeket.

opció	alapértelmezett	Leírás
downloadsFolder	cypress/downloads	Ez az az elérési út, ahová a fájlok letöltése és tárolása történik a tesztfutás során
fixturesFolder	cypress/fixtures	Ez a fixture fájlokat tartalmazó mappa elérési útja. Átmehetünk false a fájlok tárolásának letiltásához.
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.
integrationFolder	cypress/integration	Az integrációs tesztfájlok a mappa ezen az útvonalán tárolódnak.
pluginsFile	cypress/plugins/index.js	Ezen az útvonalon tárolódnak a bővítmények. A konfiguráció letiltásához megadhatja az argumentumot false-ként.
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	**/*.*	A betöltendő tesztfájlok elérési útja. Ez vagy globális minták sztringje vagy tömbje.
videosFolder	cypress/videos	Mappa elérési útja, amely a tesztvégrehajtás során tárolja a videókat

Képernyőképek és videóbeállítások

Pillanatképeinket és videóinkat a cypress.json() fájlunkban konfigurálhatjuk, a Cypress pedig néhány lehetőséget kínál a konfiguráció testreszabására.

opció	alapértelmezett	Leírás
screenshotOnRunFailure	true	Igaz vagy hamis beállítási lehetőség, hogy a Cypress készít-e képernyőképet a teszt sikertelensége közben, amikor a cypress fut. Be van állítva true alapértelmezés szerint
trashAssetsBeforeRuns	true	Ez a lehetőség az eszközök kukába helyezését jelenti a videosFolder, downloadsFolder és a screenshotsFolder minden előtt cypress run
videoCompression	32	Ez az opció a videotömörítés minősége, amelyet az állandó sebességi tényezőben (CRF) mérnek. Áthaladással false, ezt az opciót is letilthatja. 0 és 51 közötti értékeket adhat át, ahol a legalacsonyabb érték jobb minőséget ad.
videosFolder	cypress/videos	A mappa, ahová a tesztek videója mentve van.
video	true	Logikai érték a teszt végrehajtásáról készült videó rögzítéséhez cypress run.
videoUploadOnPasses	true	Ez a lehetőség a videók feltöltése az irányítópultra, amikor a specifikációs fájlban szereplő összes teszteset sikeres.

Nézetablaka és cselekvési képesség

Konfigurálhatja és átadhatja az értékeket a nézetablak magasságának és szélességének módosításához a Cypress által biztosított lehetőségekkel. A műveleti lehetőségek is konfigurálhatók.

opció	alapértelmezett	Leírás
viewportHeight	660	Ez az alkalmazás alapértelmezett magasságát adja meg pixelben. Ezzel felülírhatjuk ezt a parancsot cy.viewport()
viewportWidth	1000	Lehetőség a nézetablak szélességére pixelben az alkalmazáshoz. -val felülírható cy.viewport() parancs.
animationDistanceThreshold	5	A pixelben mért távolság küszöbértéke, ahol egy elemnek meg kell haladnia, figyelembe véve az animáció idejét.
waitForAnimations	true	Lehetőség, hogy megvárja, amíg az elemek befejezik az animációt, mielőtt bármilyen parancsot végrehajtana.
scrollBehavior	top	Ez egy nézetablak-beállítás, amelynek egy elemre kell görgetnie közvetlenül a parancs végrehajtása előtt. Az elérhető opciók a következők 'center', 'top', 'bottom', 'nearest'vagy false, Ahol false letiltja a görgetést.

Cypress JSON példa

Korábban láttuk, hogy milyen különböző konfigurációkat tudunk átadni a mi rendszerünkben cypress.json fájlt. Most megvizsgálunk egy példát arra, hogyan használhatjuk őket projektünkben.

A cypress.json fájl alapértelmezett értékeinek felülbírálása

VS kódunkban nyissa meg a cypress.json fájlt. Felülírjuk a defaultCommandTimeout parancsot 8000.

{
    "defaultCommandTimeout" : 8000
}

Így néz ki a VS kódprojektünkben.

A cypress.json fájl, az egész keretre vonatkozik. Ezt úgy tudjuk ellenőrizni, ha a Cypress beállításaihoz navigálunk. Az alapértelmezett értékről megváltozott 4000 nak nek 8000

Az alapértelmezett értékek felülbírálása a tesztszkripten keresztül

Az alapértelmezett értékeket a tesztszkriptünkön keresztül is módosíthatjuk. Ahelyett, hogy áthaladna a cypress.json fájlt, átadjuk a tesztfájlunkban.

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

Így felülírhatjuk a tesztfájlunk alapértelmezett értékeit. Ez azonban nincs hatással semmilyen konfigurációs változtatásra a keretrendszer szintjén. A ciprus elsőbbséget ad a benne lévő értékeknek cypress.json. Végül felveszi a globális konfigurációkat.

Ciprus lámpatest json tömb

Ciprus cy.fixture() egy olyan függvény, amely rögzített adatkészletet tölt be egy fájlba. A fixture JSON-ként használható bármely érték vagy tömb betöltésére a JSON-fájlban. Először is nézzük meg, hogyan lehet elérni a JSON-fájlt a projektünkben.

A JSON-fájlomnak két tulajdonsága van: felhasználónév és jelszó. A JSON fájl nevem examples.json.

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

A specifikációs fájlunkban a cy.fixture() paranccsal és a fogalmával érjük el a fixture-t álnevek.

 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

A környezeti változókat számos szervezeti projektben használják. Környezeti változókat használunk

• amikor az értékek dinamikusak a különböző gépeken
• amikor különböző környezetekben szeretnénk tesztelni, mint például állomásozás, tesztelés, fejlesztés, gyártás/élő

Ezekben az esetekben meg kell határoznunk a környezeti változókat. Ha azonban beállítunk egy env változót egy specifikációs fájlban, az nem jelenik meg a többi specifikációs fájlban. Ennek az az oka, hogy a Cypress az egyes specifikációs fájlokat függetlenül futtatja. Így az env változókat külön kell konfigurálnunk.

A környezeti fájljainkat a Cypress JSON fájlunkból érjük el, azaz cypress.json fájlt. Tehát nekünk kell hozzárendelnünk a lehetőséget cypress.json fájlt, és felhasználtuk a specifikációs fájlunkban. Tehát ugorjunk bele a példánkba.

Környezeti változóinkat beállíthatjuk konfigurációs fájlunkban ill cypress.env.json fájlt.

Környezeti változó beállítása a cypress.json fájlban

Az env tulajdonságot kulcs-érték párral állítjuk be. A kulcsszó alatt átadott bármely érték env környezeti változók alá tartoznak, és a Cypress átveszi az argumentumot a env kulcsszó. A szintaxis az alábbiak szerint néz ki.

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

Ha hozzá akarunk férni a env változót a specifikációs fájlunkban, hozzárendeljük őket az alábbiak szerint.

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

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

Hozzáadjuk a env konfigurációt a projektünkben, és elérheti őket a specifikációs fájlunkban. Miénkben cypress.json fájlt, adja hozzá a következő konfigurációt. Beállítjuk a magunkét URL tulajdonságot, és hozzárendeljük őket URL-ünkhöz. Itt, URL a kulcs, és https://lambdageeks.com/technology/ az érték.

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

Ahogy deklaráltuk a konfigurációt, a specifikációs fájlunkban fogjuk elérni őket. Valahogy úgy néz ki, mint lent. Mint fentebb említettük, használni fogjuk Cypress.env() metódus az env változó eléréséhez.

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

    })
})

A környezeti változó beállítása a cypress.env.json fájlban

A környezeti változónkat hozzárendelhetjük a cypress env JSON fájlunkhoz. Ehhez létre kell hoznunk egy új fájlt cypress.env.json a projekt gyökerében. Nem fogjuk igényelni a env kulcsszó; ehelyett a kulcs-érték pár átadásával közvetlenül elérhetjük őket.

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

Nézzük meg, hogyan rendeljük hozzá őket a mi feladatunkban cypress.env.json fájlt.

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

Mint fentebb látható, létrehoztunk egy új fájlt, cypress.env.json, és hozzátette a mi URL tulajdonságait. A környezeti változókhoz való hozzáférés módja megegyezik az előző részben említettekkel.

Cypress JSON Reporter

Mint tudjuk, a Cypress a mokka tetejére épül; bármely Mokka számára készült riporter használható. A riportert a JSON-fájlunkban globálisan konfigurálhatjuk cypress.json fájlt.

reporter	spec	Itt megadhatja azt a riportert, amelyet a ciprusfutás során generálnia kell. Be van állítva spec alapértelmezett riporterként.
reporterOptions	null	Ezzel megadhatja a riporter támogatott beállításait.

A fent említett opciók alapértelmezés szerint a Reporterben beállított konfigurációk. Ezen kívül a spec a riporter alapértelmezés szerint be van állítva. Így a riporterben bármilyen riportert beállíthatunk, amely kompatibilis a Mochával. reporterOptions a támogatott beállítások megadása az általunk konfigurált riportertől függően.

Nézzük meg, hogyan konfigurálhatjuk a riportert a mi cypress.json fájlt.

Tekintsük a több riportert mochawesome-nek, mint a mi riporterünknek. Először telepítjük a riportert, és hozzáadjuk a mieinkhez cypress.json fájlt.

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

Telepítse a riportert a fenti parancs átadásával a parancssorban. Most a miénkben cypress.json fájlt, adja hozzá a következő tulajdonságot.

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

Részletesen megértjük az egyes tulajdonságokat.

riporter: A riporter neve, amelyet a projektünkben konfigurálunk

jelentésDir: Az a könyvtár, ahová az eredményeinket ki fogjuk adni.

átír: Ez a jelző a korábbi jelentések felülírását kéri.

html: Jelentést készít a teszt befejezéséről.

json: JSON-fájl létrehozása a teszt befejezésekor.

Cypress csomag-lock.json

A package-lock.json A fájl automatikusan létrejön minden olyan művelethez, amikor az npm módosítja a csomópontmodulokat vagy a package.json fájlt. Amikor bármilyen opciót adunk hozzá ill telepítsen minden új függőséget a Cypressünkre csomag JSON fájlt, majd a Cypress package-lock.json automatikusan frissül.

CYPESS PACKA.LOCK JSON A fájl minden csomagot és annak verzióját nyomon követi, így a telepítések karbantartása és frissítése minden npm-telepítéskor globálisan megtörténik. Tehát a Cypress csomag JSON-fájljában, amikor frissítjük a verziót, vagy bármilyen függőséget adunk hozzá, a package-lock.json is frissül, és nem kívánunk semmilyen módosítást végrehajtani rajta.