Jeder der mal mit komponentenbasiertem Programmieren angefangen hat, kennt die Situation. Man schreibt eine Komponente, die auf den ersten Blick funktioniert, dann aber beim Aufruf unerwartete Fehler aufweist. In der Entwicklungsphase ist dies ganz natürlich, aber wenn die Anwendung dem Kunden übergeben bzw. Endnutzer zur Verfügung gestellt wird und es zum Knall kommt, ist es katastrophal für die Reputation der eigenen Firma.

Jetzt sitzt du da und musst mehrere 1000 Elemente testen, die bei jeder Änderung sich gegenseitig beeinflussen. Testvorgänge mehrmals manuell auszuführen ist zeit- und nervenraubend.

Abhilfe schafft das End-to-End Test-Framework Cypress, welches speziell für das Testing von Web-Applikationen entwickelt wurde.

Das Besondere an Cypress ist, dass alles automatisiert abläuft. Manuelles hin her klicken gehört der Vergangenheit an, wenn das Testsetup ordentlich umgesetzt ist.

Eine ausführliche Featurebeschreibung könnt ihr unter: https://docs.cypress.io/guides/overview/why-cypress.html#Our-mission nachlesen

Mit Cypress starten

Cypress installieren

Zuallererst navigieren wir im Terminal in unseren Projektordner und installieren dort anschließend alle nötigen NPM Pakete:

$ cd/your/project/path

Mit npm:

$ npm install cypress --save-dev

Mit yarn:

$ yarn add cypress --dev

Cypress öffnen

Mit npm:

$ npx cypress open

Mit yarn:

$ yarn run cypress open

Cypress Benutzeroberfläche

Das Hauptmenü sollte in etwa so aussehen:

Wie du sehen kannst, liefert das Tool bereits viele fertig geschriebene Beispiele. Um zu prüfen, ob alles funktioniert, kannst du der Einfachheit halber auf ein Bespieltest klicken und es öffnet sich ein neues Fenster, wo der gewählte Test ausgeführt wird.

Der Test-Runner von Cypress öffnet sich und sollte in etwa so aussehen:

Die Ersten Schritte

In diesem Abschnitt werde ich euch eine kleine Zusammenfassung geben, was ihr für den Start wissen solltet.

1. Testdatei erstellen

  • Alle Test-Files kommen in dem Ordner: cypress/intergration
  • Namenkonvention: fileName_spec.js oder fileName.spec.js
  • describe(), it(), context() und specify() beinhalten die auszuführende Testbefehle und ihr könnt damit auch euer Test strukturieren und ein Name geben.

Dateistruktur an einem Bespiel:

// -- Start: Our Application Code --
function add (a, b) {
  return a + b
}
// -- End: Our Application Code --

// -- Start: Our Cypress Tests --
describe('Unit test our math functions', function() {
  context('math', function() {
    it('can add numbers', function() {
      expect(add(1, 2)).to.eq(3)
    })
})
// -- End: Our Cypress Tests --

2. Test schreiben

Sobald ihr die Test-File angelegt habt, aktualisiert Cypress automatisch die Testliste und euer Test sollte im Menü auswählbar sein.

In diesem Abschnitt werden die grundlegenden Funktionen gezeigt.

Test Website besuchen: cy.visit()

Diese Funktion überprüft den Link und gibt ein true zurück, falls ein 2XX Status wie 200 zurückkommt. Anderenfalls wird ein false zurückgegeben und der Test schlägt fehl.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
})
  • Wie ihr sehen könnt werden die Befehle in dem Commando Log als Großbuchstaben angezeigt. Hier in unseren Beispiel VISIT.
  • Ein Klick darauf, wird das angesprochene Element in Funktion visuell angezeigt.
  • Alle Test werden als eine Timeline dargestellt und ihr könnt dadurch die Zeit “zurückspringen” und genau schauen, wann und wo der Test fehlgeschlagen hat.

Elemente abfragen

Im Cypress können wir ein Element aus unsere Test-Website abfragen und herauspicken (Query).

Die gängigen Funktionen dafür sind:

contains(content) – Gibt das DOM-Element zurück, dass den entsprechenden innerText enthält.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test contain PHMU slogan', function() {
    cy.contains('Unser Herz schlägt digital')
  })
})

get(selector) – Gibt das das DOM-Element zurück, dass mit dem Selektor ausgewählt wurde.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test contain PHMU slogan', function() {
    cy.get('img[class=image]')
    //Sucht ein img element mit der CSS-Klasse image
  })
})

Mit Elementen interagieren

Nachdem ihr im vorherigen Schritt die Elemente abgefragt haben, ist es auch möglich mit den Elementen zu interagieren. Falls eine Interaktion mit einem Element nicht möglich ist, wird der Test fehlgeschlagen.

type()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('input[id="firstname"]').type('Tung')
  })
})

click()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('button[id="submit"]').click()
  })
})

select()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('select[id="title"]').select("Doctor")
  })
})

Assertion

Mit should() kannst du überprüfen ob ein Element das ist, welches du erwartest. Als Beispiel möchten wir sicherstellen, dass die aktuelle URL die erwartete URL ist.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test workshop link', function() {
    cy.get(a[href="/workshop"]).click
    cy.url().should('include', '/workshop')
  })
})

In diesem Blog habe ich euch das nötigste mitgegeben, um euch auf Cypress aufmerksam zu machen. Es ist auch möglich Serveranfragen zu testen und zu validieren oder das Terminal auszulesen und nach Fehlern zu testen. Cypress ist sehr umfangreich und bietet viele Möglichkeit, sein Web-Interface auf Herz und Nieren zu testen..

Wie ich bereits erwähnt habe, empfehle ich euch wärmsten die Dokumentation. Diese beinhaltet neben der guten Dokumentation auch Best Practices für ein effektives Testing von Web-Applikation.

Links