Im letzten Artikel haben wir gesehen, was Cypress ist, seine Architektur, den Installationsprozess und die Voraussetzungen für die Installation. Bevor wir jedoch mit dem Schreiben unserer Tests beginnen, müssen wir Cypress installieren. Klicken hier um die detaillierten Schritte zur Installation von Cypress zu erhalten.

Zypresse Beispiel

Dieser Artikel behandelt die Beispiel Zypresse, JSON-Beispiele, Variablen und Aliase und wie man Testfälle schreibt. Also lasst uns anfangen.

Inhaltsverzeichnis

Cypress JSON-Beispiel

Wenn wir unseren Cypress Test Runner öffnen, a cypress.json Konfigurationsdatei erstellt. Wir neigen dazu, das Snippet zu speichern, das eine Möglichkeit bietet, einige Eigenschaften zu implementieren und beizubehalten, die im Programm- oder Automatisierungscode bei der Ausführung helfen. Ebenso verfügt Cypress auch über eine JSON-Datei zum Speichern aller Werte, die wir als Konfigurationseigenschaften bereitstellen.

Schauen wir uns einige an Beispiele, die wir in unserem Cypress JSON konfigurieren können Datei.

Cypress hat bereits einige Standardkonfigurationswerte zugewiesen. Es gibt mehrere Optionen, die wir an unsere Anforderungen anpassen können. Wir können zum Beispiel die baseURL Eigentum in unserer cypress.json Datei. Jedes Mal, wenn wir das Skript ausführen, wird die baseURL festgelegt und ausgelöst.

Option	Standardwerte	Beschreibung
baseUrl	null	Diese Option kann als URL Präfix für die cy.request() or cy.besuch() Befehle.
watchForFileChanges	was immer dies auch sein sollte.	Diese Option ist standardmäßig auf "true" gesetzt. Es überwacht die Dateien auf Änderungen und startet sie neu, wenn Änderungen vorgenommen werden.

Unten sehen Sie den Snapshot, den wir in unseren Eigenschaften baseURL und watchForFileChanges geändert haben Cypress.json Datei.

Hinweis: Wir werden alle Optionen in der Cypress-Konfiguration später als separates Thema besprechen.

Zypresse öffnen

Vorhin haben wir gesehen, wie man ein Cypress-Projekt erstellt. Hier sehen wir, wie Sie den Cypress Test Runner öffnen und ausführen. Also lass uns eintauchen!

Wenn Sie Cypress über npm installiert haben, wurde es im Verzeichnis ./node_modules installiert. Daher können wir unsere öffnen Cypress Test Runner durch Übergabe eines npm-Befehls von dem Wurzel unseres Projektverzeichnisses.

Wir können Cypress auf eine der folgenden Arten öffnen

1. indem Sie den vollständigen Pfadbefehl eingeben

./node_modules/.bin/cypress open

2. indem Sie die Verknüpfung für npm bin . verwenden

$(npm bin)/cypress open

3. mit npx

Hier wird npx nur mit npm > v5.2 unterstützt, oder wir können es separat installieren.

npx cypress open

4. durch die Verwendung von Garn

yarn run cypress open

Jetzt werden wir sehen, wie Sie Cypress öffnen, indem Sie den vollständigen Pfadbefehl in unserem Terminal übergeben.

1. Sie müssen den oben in Punkt 1 erwähnten Befehl übergeben und Sie können Folgendes im Terminal sehen

2. Nach einem Moment können wir den Start des Cypress Test Runners sehen und können den Test Runner wie unten gezeigt sehen. Nachdem der Test Runner gestartet wurde, können Sie einige Beispieltestfälle sehen. Cypress hat in unserem Projektstamm einen Testordner erstellt, der uns bei der grundlegenden Einrichtung und dem Schreiben von Testfällen hilft.

Kommen wir nun zurück zu VS Code. Zuerst können Sie einige Ordnerstrukturen anzeigen, die aufgefüllt wurden. Lassen Sie uns nun jede der Ordnerstrukturen aufschlüsseln und sie im Detail betrachten.

Ordnerstruktur in Cypress

Wie wir sehen, hat Cypress in unserem Code-Editor eine Ordnerstruktur erstellt. Wir werden sie ausführlich besprechen.

Variablen und Aliase

Wir werden die Variablen und Aliase in Cypress im Detail diskutieren.

Wenn wir Cypress verstehen und lernen, kann es für uns schwierig sein, die Asynchrone API Natur auf Zypresse. Aber wie wir in Zukunft viele Beispiele sehen, würde es ein Kinderspiel werden. Viele moderne Browser verwenden asynchrone APIs und sogar Kernmodule von Node werden mit asynchronem Code geschrieben. Darüber hinaus ist asynchroner Code überall im Javascript-Code vorhanden. Daher werden wir uns die Rückgabewerte in Cypress ansehen.

Rückgabewerte in Cypress

Alle Cypress-Befehle sind in die Warteschlange gestellt und Lauf asynchron. Deshalb haben wir kann keine Rückgabewerte zuweisen oder mit ihnen interagieren aller Cypress-Befehle. Wir werden ein kleines Beispiel dafür sehen.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Verschlüsse

Über den oben genannten Befehl können wir nicht auf die Attribute der Schaltfläche zugreifen. Stattdessen können wir Cypress-Befehle liefern, indem wir .then() verwenden. Wir nennen diese schließungen.

.dann()

.then() hilft Ihnen, auf den Thread zuzugreifen, der aus dem vorherigen Befehl stammt. Wenn du verstanden hast native Versprechen, funktioniert .then() genauso mit Cypress. Wir können auch verschiedene Befehle in .then() verschachteln. Jeder verschachtelte Befehl kann auf den vorherigen Befehl in der Schleife zugreifen. Wir werden das an einem Beispiel sehen.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Wir haben benutzt Verschlüsse im obigen Beispiel ermöglicht es uns, die Referenz des vorherigen Befehls in der Schleife zu behalten.

Variablen

Normalerweise neigen wir dazu, einer Variablen einen Wert zuzuweisen. Aber in Cypress verwenden wir kaum const, var und let. Wenn wir Closures verwenden, können wir auf die zurückgegebenen Objekte zugreifen, ohne sie einer Variablen zuzuweisen.

Aber es gibt einige Fälle, in denen wir eine Variable deklarieren können, wenn die Zustand des Objekts ändert sich (veränderliche Objekte). Wenn wir zum Beispiel einen Vergleich benötigen Objekt Um den vorherigen Wert zu vergleichen, deklarieren wir sie in einer Variablen, um sie mit dem nächsten Wert zu vergleichen. Schauen wir uns hierfür ein Beispiel an.

<button>increment</button>

You clicked button <span id="num">0</span> times

Hier erhöht sich die Spanne mit der Zählung 0 jedes Mal, wenn wir auf die Schaltfläche klicken. Das Schaltflächenobjekt neigt also dazu, seinen Zustand jedes Mal zu ändern.

Schauen wir uns nun an, wie wir dies einer Variablen in unserem Cypress-Code zuweisen können.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Da span seinen Zustand jedes Mal ändert, wenn wir auf die Schaltfläche klicken, können wir ihn einer Variablen zuweisen, um seinen aktuellen und vorherigen Zustand zu vergleichen. Nur bei veränderlichen Objekten benötigen wir Variablen und verwenden const ist ein guter Ansatz.

Aliases

Zuvor haben wir gesehen, was Variablen und ihre Einschränkungen in Cypress sind. Um diese Einschränkung zu überwinden, kommt Aliase ins Spiel. Alias ​​ist eines der mächtigen Konstrukte in Cypress. Wir werden dies anhand von Beispielen im Detail untersuchen.

Im Allgemeinen können Aliase Ihnen helfen, als Variable zu arbeiten. Es gibt jedoch einige Anwendungsfälle, in denen ein Alias ​​anstelle einer Variablen hilfreich sein kann.

1. DOM-Elemente wiederverwenden

Wir können DOM-Elemente mit einem Alias ​​versehen und später zur Wiederverwendung darauf zugreifen. Aliase überwinden auch die Einschränkungen von .dann() Befehl.

2. Kontext teilen

Einfach ausgedrückt bedeutet das Teilen von Kontext das Teilen des Objekts zwischen den Hooks und den Tests. Der Hauptanwendungsfall für das Teilen von Kontext ist der Umgang mit cy.fixture – das heißt, einen festen Datensatz in eine Datei zu laden.

Wie greife ich auf Aliasse zu?

Hier erfahren Sie, wie Sie auf Aliase zugreifen. Wir werden die verwenden .as() Befehl, um das Element für die spätere Verwendung zuzuweisen. Der erforderliche Parameter ist der Pseudonym. Der Name des Alias ​​wird als Referenz innerhalb von a . verwendet cy.get() or cy.wait() Verwendung der @ Präfix.

Wir werden uns ein Beispiel für den Zugriff auf Aliase ansehen.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

In der ersten Zeile erhalten wir die ID des user_login von DOM. Wir verwenden dann .as() und Deklarieren mit einem Benutzernamen. In der zweiten Zeile greifen wir auf unseren Alias ​​mit . zu @ Symbol und die Ausführung der tippe Maßnahmen.

Zypresse-Testbeispiel

Wir werden unseren ersten Testfall mit Cypress schreiben. Es ist sehr einfach und leicht. Aber vorher werden wir uns die Konstrukte des Cypress-Tests ansehen.

Grundlegende Zypressenkonstrukte

Cypress hat die Mocha-Syntax für seine Testfälle übernommen und nutzt alle Möglichkeiten, die Mocha bietet. Im Folgenden sind die grundlegenden Cypress-Konstrukte aufgeführt, die für unsere Testfälle gemeinsam verwendet werden.

• Beschreiben() – fasst alle Testfälle zu einem einzigen größeren Test zusammen und gruppiert sie. Es benötigt zwei Parameter – die Beschreibung des Tests und eine Callback-Funktion.
• es() – schreiben wir individuelle Testfälle in unseren it()-Block. Dieser Block nimmt auch zwei Parameter an – was ein Test macht, und der zweite Parameter ist die Callback-Funktion.
• nach dem() – dies wird nach allen Tests in der Spezifikationsdatei ausgeführt.
• nach jedem() – dies läuft nach jedem einzelnen Testfall ab.
• Vor() – wird vor allen Tests in der Spezifikationsdatei ausgeführt.
• vorEach() – führt vor jedem einzelnen Testfall aus.

Wie schreibt man einen Testfall?

Bevor wir beginnen, sollten wir wissen, was ein Testfall ist, ihn schreiben und wie die Schritte für einen einfachen Testfall sind.

1. Voraussetzung – Der Status der Anwendung, die wir testen werden.

2. Action – Wir führen eine Aktion in der Anwendung aus.

3. Behauptung – Wir behaupten oder validieren das geänderte Verhalten in Bezug auf unser Handeln.

Wir werden überlegen LamdaGeeks Anwendung für unsere Testbeispiele. Mit dem gleichen Verfahren werden wir erwägen, das folgende Szenario zu automatisieren

1. Besuchen Sie die Website https://lambdageeks.com/

2. Überprüfen Sie, ob der Titel Home – Lambda Geeks . ist
Zypresse verwendet cy als seine Typdefinition. Wir werden die anhängen cy Befehl zum Aufrufen beliebiger Methoden.
Zuerst erstellen wir eine neue Datei in unserem Code-Editor.

1. Erstellen Sie einen neuen Ordner mit dem Namen Demo unter dem Integrationsordner.

2. Erstellen Sie im Demo-Ordner eine neue Datei Beispiel.js. Wir werden unseren ersten Testfall in diese Datei schreiben.

Beginnen wir nun mit dem Schreiben unserer Testfälle!

1. 1. Zuerst besuchen wir die Seite mit dem Besuch() Methode auf Zypresse. Dieser Befehl navigiert zu der von uns bereitgestellten URL. Wir werden sie in einen describe()- und it()-Block einschließen.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Sobald die Bewerbung geöffnet ist, validieren wir den Titel mit dem get() Methode auf Zypresse .get() holt alle CSS-Selektoren aus dem DOM.

Wir greifen auf den Titel über die . zu title() -Methode, und wir behaupten mit der Chai-Bibliothek mit dem Befehl sollte, indem wir den ersten Parameter als gleich übergeben, kurz gesagt eq. Der zweite Parameter ist der erwartete String.

 cy.title().should('eq','Home - Lambda Geeks')

Hurra! Mit zwei einfachen Schritten haben wir unseren Cypress-Testfall geschrieben.

Hier ist der vollständige Code unseres Testfalls

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});

Beispiel für die Anmeldung bei Cypress

Wir werden Beispiele sehen, wie Sie eine Anmeldeseite mit Cypress automatisieren. Wie wir bereits gesehen haben, ist das Schreiben eines Testfalls in Cypress einfach. Lassen Sie uns nun dazu übergehen, die Werte im Textfeld und die Assertionen festzulegen.

1. Wir besuchen die Website https://demo.applitools.com/ durch die Nutzung cy.visit Befehl.

 cy.visit('https://demo.applitools.com/')

2. Geben Sie den Benutzernamen mit dem Befehl type in das Feld Benutzername ein. Wir übergeben den Benutzernamen als String im Typ als Parameter.

 cy.get('#username').type('test123')

3. Ebenso schreiben wir den gleichen Befehl, um das Passwort einzugeben

 cy.get('#password').type('123')

4. Jetzt klicken wir mit dem auf den Login-Button click() Methode auf Zypresse.

cy.get('#log-in').click();

5. Nach dem Einloggen landen wir auf der App-Seite. Wir behaupten also, dass die URL die /app Erweiterung mit dem .include() Stichwort in chai. Der erste Parameter von sollte ist das Schlüsselwort, das wir bestätigen, und der zweite Parameter ist das erwartete Ergebnis.

cy.url().should('include', '/app')

Wir haben in fünf einfachen Schritten einen vollständigen Code für eine Login-Funktionalität geschrieben. Unten ist der vollständige Code für Ihre Referenz.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Lösungen für häufige Probleme beim Starten von Cypress & FAQ

Es kann einige allgemeine Probleme geben, mit denen wir konfrontiert werden, wenn wir versuchen, Cypress zu starten. Wir werden einige der häufigsten Probleme besprechen.

1. Kann 'Cypress'-Befehl während des Open Cypress-Befehls nicht finden

Nach der Installation sollten wir den Befehl open cypress aus dem Stammverzeichnis des Projektverzeichnisses übergeben. Sie haben beispielsweise ein Projekt namens CypressProject erstellt; du solltest das bestehen npm init Befehl, indem Sie zum Ordner CypressProject navigieren. Sie können navigieren, indem Sie den folgenden Befehl im Terminal eingeben

cd CypressProject

Sobald Sie an der Wurzel des Projekts sind, übergeben Sie die npm init Befehl zum Herunterladen der Abhängigkeiten.

Um nun Cypress zu öffnen, versuchen einige Leute, zum zu navigieren /node_modules Ordner und ./bin und übergeben Sie dann den Befehl cypress open. Dies funktioniert jedoch nicht. Geben Sie stattdessen den gesamten Befehl zum Öffnen aus dem Stammverzeichnis des Projektverzeichnisses ein, um Cypress zu öffnen.

./node_modules/.bin/cypress open

Seien Sie auch vorsichtig mit dem Schrägstrich '/'. Geben Sie dies immer an '/' Zypresse zu öffnen.

2. Zypresse kann nicht geladen werden, da das Ausführen von Skripten hier deaktiviert ist System

Wenn Sie Cypress in Windows installieren, kann es manchmal zu dem oben genannten Fehler kommen. Es liegt an einer Sicherheitsausnahme. Wir können diesen Fehler beheben, indem wir den folgenden Befehl in PowerShell übergeben.

Set-ExecutionPolicy RemoteSigned

Schritte zum Reproduzieren:

• Öffnen Sie die PowerShell
• Führen Sie diesen Befehl aus Set-ExecutionPolicy RemoteSigned
• Art Yes
• Öffnen Sie nun die Zypresse, indem Sie vorbeigehen ./node_modules/.bin/cypress open. Test Runner wird jetzt geöffnet.

FAQ

1. Welche Betriebssysteme unterstützt Cypress?

Zypresse unterstützt Mac, Windows und Linux Betriebssysteme.

2. Unterstützt Cypress die Automatisierung in nativen mobilen Apps?

Cypress wird niemals auf einer nativen mobilen App ausgeführt werden können. Aber wir können mobile Anwendungen testen, die in einem Browser wie Iconic Frameworks geschrieben sind.

3. Ob Cypress nur Javascript-basierte Anwendungen unterstützt?

Nein! Cypress kann mit jedem Webbrowser interagieren, der in Sprachen wie Ruby on Rails, Node, PHP, C# geschrieben ist. Aber wir werden unsere Tests in Javascript schreiben. Ansonsten kann Cypress mit jedem Front-End, Back-End, jeder Sprache und jedem Framework interagieren.