Lesezeit: 3 Minuten

Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 2

In unserem vorherigen Blogbeitrag haben wir Ihnen gezeigt, warum wir uns für Cypress entschieden haben. Jetzt möchten wir Ihnen zeigen, wie schnell und einfach man in Cypress einsteigen kann. 

Installation

Cypress lässt sich ganz einfach per npm oder yarn installieren.

    $ npm install cypress –save-dev

$ yarn add cypress --dev
    
        javascript
    

Im Projektordner kann nun cypress open per

    $(npm bin)/cypress open
    
        javascript
    

oder alternativ

    $ yarn run cypress open
    
        javascript
    

aufgerufen werden, und schon erscheint das Interface. In dem Ordner {your_project}/cypress/integration/examples befinden sich jetzt Testbeispiele, an denen man sich orientieren kann.

Der erste Test

Nun kann direkt losgelegt werden. Mit

    $ touch {your_project}/cypress/integration/sample_spec.js
    
        javascript
    

kann die erste Testdatei erstellt werden. Diese erscheint bereits im Interface. Klickt man darauf, wird der Browser aufgerufen.

Wir möchten nun einen Test schreiben, der überprüft, ob es auf unserer Webseite einen Blog gibt. Dazu rufen wir die Startseite auf, suchen den Navigationspunkt „Blog“, klicken auf diesen und werden dann hoffentlich auf die Seite des Blogs weitergeleitet.

Jeder Test gehört in einen „describe“-Block.

    describe('There is a blog on dkd.de', function() {

});
    
        javascript
    

Der Block besteht aus einem string, der den Test beschreibt, und einer callback function, die den eigentlichen Test umschließt.

Dann wird beschrieben, was der Test tun soll („it“).

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

    });

});
    
        javascript
    

Mit „viewport“ wird der Viewport festgelegt, in dem getestet werden soll.

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

        cy.viewport(1920, 1045);

    });

});
    
        javascript
    

Im nächsten Schritt wird die Seite festgelegt, die getestet werden soll(„visit“). 

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

        cy.viewport(1920, 1045);

        cy.visit('https://www.dkd.de/');

    });

});
    
        javascript
    

Jetzt überprüfen wir, ob das HTML-Element „nav ul li“ den Text "Blog" enthält („contains“), also ob es einen Navigationspunkt mit dem Titel "Blog" gibt. Auf diesen wird geklickt („click“).

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

        cy.viewport(1920, 1045);

        cy.visit('https://www.dkd.de/');

        cy.get('nav ul li')

            .contains('Blog')

            .click();

    });

});
    
        javascript
    

Ob man nun zur richtigen Url weitergeleitet wird, kann man beispielsweise testen, indem man überprüft, ob die Url "blog" enthält („include“). 

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

        cy.viewport(1920, 1045);

        cy.visit('https://www.dkd.de/');

        cy.get('nav ul li')

            .contains('Blog')

            .click();

        cy.url().should('include', '/blog');

    });

});
    
        javascript
    

Klickt man jetzt auf den Test, kann man im Interface beobachten, wie dieser vollzogen wird.

Konfiguration

In der cypress.json befindet sich die Konfiguration für Cypress. Dort kann beispielsweise eine BaseUrl festgelegt werden:

    {

  "baseUrl": "https://www.dkd.de/"

}
    
        json
    

oder auch der Viewport, auf dem getestet werden soll: 

    {

"baseUrl": "https://www.dkd.de/"

"viewportHeight": 1080,

"viewportWidth": 1920,

}
    
        json
    

Dann sieht unser Test folgendermaßen aus: 

    describe('There is a blog on dkd.de', function() {

    it('I can see a blog if I click on "Blog" in the main menu', function() {

        cy.visit('/');

        cy.get('nav ul li')

            .contains('Blog')

            .click();

        cy.url().should('include', '/blog');

    });

});
    
        json
    

Best Practices

Was in unserem Beispiel nicht optimal gelöst ist, ist folgende Stelle: 

    cy.get('nav ul li')
    
        javascript
    

Denn laut den Best Practices (https://docs.cypress.io/guides/references/best-practices.html) von Cypress, die wir jedem ans Herz legen, ist es am sinnvollsten, data-* Attribute als Selektor zu nutzen, da diese nicht von CSS oder JS Änderungen betroffen sind.

Fazit

Wie dieses Beispiel zeigt, können mit Javascript-Kenntnissen sehr leicht Tests mit Cypress erstellt werden. In unserem Beispiel haben wir nur einen Bruchteil der Funktionen von Cypress genutzt und sind damit schon weit gekommen. Beispielsweise kann man mit Cypress Screenshots erstellen oder eigene commands, um Code-Wiederholungen zu vermeiden. 

Einen Rückblick auf unsere letzten beiden Blogbeiträge gibt es unter:
Monitoring-, Deployment- und Qualitätssicherungsprozesse der dkd
Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 1