Omówimy strukturę JSON, przykłady i szczegółowe praktyczne doświadczenie dotyczące pisania JSON w naszym kodzie. Ale najpierw zagłębmy się w nasz artykuł!

Co to jest Cypress Json: przykład, schemat, szczegółowa analiza praktyczna

W naszym poprzednim artykuł, omówiliśmy zmienne i aliasy oraz jak napisać nasz pierwszy przypadek testowy. Teraz omówimy Cypress JSON i sposób włączenia go do naszego kodu.

Spis treści

• Cyprysowy plik JSON
• Domyślne opcje JSON
• Opcje globalne
• Limit czasu cyprysowego JSON
• Cyprys odczytuje plik JSON
• Opcje zrzutów ekranu i wideo
• Widoczność i możliwość działania
• Cyprysowy przykład JSON
• Tablica JSON oprawy cypress
• Cyprys env JSON
• Cyprysowy reporter JSON
• Cyprys pakiet-lock.json

Cyprysowy plik JSON

Jak widzieliśmy wcześniej, po pierwszym otwarciu naszego Cypress Test Runner, tworzy on cyprys.json plik. Ten plik służy do przekazywania wszelkich wymaganych przez nas wartości konfiguracyjnych. Więc najpierw przyjrzymy się opcjom, które możemy przekazać w naszym cypress.json plik.

Domyślne opcje JSON

Niektóre opcje są domyślnie ustawione w Cypress. Możemy je jednak dostosować do naszego projektu. Aby zidentyfikować domyślne wartości ustawione przez Cypress, przejdź do Ustawienia folder w naszym Cypress Test Runner. Stamtąd rozwiń opcję Konfiguracja, aby wyświetlić domyślne opcje ustawione przez Cypress.

Opcje są domyślnymi konfiguracjami dostarczonymi przez 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
}

Opcje

Możemy zmienić domyślne opcje Cypressa, przekazując dowolne argumenty zgodne z naszym projektem. Jak sama nazwa wskazuje, cypress.json jest plikiem JSON, więc musimy przekazać nasze argumenty w formacie JSON. W naszym kodzie VS widać, że cypress.json jest pusty i nie są do niego przekazywane żadne argumenty. Zobaczmy teraz różne opcje, które możemy przekazać w naszym pliku JSON.

Opcje globalne

Możemy przekazać opcje globalne do argumentów, które muszą być dostępne globalnie. Na przykład w poniższej tabeli kolumna Options reprezentuje słowo kluczowe, które będziemy przekazywać w naszym pliku JSON; Default wskazuje domyślną wartość danej opcji ustawionej przez Cypress, a Description wskazuje znaczenie opcji.

Limit czasu cyprysowego JSON

Limit czasu jest jednym z najważniejszych pojęć w każdym frameworku automatyzacji. Cypress zapewnia wiele opcji, które pomagają w obsłudze limitów czasu w naszych skryptach. Najpierw przyjrzymy się opcjom, które możemy skonfigurować.

Cyprys odczytuje plik JSON

Czasami będziemy musieli wejść w interakcję z folderami lub plikami w naszym projekcie. Aby wchodzić w interakcje, musimy ustawić pewne opcje w naszym cypress.json plik do manipulowania plikami. Przyjrzyjmy się więc najpierw opcjom dostępnym w naszej konfiguracji folderów/plików.

Zrzuty ekranu i opcje wideo

Możemy skonfigurować nasze migawki i filmy w naszym pliku cypress.json(), a Cypress zapewnia nam kilka opcji dostosowania naszej konfiguracji.

Widoczność i możliwość działania

Możesz konfigurować i przekazywać wartości, aby zmienić wysokość i szerokość rzutni za pomocą opcji oferowanych przez Cypress. Można również skonfigurować opcje działania.

Cyprysowy przykład JSON

Wcześniej widzieliśmy różne konfiguracje, które możemy przekazać w naszym cypress.json plik. Teraz przyjrzymy się przykładowi, jak ich użyć w naszym projekcie.

Zastępowanie wartości domyślnych w pliku cypress.json

W naszym kodzie VS otwórz cypress.json plik. Zastąpimy defaultCommandTimeout polecenie do 8000.

{
    "defaultCommandTimeout" : 8000
}

Tak to wygląda w naszym projekcie VS code.

Zmieniając cypress.json pliku, dotyczy całego frameworka. Możemy to zweryfikować, przechodząc do naszych ustawień Cypress. Zmieniła się z domyślnej wartości 4000 do 8000

Zastępowanie wartości domyślnych za pomocą skryptu testowego

Możemy również manipulować wartościami domyślnymi za pomocą naszego skryptu testowego. Zamiast przechodzić w cypress.json plik, przekażemy go w naszym pliku testowym.

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

W ten sposób możemy nadpisać wartości domyślne w naszym pliku testowym. Nie ma to jednak wpływu na żadne zmiany konfiguracji na poziomie struktury. Cypress daje pierwszeństwo wartościom w cypress.json. Na koniec zajmuje konfiguracje globalne.

Tablica JSON oprawy cypress

Cyprys cy.fixture() to funkcja, która ładuje ustalony zestaw danych do pliku. Możemy użyć urządzenia jako JSON do załadowania dowolnych wartości lub tablicy w pliku JSON. Najpierw zrozumiemy, jak uzyskać dostęp do pliku JSON w naszym projekcie.

Mój plik JSON ma dwie właściwości: nazwę użytkownika i hasło. Moja nazwa pliku JSON to examples.json.

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

W naszym pliku spec uzyskamy dostęp do naszego urządzenia za pomocą polecenia cy.fixture() i koncepcji 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)
          }       

Cyprys env JSON

Zmienne środowiskowe są używane w wielu projektach w organizacjach. Używamy zmiennych środowiskowych

• gdy wartości są dynamiczne na różnych maszynach
• gdy chcemy testować w różnych środowiskach, takich jak staging, testowanie, rozwój, produkcja/na żywo

Te przypadki wymagają od nas zdefiniowania zmiennych środowiskowych. Jeśli jednak ustawimy zmienną env w jednym pliku specyfikacji, nie będzie ona odzwierciedlona w innych plikach specyfikacji. Dzieje się tak, ponieważ Cypress uruchamia każdy plik specyfikacji niezależnie. W ten sposób będziemy musieli osobno skonfigurować zmienne env.

Mamy dostęp do naszych plików środowiska z naszego pliku Cypress JSON, tj. cypress.json plik. Więc będziemy musieli przypisać opcję w naszym cypress.json i użył go w naszym pliku specyfikacji. Zanurzmy się więc w naszym przykładzie.

Możemy ustawić nasze zmienne środowiskowe w naszym pliku konfiguracyjnym lub cypress.env.json plik.

Ustawianie zmiennej środowiskowej w pliku cypress.json

Ustawiamy właściwość env za pomocą pary klucz-wartość. Wszelkie wartości przekazywane pod słowem kluczowym env wchodzą pod zmienne środowiskowe, a Cypress bierze argument z env słowo kluczowe. Składnia wygląda jak poniżej.

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

Jeśli chcemy uzyskać dostęp do env zmiennej w naszym pliku spec, przypisujemy je, jak wspomniano poniżej.

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

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

Dodamy env w naszym projekcie i uzyska do nich dostęp w naszym pliku spec. W naszym cypress.json pliku, dodaj następującą konfigurację. Ustawiamy nasze URL właściwości i przypisanie ich do naszego adresu URL. Tutaj, URL jest kluczem i https://techiescience.com/technology/ to wartość.

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

Jak zadeklarowaliśmy konfigurację, będziemy mieli do nich dostęp w naszym pliku spec. Wygląda to jak poniżej. Jak wspomniano powyżej, będziemy używać Cypress.env() metoda dostępu do zmiennej 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'));

    })
})

Ustawianie zmiennej środowiskowej w pliku cypress.env.json

Możemy przypisać naszą zmienną środowiskową w naszym pliku cypress env JSON. W tym celu powinniśmy stworzyć nowy plik o nazwie cypress.env.json u podstaw projektu. Nie będziemy wymagać env słowo kluczowe; zamiast tego możemy uzyskać do nich bezpośredni dostęp, przekazując parę klucz-wartość.

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

Przyjrzyjmy się, jak przypisać je w naszym cypress.env.json plik.

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

Jak widać powyżej, stworzyliśmy nowy plik, cypress.env.jsoni dodał nasz URL nieruchomości. Sposób dostępu do zmiennych środowiskowych byłby taki sam, jak wspomniano powyżej w poprzedniej sekcji.

Cyprysowy reporter JSON

Jak wiemy, Cypress jest zbudowany na Mocha; można użyć dowolnych reporterów stworzonych dla Mocha. Możemy skonfigurować reporter w naszym pliku JSON globalnie w naszym cypress.json plik.

Wspomniane powyżej opcje to konfiguracje ustawione domyślnie w Reporterze. Ponadto spec reporter jest ustawiony domyślnie. Tym samym w reporterze możemy ustawić dowolny reporter, który jest kompatybilny z Mocha. reporterOptions jest określenie obsługiwanych opcji w zależności od konfigurowanego przez nas reportera.

Zobaczmy, jak skonfigurować reporter w naszym cypress.json plik.

Potraktujmy multireportera mochawe jako naszego reportera. Najpierw zainstalujemy reporter i dodamy je do naszego cypress.json plik.

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

Zainstaluj reporter, przekazując powyższe polecenie w wierszu poleceń. Teraz w naszym cypress.json pliku, dodaj następującą właściwość.

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

Zrozumiemy szczegółowo każdą z właściwości.

reporter: Nazwisko reportera, którego konfigurujemy w naszym projekcie

raportDir: Katalog, w którym zamierzamy wyprowadzić nasze wyniki.

przepisać: Ta flaga prosi o nadpisanie poprzednich raportów.

html: Generuje raport z zakończenia testu.

json: czy generować plik JSON po zakończeniu testu.

Cyprys pakiet-lock.json

Połączenia pakiet-lock.json plik jest tworzony automatycznie dla wszelkich operacji, gdy npm modyfikuje moduły węzła lub plik package.json. Kiedy dodamy jakieś opcje lub zainstaluj nowe zależności do naszego Cypress pakiet JSON, a następnie pakiet Cypress package-lock.json zostanie automatycznie zaktualizowany.

Pakiet Cypess.lock JSON plik śledzi każdy pakiet i jego wersję, dzięki czemu instalacje są utrzymywane i aktualizowane globalnie przy każdej instalacji npm. Tak więc w naszym pliku JSON pakietu Cypress, gdy aktualizujemy wersję lub dodajemy jakąkolwiek zależność, plik package-lock.json również zostaje zaktualizowany i nie chcemy wprowadzać w nim żadnych zmian.

Aishwarya Lakszmi

Cześć… nazywam się Aishwarya Lakshmi, ukończyłem B.Tech i mam prawie 2 lata doświadczenia w domenie testowania. Jestem entuzjastą testowania i pasjonuję się testowaniem. Uwielbiam odkrywać nowe rzeczy w mojej dziedzinie i dzielić się nimi z rówieśnikami. W wolnym czasie lubię pisać blogi w najprostszy, ale skuteczny sposób. Jako tester lubię mieć wszystko dopracowane do perfekcji, dlatego życzę moim czytelnikom doskonałego zrozumienia technologii. Na bieżąco śledzę nowe technologie związane z testowaniem i poświęcam czas na ich zrozumienie. Cieszę się, że mogę pomóc uczniom zrozumieć pojęcia używane w testowaniu.