Was ist Cypress Json: 11 Fakten, die Sie kennen sollten


Wir werden die JSON-Struktur, Beispiele und detaillierte praktische Erfahrungen zum Schreiben von JSON in unserem Code diskutieren. Aber lassen Sie uns zuerst in unseren Artikel eintauchen!

Was ist Cypress Json: Beispiel, Schema, detaillierte praktische Analyse

In unserem vorherigen Artikel, diskutierten wir Variablen und Aliase und wie wir unseren ersten Testfall schreiben. Jetzt werden wir Cypress JSON besprechen und wie man es in unseren Code einbindet.

Zypresse json

Inhaltsverzeichnis

Cypress JSON-Datei

Wie wir bereits gesehen haben, erstellt das erste Mal, wenn wir unseren Cypress Test Runner öffnen, ein cypress.json Datei. Diese Datei wird verwendet, um alle erforderlichen Konfigurationswerte zu übergeben. Also schauen wir uns zuerst die Optionen an, die wir in unserem weitergeben können cypress.json Datei.

Standard-JSON-Optionen

Bestimmte Optionen sind in Cypress standardmäßig eingestellt. Wir können sie jedoch an unser Projekt anpassen. Um die von Cypress eingestellten Standardwerte zu identifizieren, navigieren Sie zum Einstellungen  Ordner in unserem Cypress Test Runner. Erweitern Sie dort die Konfigurationsoption, um die von Cypress festgelegten Standardoptionen anzuzeigen.

Cypress JSON-Datei

Die Optionen sind die von Cypress bereitgestellten Standardkonfigurationen.

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

Optionen

Wir können die Standardoptionen von Cypress ändern, indem wir alle Argumente übergeben, die mit unserem Projekt kompatibel sind. Wie der Name schon sagt, ist cypress.json eine JSON-Datei, daher müssen wir unsere Argumente im JSON-Format übergeben. In unserem VS-Code konnten Sie sehen, dass cypress.json leer ist und keine Argumente übergeben wurden. Sehen wir uns nun die verschiedenen Optionen an, die wir in unserer JSON-Datei übergeben können.

Globale Optionen

Wir können die globalen Optionen an Argumente übergeben, auf die global zugegriffen werden muss. In der folgenden Tabelle stellt die Spalte Optionen beispielsweise das Schlüsselwort dar, das wir in unserer JSON-Datei übergeben werden. Standard gibt den Standardwert der bestimmten von Cypress eingestellten Option an, und Beschreibung gibt die Bedeutung der Option an.

OptionDefaultBeschreibung
baseUrlnullWir können die URL global festlegen, anstatt jede Datei zu übergeben. Es kann verwendet werden für cy.visit() or cy.request() Befehle
clientCertificates[]Sie können diese Option verwenden, um Client-Zertifikate auf URL-Basis zu konfigurieren
env{}Sie können beliebige Umgebungsvariablen als Wert übergeben. Diese Option ist nützlich, wenn wir unsere Anwendung in verschiedenen Umgebungen wie Staging oder Produktion testen.
watchForFileChangestrueMit dieser Option wird überprüft, ob Cypress Tests zu Dateiänderungen überwacht und neu startet.
portnullWir können die Portnummer beim Hosten von Cypress weitergeben. Ein zufälliger Port wird generiert, aber wir können die benötigte Portnummer hinzufügen.
numTestsKeptInMemory50Diese Option ist die Anzahl der Test-Snapshots und Befehlsdaten, die im Speicher gespeichert werden. Kommt es während eines Testlaufs zu einem hohen Speicherverbrauch im Browser, können wir die Anzahl reduzieren.
retries{ "runMode": 0, "openMode": 0 }Mit dieser Option legen Sie fest, wie oft ein fehlgeschlagener Test wiederholt werden soll. Wir können es separat konfigurieren für Zypressenlauf und  Zypresse offen.
redirectionLimit20Wir können das Limit konfigurieren, wie oft die Anwendung umgeleitet werden kann, bevor ein Fehler auftritt.
includeShadowDomfalseDie Möglichkeit, innerhalb des Shadow DOM zu navigieren, um mit Elementen zu interagieren. Standardmäßig ist es auf false gesetzt. Wenn unsere Anwendung ein Element enthält, das eine Shadow-Root-Navigation erfordert, können Sie es auf setzen true.

Cypress JSON-Zeitüberschreitung

Timeout ist eines der wichtigsten Konzepte in jedem Automatisierungsframework. Cypress bietet eine Vielzahl von Optionen, die beim Umgang mit Zeitüberschreitungen in unseren Skripten helfen. Zuerst werden wir uns die Optionen ansehen, die wir konfigurieren können.

OptionDefaultBeschreibung
defaultCommandTimeout4000Diese Option dient dazu, auf das Laden der auf DOM-Elementen basierenden Befehle zu warten. Dies ist in Millisekunden.
requestTimeout5000Zeit in Millisekunden, die gewartet wird, bis die Anforderung des Befehls cy.wait() das Zeitlimit überschreitet.
responseTimeout30000Diese Zeitüberschreitung soll warten, bis eine Antwort in einer Reihe von Befehlen wie z  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies()und cy.screenshot() Befehle
taskTimeout60000Timeout in Millisekunden für den Abschluss der Ausführung von cy.task() Befehl
execTimeout60000Diese Zeit in Millisekunden soll warten, bis die Ausführung des abgeschlossen ist cy.exec() Befehl,
das ist die Vervollständigung des Systembefehls
pageLoadTimeout60000Diese Auszeit wartet auf page navigation events oder Befehle, die interagieren
mit den seiten wie cy.visit()cy.go()cy.reload()

Cypress Read JSON-Datei

Manchmal müssen wir mit den Ordnern oder Dateien in unserem Projekt interagieren. Um zu interagieren, müssen wir bestimmte Optionen in unserem einstellen cypress.json Datei, um die Dateien zu manipulieren. Schauen wir uns also zuerst die Optionen an, die in unserer Ordner-/Dateikonfiguration verfügbar sind.

OptionDefaultBeschreibung
downloadsFoldercypress/downloadsDies ist der Pfad, in dem die Dateien während eines Testlaufs heruntergeladen und gespeichert werden
fixturesFoldercypress/fixturesDies ist der Pfad zu dem Ordner, der die Fixture-Dateien enthält. Wir können passieren false um das Speichern der Dateien zu deaktivieren.
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/integrationIn diesem Pfad zum Ordner werden Integrationstestdateien gespeichert.
pluginsFilecypress/plugins/index.jsIn diesem Pfad werden die Plugins gespeichert. Sie können das Argument als false übergeben, um diese Konfiguration zu deaktivieren.
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**/*.*Pfad zu den Testdateien, die geladen werden müssen. Es ist entweder ein String oder ein Array von globalen Mustern.
videosFoldercypress/videosOrdnerpfad, in dem Videos während der Testausführung gespeichert werden

Screenshots und Videooptionen

Wir können unsere Snapshots und Videos in unserer Datei cypress.json() konfigurieren, und Cypress bietet uns einige Optionen zum Anpassen unserer Konfiguration.

OptionDefaultBeschreibung
screenshotOnRunFailuretrueOption, um entweder auf true oder false zu setzen, ob Cypress während eines Testfehlers einen Screenshot erstellt, wenn Cypress ausgeführt wird. Es ist eingestellt auf true standardmäßig
trashAssetsBeforeRunstrueMit dieser Option werden Assets in den Papierkorb verschoben videosFolder, downloadsFolder und screenshotsFolder vor jedem cypress run
videoCompression32Diese Option ist die Qualität der Videokompression, gemessen im Constant Rate Factor (CRF). Im Vorbeigehen false, können Sie diese Option auch deaktivieren. Sie können Werte von 0 bis 51 übergeben, wobei der niedrigste Wert eine bessere Qualität ergibt.
videosFoldercypress/videosDer Ordner, in dem das Video der Tests gespeichert wird.
videotrueBoolescher Wert zum Aufnehmen des Videos der Testausführung mit cypress run.
videoUploadOnPassestrueMit dieser Option werden die Videos in das Dashboard hochgeladen, wenn alle Testfälle in einer Spezifikationsdatei erfolgreich sind.

Ansichtsfenster und Handlungsfähigkeit

Sie können Werte konfigurieren und übergeben, um die Höhe und Breite des Ansichtsfensters mit den von Cypress bereitgestellten Optionen zu ändern. Handlungsoptionen können ebenfalls konfiguriert werden.

OptionDefaultBeschreibung
viewportHeight660Dies dient dazu, die Standardhöhe für die Anwendung in Pixeln anzugeben. Wir können diesen Befehl überschreiben mit cy.viewport()
viewportWidth1000Option für die Viewport-Breite in Pixeln für die Anwendung. Kann überschrieben werden mit cy.viewport() Befehl.
animationDistanceThreshold5Der Schwellenwert für die in Pixel gemessene Entfernung, die ein Element unter Berücksichtigung der Animationszeit überschreiten muss.
waitForAnimationstrueOption zum Warten, bis die Elemente die Animation abgeschlossen haben, bevor Befehle ausgeführt werden.
scrollBehaviortopDies ist eine Ansichtsfensteroption, die zu einem Element scrollen muss, bevor Befehle ausgeführt werden. Verfügbare Optionen sind 'center''top''bottom''nearest'bezeichnet, oder false, Wobei false deaktiviert das Scrollen.

Cypress JSON-Beispiel

Vorhin haben wir die verschiedenen Konfigurationen gesehen, die wir in unserem weitergeben können cypress.json Datei. Jetzt werden wir uns ein Beispiel ansehen, wie sie in unserem Projekt verwendet werden können.

Überschreiben von Standardwerten in der Datei cypress.json

Öffnen Sie in unserem VS-Code die cypress.json Datei. Wir überschreiben die defaultCommandTimeout Befehl an 8000.

{
    "defaultCommandTimeout" : 8000
}

So sieht es in unserem VS-Codeprojekt aus.

cypress.json-Datei

Durch Ändern der cypress.json Datei gilt sie für das gesamte Framework. Wir können dies überprüfen, indem wir zu unseren Cypress-Einstellungen navigieren. Es hat sich von einem Standardwert von geändert 4000 zu 8000

Standardwerte für Cypress-Einstellungen

Überschreiben von Standardwerten über das Testskript

Wir können die Standardwerte auch über unser Testskript manipulieren. Anstatt in die cypress.json Datei, wir übergeben sie in unserer Testdatei.


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

Auf diese Weise können wir die Standardwerte in unserer Testdatei überschreiben. Dies hat jedoch keine Auswirkungen auf Konfigurationsänderungen auf Framework-Ebene. Cypress räumt den Werten in Priorität ein cypress.json. Schließlich nimmt es die globalen Konfigurationen auf.

Cypress Fixture JSON-Array

Zypresse cy.fixture() ist eine Funktion, die einen festen Datensatz in eine Datei lädt. Wir können das Gerät als JSON verwenden, um beliebige Werte oder Arrays in die JSON-Datei zu laden. Lassen Sie uns zunächst verstehen, wie Sie auf die JSON-Datei in unserem Projekt zugreifen.

Meine JSON-Datei hat zwei Eigenschaften: Benutzername und Passwort. Mein JSON-Dateiname ist examples.json.

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

In unserer Spec-Datei greifen wir mit dem Befehl cy.fixture() und dem Konzept von . auf unser Fixture zu Aliase.

 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

Umgebungsvariablen werden in vielen Projekten in Organisationen verwendet. Wir verwenden Umgebungsvariablen

  • wenn Werte über verschiedene Maschinen hinweg dynamisch sind
  • wenn wir unter verschiedenen Umgebungen wie Staging, Test, Entwicklung, Produktion/Live testen möchten

In diesen Fällen müssen wir Umgebungsvariablen definieren. Wenn wir jedoch eine env-Variable in einer Spezifikationsdatei festlegen, wird sie nicht auf andere Spezifikationsdateien übertragen. Dies liegt daran, dass Cypress jede Spezifikationsdatei unabhängig ausführt. Auf diese Weise müssen wir env-Variablen separat konfigurieren.

Wir greifen auf unsere Umgebungsdateien über unsere Cypress JSON-Datei zu, dh cypress.json Datei. Daher müssen wir die Option in unserem zuweisen cypress.json Datei und verwendet sie in unserer Spezifikationsdatei. Tauchen wir also in unser Beispiel ein.

Wir können unsere Umgebungsvariablen in unserer Konfigurationsdatei festlegen oder cypress.env.json Datei.

Umgebungsvariable in der Datei cypress.json festlegen

Wir setzen die env-Eigenschaft durch ein Schlüssel-Wert-Paar. Alle unter dem Schlüsselwort übergebenen Werte env unter Umgebungsvariablen fallen, und Cypress übernimmt das Argument aus der env Stichwort. Die Syntax sieht wie folgt aus.

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

Wenn wir auf die zugreifen möchten env Variable in unserer Spezifikationsdatei, weisen wir sie wie unten beschrieben zu.

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

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

Wir werden die hinzufügen env Konfiguration in unserem Projekt und greift auf sie in unserer Spezifikationsdatei zu. In unserer cypress.json fügen Sie die folgende Konfiguration hinzu. Wir setzen unsere URL Eigentum und ordnen sie unserer URL zu. Hier, URL ist der Schlüssel, und https://lambdageeks.com/technology/ ist der Wert.

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

Da wir die Konfiguration deklariert haben, werden wir in unserer Spezifikationsdatei darauf zugreifen. Es sieht ungefähr so ​​aus wie unten. Wie oben erwähnt, verwenden wir Cypress.env() -Methode, um auf die env-Variable zuzugreifen.

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

    })
})

Umgebungsvariable in der Datei cypress.env.json festlegen

Wir können unsere Umgebungsvariable in unserer cypress env JSON-Datei zuweisen. Dafür sollten wir eine neue Datei namens . erstellen cypress.env.json an der Wurzel des Projekts. Wir werden die nicht benötigen env Stichwort; Stattdessen können wir direkt darauf zugreifen, indem wir das Schlüssel-Wert-Paar übergeben.

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

Schauen wir uns an, wie man sie in unserem cypress.env.json Datei.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
Erstellung der Datei cypress.env.json

Wie Sie oben sehen, haben wir eine neue Datei erstellt, cypress.env.json, und fügte unsere hinzu URL Eigenschaften. Der Zugriff auf die Umgebungsvariablen wäre die gleiche wie oben im vorherigen Abschnitt beschrieben.

Cypress JSON Reporter

Wie wir wissen, baut Cypress auf Mokka auf; Alle Reporter, die für Mocha gebaut wurden, können verwendet werden. Wir können Reporter in unserer JSON-Datei global in unserem . konfigurieren cypress.json Datei.

reporterspecHier können Sie den Reporter angeben, der während des Zypressenlaufs generiert werden soll. Es ist eingestellt auf spec als Standardreporter.
reporterOptionsnullHiermit werden die unterstützten Optionen für den Reporter angegeben.

Die oben genannten Optionen sind die standardmäßig im Reporter eingestellten Konfigurationen. zusätzlich spec Reporter ist standardmäßig eingestellt. Somit können wir im Reporter jeden Reporter einstellen, der mit Mocha kompatibel ist. reporterOptions besteht darin, die unterstützten Optionen abhängig von dem Reporter anzugeben, den wir konfigurieren.

Sehen wir uns an, wie Sie den Reporter in unserem konfigurieren cypress.json Datei.

Betrachten wir den Multi-Reporter Mochawesome als unseren Reporter. Wir werden zuerst den Reporter installieren und zu unserem hinzufügen cypress.json Datei.

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

Installieren Sie den Reporter, indem Sie den obigen Befehl in der Befehlszeile übergeben. Jetzt in unserem cypress.json fügen Sie die folgende Eigenschaft hinzu.

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

Wir werden jede der Eigenschaften im Detail verstehen.

Reporter: Der Name des Reporters, den wir in unserem Projekt konfigurieren

BerichtDir: Das Verzeichnis, in dem wir unsere Ergebnisse ausgeben werden.

überschreiben: Dieses Flag fordert zum Überschreiben der vorherigen Berichte auf.

html: Erzeugt den Bericht über den Abschluss des Tests.

JSON: Ob nach Abschluss des Tests eine JSON-Datei generiert werden soll.

Zypressen-Reporter in der Zypressen-JSON-Datei

Cypress package-lock.json

Die Paket-lock.json Die Datei wird automatisch für alle Vorgänge erstellt, wenn npm die Knotenmodule oder die Datei „package.json“ ändert. Wenn wir Optionen hinzufügen oder Installieren Sie alle neuen Abhängigkeiten zu unserem Cypress package-JSON-Datei, dann wird Cypress package-lock.json automatisch aktualisiert.

Cypess package.lock JSON file verfolgt jedes Paket und seine Version, sodass die Installationen bei jeder npm-Installation global gepflegt und aktualisiert werden. Wenn wir also in unserer Cypress-Paket-JSON-Datei die Version aktualisieren oder eine Abhängigkeit hinzufügen, wird auch package-lock.json aktualisiert, und wir möchten keine Änderungen daran vornehmen.

Cypress package-lock.json-Datei

Aishwarya Lakshmi

Ich bin ein begeisterter Tester und habe mehr als zwei Jahre Erfahrung im Testbereich. Ich teste leidenschaftlich gerne und liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. Ich schreibe gerne in meiner Freizeit Blogs auf die einfachste, aber effektive Art und Weise. Als Tester mag ich es, die Dinge perfekt zu machen, daher wünsche ich meinen Lesern ein perfektes Verständnis der Technologie. Ich halte mich über die neuen Technologien im Zusammenhang mit dem Testen auf dem Laufenden und verbringe Zeit damit, sie zu verstehen. Ich helfe den Studenten gerne, die Konzepte beim Testen zu verstehen. Verbinden wir uns über LinkedIn – https://www.linkedin.com/in/aishwarya-lakshmi-n-2a

Neueste Beiträge