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