Custom Commands mit Cypress

In unserem letzten Blog-Artikel zum Thema Cypress haben wir eine Beispielanwendung gebaut und zu dieser passende Cypress Tests geschrieben. Nun wollen wir untersuchen, wie auch komplexere Anwendungen mit Cypress getestet werden können. Dazu schauen wir uns ein Werkzeug an um lesbareren, wiederverwendbaren und performanten Code zu schreiben: Custom Commands/Benutzerdefinierte Befehle.

Befehle in Cypress

Die Beispielanwendung

Unsere Beispielanwendung aus dem letzten Blogartikel besteht nur aus einem Knopf und einem Zähler, der sich bei jedem Knopfdruck um eins erhöht hat. Wir erweitern sie nun um ein Textfeld. In das Textfeld gibt der Anwender eine Zahl ein, die auf Knopfdruck auf unseren Zähler addiert wird. Als Standardwert verwenden wir eine Eins.

layout.component.html

<p id="counter" class="counter">{{counter}}</p>
<mat-form-field appearance="fill" class="text-field">
    <textarea matInput id="text-field" placeholder="1"
              [formControl]="textFormControl"></textarea>
    <mat-hint align="end">Zahl eingeben</mat-hint>
</mat-form-field><br/>
<button mat-raised-button id="count-button" color="primary" (click)="clickButton()">Klick mich!</button>
 

layout.component.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'ox-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent {
  public counter: number = 0;
  public textFormControl = new FormControl('');

  public clickButton(): void {
    let number = parseInt(this.textFormControl.value);
    if (!number) {
      number = 1;
    }
    this.counter += number;
  }
}
 

Jetzt, wo wir die Anwendung angepasst haben, können wir sehen, wie benutzerdefinierte Befehle das Testen dieser Anwendung erleichtern.

Eigene Befehle hinzufügen

Im Projekt befindet sich im Cypress-Ordner ein Unterordner support. In diesem Ordner liegt die Datei commands.js, in der wir nun unseren ersten benutzerdefinierten Befehl schreiben. Der Befehl bekommt ein Zahlenarray als Parameter übergeben und trägt jede Zahl aus dem Array in das Textfeld ein. In der Datei rufen wir zunächst Cypress.Commands.add() auf und übergeben der Methode zwei Parameter. Der erste ist der Name unseres benutzerdefinierten Befehls. Für ihn geben wir enterNumbers an. Der zweite Parameter ist die Funktion, die aufgerufen werden soll, wenn unser Befehl ausgeführt wird. In der Funktion verwenden wir eine for-Schleife, um für jede Zahl das Textfeld zu leeren, die Zahl einzugeben und den Knopf zu drücken.

Cypress.Commands.add('enterNumbers', (numbers) => {
  for (let number of numbers) { 
    if (!number) {
      number = 0;
    }

    cy.get('[id=text-field]').clear().type(number);
    cy.get('[id=count-button]').click();
  }
});
 

Cypress.Commands.add('repeatClicks', {prevSubject: 'element'}, (subject, amount) => {
  if (!amount) {
    amount = 0;
  }
  for (let i = 0; i < amount; i++) {
    cy.wrap(subject).safeClick();
  }
});
 

Arten von Befehlen

Befehle überschreiben

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  if (!url || url === '') {
    url = '/start-page'
  }
  return originalFn(url, options)
});