Headerbild Blogbeitrag Cypress
cypresscommandHTMLviewportcodetesttestingurl

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

Im Projektordner kann nun cypress open per

$(npm bin)/cypress open

oder alternativ

$ yarn run cypress open

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

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

});

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

    });

});

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

    });

});

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

    });

});

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

    });

});

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

    });

});

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/"

}

oder auch der Viewport, auf dem getestet werden soll: 

{

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

"viewportHeight": 1080,

"viewportWidth": 1920,

}

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

    });

});

Best Practices

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

cy.get('nav ul li')

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

Kommentar schreiben

Ich willige in die Speicherung meiner Daten ein.*

Hinweise und weitere Informationen zu der von Ihnen gegebenen Einwilligung zur Speicherung der oben eingegebenen Daten zum Zweck der Kontaktaufnahme und Ihrem Widerrufsrecht erhalten Sie in den Datenschutzhinweisen.

* Diese Felder sind Pflichtfelder