---
title: "Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 2"
url: "https://www.dkd.de/de/blog/testen-leicht-gemacht-automatisierte-tests-mit-cypress-teil-2/"
description: "Schnell und einfach mit Cypress durchstarten? Wir zeigen Ihnen wie! In unserer Blogreihe. Testen leicht gemacht: Automatisierte Tests mit Cypress"
image: "https://www.dkd.de/fileadmin/_processed_/d/5/csm_Cypress_Blogbeitrag_Header_1dac986104.jpeg"
date: 2022-05-04
modified: 2026-10-09
keywords:
  - cypress
  - testen
  - leicht
  - monitoring
  - Deployment
  - Qualitätssicherungsprozesse
---

# Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 2

13.08.2020

 Lesezeit: 3 Minuten

 Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 2
================================================================

In unserem [vorherigen Blogbeitrag](https://www.dkd.de/de/blog/testen-leicht-gemacht-automatisierte-tests-mit-cypress-teil-1/ "Hier geht es zum Blogbeitrag: Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 1") 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.

  ![Screenshot: Ordner {your_project}/cypress/integration/examples in Cypress](https://www.dkd.de/fileadmin/_processed_/b/6/csm_Cypress_examples_99a02e19cc.jpeg "Screenshot: Ordner {your_project}/cypress/integration/examples in Cypress")

 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(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

});
```

        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(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    it(<span class="hljs-string">'I can see a blog if I click on "Blog" in the main menu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    });

});
```

        javascript
```

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

```

    ```
describe(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    it(<span class="hljs-string">'I can see a blog if I click on "Blog" in the main menu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

        cy.viewport(<span class="hljs-number">1920</span>, <span class="hljs-number">1045</span>);

    });

});
```

        javascript
```

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

```

    ```
describe(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    it(<span class="hljs-string">'I can see a blog if I click on "Blog" in the main menu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

        cy.viewport(<span class="hljs-number">1920</span>, <span class="hljs-number">1045</span>);

        cy.visit(<span class="hljs-string">'https://www.dkd.de/'</span>);

    });

});
```

        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(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    it(<span class="hljs-string">'I can see a blog if I click on "Blog" in the main menu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

        cy.viewport(<span class="hljs-number">1920</span>, <span class="hljs-number">1045</span>);

        cy.visit(<span class="hljs-string">'https://www.dkd.de/'</span>);

        cy.get(<span class="hljs-string">'nav ul li'</span>)

            .contains(<span class="hljs-string">'Blog'</span>)

            .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(<span class="hljs-string">'There is a blog on dkd.de'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

    it(<span class="hljs-string">'I can see a blog if I click on "Blog" in the main menu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

        cy.viewport(<span class="hljs-number">1920</span>, <span class="hljs-number">1045</span>);

        cy.visit(<span class="hljs-string">'https://www.dkd.de/'</span>);

        cy.get(<span class="hljs-string">'nav ul li'</span>)

            .contains(<span class="hljs-string">'Blog'</span>)

            .click();

        cy.url().should(<span class="hljs-string">'include'</span>, <span class="hljs-string">'/blog'</span>);

    });

});
```

        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:

```

    ```
{

  <span class="hljs-attr">"baseUrl"</span>: <span class="hljs-string">"https://www.dkd.de/"</span>

}
```

        json
```

 oder auch der Viewport, auf dem getestet werden soll:

```

    ```
{

<span class="hljs-attr">"baseUrl"</span>: <span class="hljs-string">"https://www.dkd.de/"</span>

<span class="hljs-string">"viewportHeight"</span>: <span class="hljs-number">1080</span>,

<span class="hljs-attr">"viewportWidth"</span>: <span class="hljs-number">1920</span>,

}
```

        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 <span class="hljs-attr">"Blog"</span> 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(<span class="hljs-string">'nav ul li'</span>)
```

        javascript
```

 Denn laut den Best Practices ([https://docs.cypress.io/guides/references/best-practices.html](https://docs.cypress.io/guides/references/best-practices.html "Schauen Sie sich jetzt die Best Practices von Cypress an.")) 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](https://www.dkd.de/de/blog/monitoring-deployment-und-qualitatssicherungsprozesse-der-dkd/ "Zum Blogbeitrag: Monitoring-, Deployment- und Qualitätssicherungsprozesse der dkd")
 [Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 1](https://www.dkd.de/de/blog/testen-leicht-gemacht-automatisierte-tests-mit-cypress-teil-1/ "Zum Blogbeitrag: Testen leicht gemacht: Automatisierte Tests mit Cypress | Teil 1")

### Kommentar schreiben

###  Kommentare

 Keine Kommentare

#### Tags

- [\#HTML](https://www.dkd.de/de/blog/tag/html/)