Budeme diskutovat o struktuře JSON, příkladech a podrobných praktických zkušenostech se zapisováním JSON do našeho kódu. Ale nejprve se ponořme do našeho článku!

Co je Cypress Json: Příklad, schéma, podrobná praktická analýza

V našem předchozím článek, diskutovali jsme o proměnných a aliasech a o tom, jak napsat náš první testovací případ. Nyní budeme diskutovat o Cypress JSON a o tom, jak jej začlenit do našeho kódu.

Obsah

• Soubor Cypress JSON
• Výchozí možnosti JSON
• Globální možnosti
• Časový limit Cypress JSON
• Soubor JSON Cypress Read
• Možnosti obrazovky a videa
• Výřez a použitelnost
• Cypress JSON Příklad
• Pole Cypress Fixture JSON
• Cypress env JSON
• Reportér Cypress JSON
• Balíček Cypress-lock.json

Soubor Cypress JSON

Jak jsme viděli dříve, při prvním otevření našeho Cypress Test Runneru se vytvoří a cypress.json soubor. Tento soubor slouží k předání všech konfiguračních hodnot, které požadujeme. Nejprve se tedy podíváme na možnosti, které můžeme předat v našich cypress.json soubor.

Výchozí možnosti JSON

Některé možnosti jsou ve výchozím nastavení nastaveny v Cypressu. Můžeme je však přizpůsobit podle našeho projektu. Chcete -li identifikovat výchozí hodnoty nastavené Cypressem, přejděte na Nastavení složku v našem Cypress Test Runneru. Odtud rozbalte možnost Konfigurace a zobrazte výchozí možnosti nastavené společností Cypress.

Možnosti jsou výchozí konfigurace poskytované společností 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
}

možnosti

Výchozí možnosti Cypressu můžeme změnit předáním jakýchkoli argumentů, které jsou kompatibilní s naším projektem. Jak název napovídá, cypress.json je soubor JSON, takže musíme předat naše argumenty ve formátu JSON. V našem VS kódu jste mohli vidět, že cypress.json je prázdný a nejsou mu předány žádné argumenty. Nyní se podívejme na různé možnosti, které můžeme předat v našem souboru JSON.

Globální možnosti

Globální možnosti můžeme předat argumentům, ke kterým je potřeba přistupovat globálně. Například v níže uvedené tabulce představuje sloupec Možnosti klíčové slovo, které předáme v našem souboru JSON; Výchozí označuje výchozí hodnotu konkrétní možnosti nastavené společností Cypress a Description označuje význam této možnosti.

Volba	Automaticky	Popis
baseUrl	null	Místo předávání v každém souboru můžeme nastavit URL globálně. Lze použít pro cy.visit() or cy.request() Příkazy
clientCertificates	[]	Tuto možnost můžete použít ke konfiguraci klientských certifikátů na základě adresy URL
env	{}	Jakékoli proměnné prostředí můžete předat jako hodnotu. Tato možnost bude užitečná, pokud testujeme naši aplikaci v různých prostředích, jako je staging nebo produkce.
watchForFileChanges	true	Tato volba zkontroluje, zda Cypress sleduje a restartuje testy při jakýchkoli změnách souborů.
port	null	Můžeme předat číslo portu na hostování Cypress. Vygeneruje se náhodný port, ale můžeme přidat číslo portu, které požadujeme.
numTestsKeptInMemory	50	Tato možnost je počet testovacích snímků a dat příkazů, které jsou uloženy v paměti. Pokud je v prohlížeči během zkušebního provozu velká spotřeba paměti, můžeme počet snížit.
retries	{ "runMode": 0, "openMode": 0 }	Tato možnost je určit, kolikrát se má opakovat test, který selhává. Můžeme jej konfigurovat samostatně pro cypřišový běh  a  cypřiš otevřený.
redirectionLimit	20	Můžeme nakonfigurovat limit pro počet případů, kdy lze aplikaci přesměrovat, než dojde k chybě.
includeShadowDom	false	Možnost navigace uvnitř Shadow DOM pro interakci s prvky. Ve výchozím nastavení je nastavena na hodnotu false. Pokud má naše aplikace nějaký prvek vyžadující navigaci v kořenovém adresáři, můžete ji nastavit na true.

Časový limit Cypress JSON

Časový limit je jedním z nejdůležitějších konceptů v jakémkoli automatizačním rámci. Cypress poskytuje řadu možností, které pomáhají při zpracování časových limitů v našich skriptech. Nejprve se podíváme na možnosti, které můžeme konfigurovat.

Volba	Automaticky	Popis
defaultCommandTimeout	4000	Tato možnost je počkat na načtení příkazů založených na DOM Elements. To je v milisekundách.
requestTimeout	5000	Čas, v milisekundách, počkejte, až vyprší časový limit požadavku příkazu cy.wait ().
responseTimeout	30000	Tento časový limit je počkat na odpověď v řadě příkazů, jako je  cy.request(), cy.wait(), cy.fixture(), cy.getCookie(),  cy.getCookies(), cy.setCookie(), cy.clearCookie(), cy.clearCookies(), a cy.screenshot() Příkazy
taskTimeout	60000	Časový limit, v milisekundách, pro dokončení pro provedení cy.task() příkaz
execTimeout	60000	Tentokrát v milisekundách je počkat na dokončení provádění cy.exec() příkaz, což je dokončení systémového příkazu
pageLoadTimeout	60000	Tento časový limit čeká page navigation events nebo příkazy, které na sebe vzájemně působí se stránkami jako cy.visit(), cy.go(), cy.reload()

Soubor JSON Cypress Read

Někdy budeme vyžadovat interakci se složkami nebo soubory v našem projektu. Abychom mohli komunikovat, musíme v našem nastavení nastavit určité možnosti cypress.json soubor pro manipulaci se soubory. Nejprve se tedy podívejme na možnosti dostupné v konfiguraci složek/ souborů.

Volba	Automaticky	Popis
downloadsFolder	cypress/downloads	Toto je cesta, kam se soubory stahují a ukládají během testovacího běhu
fixturesFolder	cypress/fixtures	Toto je cesta ke složce, která obsahuje soubory zařízení. Můžeme projít false zakázat ukládání souborů.
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	Soubory testů integrace jsou uloženy v této cestě ke složce.
pluginsFile	cypress/plugins/index.js	Na této cestě jsou uloženy doplňky. Chcete -li tuto konfiguraci deaktivovat, můžete argument předat jako false.
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	**/*.*	Cesta k testovacím souborům, které je třeba načíst. Je to buď řetězec, nebo pole globálních vzorů.
videosFolder	cypress/videos	Cesta ke složce, která bude ukládat videa během provádění testu

Snímky obrazovky a možnosti videa

Můžeme nakonfigurovat naše snímky a videa v našem souboru cypress.json () a Cypress nám poskytuje několik možností, jak přizpůsobit naši konfiguraci.

Volba	Automaticky	Popis
screenshotOnRunFailure	true	Možnost nastavit na hodnotu true nebo false, zda Cypress pořídí snímek obrazovky během selhání testu při spuštění cypřiše. Je nastaveno na true Ve výchozím nastavení
trashAssetsBeforeRuns	true	Tato možnost je vyhodit aktiva do videosFolder, downloadsFolder a screenshotsFolder před každým cypress run
videoCompression	32	Tato možnost je kvalita komprese videa měřená pomocí faktoru konstantní rychlosti (CRF). Předáním false, můžete také tuto možnost deaktivovat. Můžete předat hodnoty od 0 do 51, kde nejnižší hodnota poskytuje lepší kvalitu.
videosFolder	cypress/videos	Složka, kam je uloženo video z testů.
video	true	Booleovská hodnota pro zachycení videa s provedením testu cypress run.
videoUploadOnPasses	true	Tato možnost je nahrát videa na řídicí panel, když projdou všechny testovací případy v souboru spec.

Výřez a použitelnost

Pomocí možností, které poskytuje Cypress, můžete konfigurovat a předávat hodnoty pro změnu výšky a šířky výřezu. Lze také konfigurovat možnosti použitelnosti.

Volba	Automaticky	Popis
viewportHeight	660	To má poskytnout výchozí výšku aplikace v pixelech. Tento příkaz můžeme přepsat pomocí cy.viewport()
viewportWidth	1000	Možnost pro šířku výřezu v pixelech pro aplikaci. Lze přepsat pomocí cy.viewport() příkaz.
animationDistanceThreshold	5	Prahová hodnota vzdálenosti měřené v pixelech, kde prvek musí překročit s ohledem na čas pro animaci.
waitForAnimations	true	Možnost počkat, až prvky dokončí animaci, než provedete jakékoli příkazy.
scrollBehavior	top	Toto je možnost výřezu, která se musí posunout k prvku těsně před provedením jakýchkoli příkazů. Dostupné možnosti jsou 'center', 'top', 'bottom', 'nearest'nebo false, Vyznačující se tím, false zakáže posouvání.

Cypress JSON Příklad

Dříve jsme viděli různé konfigurace, které můžeme předat v našich cypress.json soubor. Nyní se podíváme na příklad, jak je použít v našem projektu.

Přepsání výchozích hodnot v souboru cypress.json

V našem kódu VS otevřete cypress.json soubor. Přepíšeme defaultCommandTimeout příkaz k 8000.

{
    "defaultCommandTimeout" : 8000
}

Takto to vypadá v našem projektu VS kódu.

Změnou cypress.json soubor, platí pro celý framework. Můžeme to ověřit tak, že přejdeme do našich nastavení Cypress. Změnilo se z výchozí hodnoty 4000 na 8000

Přepsání výchozích hodnot pomocí testovacího skriptu

S výchozími hodnotami můžeme manipulovat také pomocí našeho testovacího skriptu. Místo předávání v cypress.json soubor, předáme jej v našem testovacím souboru.

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

Tímto způsobem můžeme přepsat výchozí hodnoty v našem testovacím souboru. To však neovlivní žádné změny konfigurace na úrovni rámce. Cypress dává přednost hodnotám v cypress.json. Nakonec přebírá globální konfigurace.

Pole Cypress Fixture JSON

Cypřiš cy.fixture() je funkce, která načte pevnou sadu dat do souboru. Svítidlo můžeme použít jako JSON k načtení libovolných hodnot nebo pole do souboru JSON. Nejprve pochopíme, jak přistupovat k souboru JSON v našem projektu.

Můj soubor JSON má dvě vlastnosti: uživatelské jméno a heslo. Můj název souboru JSON je examples.json.

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

V našem souboru specifikací budeme mít přístup k našemu zařízení pomocí příkazu cy.fixture () a konceptu aliasy.

 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

Proměnné prostředí se používají v mnoha projektech v organizacích. Používáme proměnné prostředí

• když jsou hodnoty dynamické na různých strojích
• když chceme testovat v různých prostředích, jako je staging, testování, vývoj, produkce/live

Tyto případy vyžadují, abychom definovali proměnné prostředí. Pokud však nastavíme proměnnou env v jednom souboru spec, neprojeví se to v jiných souborech spec. Důvodem je, že Cypress spouští každý soubor specifikací samostatně. Tímto způsobem budeme muset konfigurovat proměnné env samostatně.

K souborům prostředí přistupujeme ze souboru Cypress JSON, tj. cypress.json soubor. Budeme tedy muset přiřadit možnost v našem cypress.json soubor a použil ho v našem souboru spec. Pojďme se tedy ponořit do našeho příkladu.

Proměnné prostředí můžeme nastavit v našem konfiguračním souboru nebo cypress.env.json soubor.

Nastavení proměnné prostředí v souboru cypress.json

Vlastnost env nastavíme dvojicí klíč – hodnota. Jakékoli hodnoty předané pod klíčovým slovem env spadají pod proměnné prostředí a Cypress bere argument z env klíčové slovo. Syntaxe vypadá níže.

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

Pokud chceme získat přístup k env proměnné v našem souboru specifikací, přiřadíme je níže uvedeným způsobem.

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

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

Přidáme env konfigurace v našem projektu a bude k nim přistupovat v našem souboru specifikací. V našem cypress.json soubor, přidejte následující konfiguraci. Nastavujeme naše URL vlastnost a jejich přiřazení k naší URL. Tady, URL je klíč, a https://lambdageeks.com/technology/ je hodnota.

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

Jak jsme deklarovali konfiguraci, přistoupíme k nim v našem souboru specifikací. Vypadá to něco jako níže. Jak bylo uvedeno výše, budeme používat Cypress.env() metoda přístupu k proměnné 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'));

    })
})

Nastavení proměnné prostředí v souboru cypress.env.json

Proměnnou prostředí můžeme přiřadit v našem souboru JSON cypress env. K tomu bychom měli vytvořit nový soubor s názvem cypress.env.json u kořene projektu. Nebudeme vyžadovat env klíčové slovo; místo toho k nim máme přímý přístup předáním dvojice klíč-hodnota.

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

Podívejme se, jak je přiřadit v našem cypress.env.json soubor.

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

Jak vidíte výše, vytvořili jsme nový soubor, cypress.env.json, a přidal náš URL vlastnosti. Způsob přístupu k proměnným prostředí by byl stejný, jak je uvedeno výše v předchozí části.

Reportér Cypress JSON

Jak víme, Cypress je postaven na vrcholu Mocha; lze použít všechny reportéry, kteří jsou postaveni pro Mochu. Reportéra v našem souboru JSON můžeme konfigurovat globálně v našem cypress.json soubor.

reporter	spec	Zde můžete určit reportéra, který by se měl generovat během běhu cypřiše. Je nastaveno na spec jako výchozí reportér.
reporterOptions	null	Toto má určit podporované možnosti pro reportéra.

Výše uvedené možnosti jsou ve výchozím nastavení konfiguracemi nastavenými v reportéru. Kromě toho spec reportér je ve výchozím nastavení nastaven. V reportérovi tedy můžeme nastavit libovolného reportéra, který je kompatibilní s Mochou. reporterOptions je určit podporované možnosti v závislosti na reportérovi, kterého konfigurujeme.

Pojďme se podívat, jak nakonfigurovat reportéra v našem cypress.json soubor.

Uvažujme jako reportéra mochawesome s více reportéry. Reportéra nejprve nainstalujeme a přidáme do našeho cypress.json soubor.

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

Nainstalujte reportéra předáním výše uvedeného příkazu na příkazovém řádku. Nyní v našem cypress.json soubor, přidejte následující vlastnost.

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

Podrobně porozumíme každé z vlastností.

reportér: Jméno reportéra, kterého konfigurujeme v našem projektu

nahlásit Ředitel: Adresář, kam se chystáme odeslat naše výsledky.

přepsat: Tento příznak požaduje přepsání předchozích sestav.

html: Generuje zprávu o dokončení testu.

json: Zda se má po dokončení testu generovat soubor JSON.

Balíček Cypress-lock.json

Projekt balíček-lock.json Když npm upraví moduly uzlů nebo soubor package.json, automaticky se vytvoří soubor pro všechny operace. Když přidáme nějaké možnosti popř nainstalovat jakékoli nové závislosti na našem Cypressu balíček JSON, pak se Cypress package-lock.json automaticky aktualizuje.

Balíček Cypess.lock JSON soubor sleduje každý balíček a jeho verzi, takže instalace jsou udržovány a aktualizovány při každé instalaci NPM globálně. Když tedy v našem souboru JSON balíčku Cypress aktualizujeme verzi nebo přidáme jakoukoli závislost, balíček-lock.json se také aktualizuje a nechceme v něm provádět žádné změny.