M

MLOG

Deutsch

Ein umfassender Leitfaden zum Cypress E2E-Testing-Framework: Installation, Testentwicklung, Debugging, CI/CD-Integration und Best Practices.

Cypress: Der ultimative Leitfaden für End-to-End-Tests von Webanwendungen

In der heutigen, sich schnell entwickelnden Webentwicklungslandschaft ist die Sicherstellung der Qualität und Zuverlässigkeit von Webanwendungen von größter Bedeutung. End-to-End (E2E)-Tests spielen eine entscheidende Rolle bei der Überprüfung, ob alle Komponenten einer Anwendung aus der Perspektive des Benutzers nahtlos zusammenarbeiten. Cypress hat sich als führendes E2E-Testing-Framework etabliert und bietet eine entwicklerfreundliche Erfahrung, leistungsstarke Funktionen und eine hervorragende Performance. Dieser umfassende Leitfaden führt Sie durch alles, was Sie wissen müssen, um mit Cypress zu beginnen und Ihre Webanwendungen effektiv zu testen.

Was ist Cypress?

Cypress ist ein Frontend-Testing-Tool der nächsten Generation, das für das moderne Web entwickelt wurde. Im Gegensatz zu traditionellen Test-Frameworks, die Tests in einem Browser ausführen, arbeitet Cypress direkt im Browser, was Ihnen eine beispiellose Kontrolle und Einblick in das Verhalten Ihrer Anwendung gibt. Es ist so konzipiert, dass es schnell, zuverlässig und einfach zu bedienen ist, was es zu einer beliebten Wahl bei Entwicklern und QA-Ingenieuren weltweit macht. Cypress ist in JavaScript geschrieben und wird innerhalb des Browsers ausgeführt, was es sehr performant macht und einen unvergleichlichen Zugriff auf die Interna der Anwendung bietet.

Wichtige Vorteile der Verwendung von Cypress

Installation und Einrichtung

Der Einstieg in Cypress ist unkompliziert. So installieren Sie es:

  1. Voraussetzungen: Stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf Ihrem System installiert sind. Sie können sie von der offiziellen Node.js-Website herunterladen.
  2. Cypress installieren: Öffnen Sie Ihr Terminal oder Ihre Kommandozeile, navigieren Sie zu Ihrem Projektverzeichnis und führen Sie den folgenden Befehl aus:
    3. npm install cypress --save-dev
  3. Cypress öffnen: Sobald die Installation abgeschlossen ist, können Sie den Cypress Test Runner mit folgendem Befehl öffnen:
    4. npx cypress open

    Dieser Befehl startet den Cypress Test Runner, der eine grafische Oberfläche zum Ausführen und Debuggen Ihrer Tests bietet.

Ihren ersten Cypress-Test schreiben

Erstellen wir einen einfachen Test, um zu überprüfen, ob die Startseite einer Website korrekt geladen wird. Erstellen Sie eine neue Datei mit dem Namen `example.cy.js` im Verzeichnis `cypress/e2e` Ihres Projekts.


// cypress/e2e/example.cy.js

describe('Mein erster Test', () => {
  it('Besucht die Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Lassen Sie uns diesen Test aufschlüsseln:

Führen Sie diesen Test im Cypress Test Runner aus, um ihn in Aktion zu sehen. Sie sollten sehen, wie der Browser zur Cypress Kitchen Sink-Website navigiert, auf den Link "type" klickt und die URL überprüft.

Cypress-Befehle

Cypress bietet eine breite Palette von Befehlen zur Interaktion mit Ihrer Anwendung. Hier sind einige der am häufigsten verwendeten Befehle:

Dies sind nur einige der vielen in Cypress verfügbaren Befehle. Eine vollständige Liste der Befehle und ihrer Optionen finden Sie in der Cypress-Dokumentation.

Assertions in Cypress

Assertions werden verwendet, um das erwartete Verhalten Ihrer Anwendung zu überprüfen. Cypress bietet eine umfangreiche Sammlung integrierter Assertions, mit denen Sie den Zustand von Elementen, die URL, den Titel und mehr überprüfen können. Assertions werden nach Cypress-Befehlen mit der Methode `.should()` verkettet.

Hier sind einige gängige Beispiele für Assertions:

Sie können auch benutzerdefinierte Assertions erstellen, die Ihren spezifischen Anforderungen entsprechen.

Best Practices für das Schreiben von Cypress-Tests

Die Einhaltung von Best Practices kann Ihnen helfen, wartbarere, zuverlässigere und effizientere Cypress-Tests zu schreiben. Hier sind einige Empfehlungen:

Fortgeschrittene Cypress-Techniken

Stubbing und Mocking

Cypress ermöglicht es Ihnen, Netzwerkanfragen und -antworten zu stubben, wodurch Sie verschiedene Szenarien simulieren und die Fehlerbehandlung Ihrer Anwendung testen können. Dies ist besonders nützlich für das Testen von Funktionen, die auf externe APIs oder Dienste angewiesen sind.

Um eine Netzwerkanfrage zu stubben, können Sie den Befehl `cy.intercept()` verwenden. Der folgende Code stubbt beispielsweise eine GET-Anfrage an `/api/users` und gibt eine Mock-Antwort zurück:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Sie können dann mit `cy.wait('@getUsers')` auf die abgefangene Anfrage warten und überprüfen, ob Ihre Anwendung die Mock-Antwort korrekt verarbeitet.

Arbeiten mit Local Storage und Cookies

Cypress bietet Befehle zur Interaktion mit Local Storage und Cookies. Sie können diese Befehle verwenden, um Local Storage und Cookies in Ihren Tests zu setzen, abzurufen und zu löschen.

Um ein Local-Storage-Element zu setzen, können Sie den Befehl `cy.window()` verwenden, um auf das Window-Objekt zuzugreifen, und dann die Methode `localStorage.setItem()` verwenden. Zum Beispiel:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Um ein Local-Storage-Element abzurufen, können Sie den Befehl `cy.window()` verwenden und dann die Methode `localStorage.getItem()` nutzen. Zum Beispiel:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Um ein Cookie zu setzen, können Sie den Befehl `cy.setCookie()` verwenden. Zum Beispiel:


cy.setCookie('myCookie', 'myCookieValue')

Um ein Cookie abzurufen, können Sie den Befehl `cy.getCookie()` verwenden. Zum Beispiel:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Umgang mit Datei-Uploads

Cypress bietet ein Plugin namens `cypress-file-upload`, das Datei-Uploads in Ihren Tests vereinfacht. Um das Plugin zu installieren, führen Sie den folgenden Befehl aus:

npm install -D cypress-file-upload

Fügen Sie dann die folgende Zeile zu Ihrer Datei `cypress/support/commands.js` hinzu:


import 'cypress-file-upload';

Sie können dann den Befehl `cy.uploadFile()` verwenden, um eine Datei hochzuladen. Zum Beispiel:


cy.get('input[type="file"]').attachFile('example.txt')

Arbeiten mit IFrames

Das Testen von IFrames kann schwierig sein, aber Cypress bietet eine Möglichkeit, mit ihnen zu interagieren. Sie können den Befehl `cy.frameLoaded()` verwenden, um auf das Laden eines IFrames zu warten, und dann den Befehl `cy.iframe()` verwenden, um das Document-Objekt des IFrames zu erhalten.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress und Continuous Integration/Continuous Deployment (CI/CD)

Die Integration von Cypress in Ihre CI/CD-Pipeline ist entscheidend für die Sicherstellung der Qualität Ihrer Anwendung. Sie können Cypress-Tests im Headless-Modus in Ihrer CI/CD-Umgebung ausführen. So geht's:

  1. Cypress installieren: Stellen Sie sicher, dass Cypress als Abhängigkeit in Ihrem Projekt installiert ist.
  2. CI/CD konfigurieren: Konfigurieren Sie Ihre CI/CD-Pipeline so, dass Cypress-Tests nach jedem Build ausgeführt werden.
  3. Cypress headless ausführen: Verwenden Sie den Befehl `cypress run`, um Cypress-Tests im Headless-Modus auszuführen.

Beispiel für eine CI/CD-Konfiguration (mit GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Diese Konfiguration führt Cypress-Tests aus, wann immer Code in den `main`-Branch gepusht oder ein Pull-Request gegen den `main`-Branch erstellt wird. Die `cypress-io/github-action` vereinfacht den Prozess der Ausführung von Cypress-Tests in GitHub Actions.

Debuggen von Cypress-Tests

Cypress bietet hervorragende Debugging-Tools, die Ihnen helfen, Probleme in Ihren Tests zu identifizieren und zu beheben. Hier sind einige Tipps zum Debuggen von Cypress-Tests:

Cypress im Vergleich zu anderen Test-Frameworks

Obwohl Cypress ein leistungsstarkes End-to-End-Testing-Framework ist, ist es wichtig zu verstehen, wie es sich von anderen beliebten Optionen unterscheidet. Hier ist ein kurzer Überblick:

Die Wahl des Frameworks hängt von den spezifischen Bedürfnissen und Anforderungen Ihres Projekts ab. Cypress ist eine ausgezeichnete Wahl für moderne Webanwendungen, die schnelles, zuverlässiges und entwicklerfreundliches End-to-End-Testing erfordern.

Praxisbeispiele für Cypress in Aktion

Lassen Sie uns einige Praxisbeispiele untersuchen, wie Cypress zum Testen verschiedener Arten von Webanwendungen verwendet werden kann:

Testen einer E-Commerce-Anwendung

Sie können Cypress verwenden, um verschiedene Benutzerabläufe in einer E-Commerce-Anwendung zu testen, wie zum Beispiel:

Hier ist ein Beispiel für einen Cypress-Test, der überprüft, ob ein Benutzer erfolgreich ein Produkt in seinen Warenkorb legen kann:


it('Fügt ein Produkt zum Warenkorb hinzu', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testen einer Social-Media-Anwendung

Sie können Cypress verwenden, um Benutzerinteraktionen in einer Social-Media-Anwendung zu testen, wie zum Beispiel:

Hier ist ein Beispiel für einen Cypress-Test, der überprüft, ob ein Benutzer erfolgreich einen neuen Beitrag erstellen kann:


it('Erstellt einen neuen Beitrag', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hallo, Welt!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hallo, Welt!')
})

Testen einer Banking-Anwendung

Für Banking-Anwendungen kann Cypress verwendet werden, um kritische Funktionalitäten zu testen, wie zum Beispiel:

Ein Test zur Überprüfung einer Geldüberweisung könnte so aussehen (mit entsprechendem Stubbing aus Sicherheitsgründen):


it('Überweist erfolgreich Geld', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Fazit

Cypress ist ein leistungsstarkes und vielseitiges End-to-End-Testing-Framework, das Ihnen helfen kann, die Qualität und Zuverlässigkeit Ihrer Webanwendungen sicherzustellen. Seine entwicklerfreundliche API, leistungsstarke Funktionen und hervorragende Performance machen es zu einer beliebten Wahl bei Entwicklern und QA-Ingenieuren weltweit. Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie effektive Cypress-Tests schreiben, die Ihnen helfen, Fehler frühzeitig im Entwicklungsprozess zu erkennen und Ihren Benutzern qualitativ hochwertige Software zu liefern.

Da sich Webanwendungen ständig weiterentwickeln, wird die Bedeutung von End-to-End-Tests nur zunehmen. Die Einführung von Cypress und die Integration in Ihren Entwicklungsworkflow werden Sie befähigen, robustere, zuverlässigere und benutzerfreundlichere Weberfahrungen zu schaffen.