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.

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.

konfigurační nastavení — ***Soubor Cypress JSON***

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.

Viz také Výukový program Appium pro mobilní automatizaci - komplexní průvodce - 20–21

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ů.

Viz také Cypřišové tvrzení: 9 faktů, které byste měli vědět

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.

Viz také Expertní úroveň selenu 2021

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.

výchozí časový limit — **soubor cypress.json**

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

nastavení cypřiš — Výchozí hodnoty nastavení Cypress

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": "[email protected]",
"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://techiescience.com/technology/ je hodnota.

{
  "env" : {
      "url" : "https://techiescience.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://techiescience.com/",
    "urlTechnology" : "https://techiescience.com/technology/"
}

url cypřiš — ***Vytvoření souboru cypress.env.json***

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.

soubor cypress.json — ***Reportér Cypress v souboru cypress 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.

balíček lock json cypress — ***Soubor Cypress package-lock.json***

Aishwarya Lakshmi

Ahoj…Jsem Aishwarya Lakshmi, dokončil jsem B.Tech a mám téměř 2 roky zkušeností v oblasti testování. Jsem testovací nadšenec a nadšený pro testování a rád objevuji nové věci ve svém oboru a sdílím je se svými vrstevníky. Baví mě psát blogy ve svém volném čase tím nejjednodušším, ale efektivním způsobem. Jako tester mám rád věci k dokonalosti, takže svým čtenářům přeji, aby technologii dokonale rozuměli. Neustále se aktualizuji o nových technologiích souvisejících s testováním a trávím čas jejich pochopením. Jsem rád, že mohu studentům pomoci porozumět pojmům v testování.