Mi az a Cypress Json: 11 tény, amit tudnod kell

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.

ciprus json

Tartalomjegyzék

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.

Cypress JSON fájl

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értelmezettLeírás
baseUrlnullAz 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.
watchForFileChangestrueEz az opció ellenőrzi, hogy a Cypress figyeli-e és újraindítja-e a teszteket a fájlmódosításokra.
portnullA portszámot átadhatjuk a Cypress fogadására. Véletlenszerű port generálódik, de hozzáadhatjuk a kívánt portszámot.
numTestsKeptInMemory50Ez 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.
redirectionLimit20Beállíthatjuk azt a korlátot, hogy hányszor lehet az alkalmazást átirányítani, mielőtt hiba történik.
includeShadowDomfalseA 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értelmezettLeírás
defaultCommandTimeout4000Ez 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ő.
requestTimeout5000A várakozási idő ezredmásodpercben a cy.wait() parancs kérésére az időtúllépésig.
responseTimeout30000Ez 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
taskTimeout60000Időtúllépés, ezredmásodpercben, a végrehajtás befejezéséhez cy.task() parancs
execTimeout60000Ez 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
pageLoadTimeout60000Ez 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értelmezettLeírás
downloadsFoldercypress/downloadsEz 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
fixturesFoldercypress/fixturesEz 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.
integrationFoldercypress/integrationAz integrációs tesztfájlok a mappa ezen az útvonalán tárolódnak.
pluginsFilecypress/plugins/index.jsEzen 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.
videosFoldercypress/videosMappa 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értelmezettLeírás
screenshotOnRunFailuretrueIgaz 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
trashAssetsBeforeRunstrueEz 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
videoCompression32Ez 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.
videosFoldercypress/videosA mappa, ahová a tesztek videója mentve van.
videotrueLogikai érték a teszt végrehajtásáról készült videó rögzítéséhez cypress run.
videoUploadOnPassestrueEz 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értelmezettLeírás
viewportHeight660Ez az alkalmazás alapértelmezett magasságát adja meg pixelben. Ezzel felülírhatjuk ezt a parancsot cy.viewport()
viewportWidth1000Lehetőség a nézetablak szélességére pixelben az alkalmazáshoz. -val felülírható cy.viewport() parancs.
animationDistanceThreshold5A 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.
waitForAnimationstrueLehetőség, hogy megvárja, amíg az elemek befejezik az animációt, mielőtt bármilyen parancsot végrehajtana.
scrollBehaviortopEz 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.

cypress.json fájl

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

Cypress beállítások alapértelmezett értékek

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/"
}
A cypress.env.json fájl létrehozása

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.

reporterspecItt megadhatja azt a riportert, amelyet a ciprusfutás során generálnia kell. Be van állítva spec alapértelmezett riporterként.
reporterOptionsnullEzzel 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 riporter a cypress JSON fájlban

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.

Cypress package-lock.json fájl
Lapozzon a lap tetejére