Verwenden Sie AskUI und Cucumber zusammen

Durch die Definition des Verhaltens eines Systems in einem strukturierten Format wie Gherkin ermöglicht Behavior-Driven Development (BDD) Teams, die Lücke zwischen Stakeholdern, Testern und Entwicklern zu schließen, Missverständnisse zu vermeiden und Nacharbeiten zu reduzieren. Als kollaborativer Ansatz ermutigt BDD alle Parteien, von Anfang an zusammenzuarbeiten und sicherzustellen, dass alle auf dem Laufenden sind
die gleiche Seite und dass die Anforderungen genau erfasst werden.

In diesem Prozess ist Cucumber ein beliebtes Tool zur Implementierung von BDD, das es Teams ermöglicht, klare, ausführbare Tests zu schreiben, die sicherstellen, dass sich das System wie erwartet verhält.

In diesem Blogbeitrag zeigen wir Ihnen, wie Sie Cucumber in Verbindung mit AskUI einrichten, um AskUI-Workflows mithilfe von BDD-Prinzipien zu definieren.

Voraussetzungen

• AskUI auf Ihrem System installiert und konfiguriert (Windows, Linux, macOS)

• askui_example/my-first-askui-test-suite.test.ts nach der Initialisierung löschen

Bereiten Sie das Setup vor

Cucumber funktioniert noch nicht gut mit dem Standard-Setup von AskUI (Version 0.20.3). Damit AskUI gut mit Cucumber zusammenspielt, müssen Sie zwei kleine Vorbereitungen treffen, da AskUI Jest als Runner verwendet.

1. Ändern Sie die testEnvironmentOptions von Jest

In der Datei askui_example/helpers/jest.config.ts müssen Sie deaktivieren, dass Code in den Laufbericht einbezogen wird. Dies erreichen Sie, indem Sie eine testEnvironmentOptions-Eigenschaft hinzufügen, wobei die addCodeInReport-Eigenschaft auf false gesetzt ist.

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. Teilen Sie Jest mit, wo die Implementierung für die Schrittdefinitionen zu finden ist

Auch in askui_example/helpers/jest.config.ts müssen Sie die Standardeigenschaft testMatch erweitern. Es muss Dateien enthalten, die auf „step.ts“ enden, da wir die Implementierung dort speichern.

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ]
};
...

s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ] }; ...

Installieren Sie Scherzgurke

Der einfachste Weg, Jest zusammen mit Cucumber zu verwenden, ist das npm-Paket jest-cucumber. Installieren wir es mit dem folgenden Befehl:

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

Erstellen Sie eine Datei mit grundlegenden Funktionen

Erstellen Sie einen Ordner „features“ und darin eine Datei „Feature
“ NavigateToWebsite.feature

npm install --save-dev jest-cucumber

Projektstammverzeichnis/ ├─ askui_example/ ├─ Funktionen/ ├─ NavigateToWebsite.feature ├─ node_modules/ ├─ ...

Schreiben Sie die folgende grundlegende Funktion
in diese Datei:

npm install --save-dev jest-cucumber

Funktion: Navigieren Sie zu einer Website Szenario: Eingabe der richtigen URL in die Adressleiste des Browsers Vorausgesetzt, ich befinde mich auf der Google-Suchseite Wenn ich die URL für die AskUI-Übungsseite eingebe Dann lande ich auf der Webseite

Erstellen Sie die Implementierungen der Schrittdefinitionen

Erstellen Sie die Schrittdefinitionsdatei askui_example/navigate-to-url.step.ts, in der jeder Test einem bestimmten Szenario zugeordnet ist.

npm install --save-dev jest-cucumber

import { defineFeature, loadFeature } from 'jest-cucumber'; import { aui } from './helpers/askui-helper'; // Die Feature-Datei laden const feature = loadFeature('features/NavigateToWebsite.feature'); defineFeature(feature, test => { // Wird „Scenario“ in Ihrer Feature-Datei zugeordnet test('Eingabe der richtigen URL in die Adressleiste des Browsers', ({ gegeben, wann, dann }) => { gegeben('Ich bin auf der Google-Suchseite', async () => { Warten Sie auf aui.moveMouse(500, 500).exec(); Warten Sie auf aui.mouseLeftClick().exec(); Warten Sie auf aui.pressTwoKeys('command', 't').exec(); }); when('Ich gebe die URL für die AskUI-Übungsseite ein', async () => { wait aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); Warten Sie auf aui.pressKey('enter').exec(); }); then('Ich werde auf der Webseite landen', async () => { wait aui.expect().text('Willkommen auf der AskUI-Übungsseite').exists().exec(); }); }); });

Führen Sie den Workflow aus

Öffnen Sie Ihren Browser im Vollbildmodus und starten Sie den Workflow mit:

npm install --save-dev jest-cucumber

npm run askui

Sie sollten sehen, dass die Workflow-Ausführung einen neuen Tab öffnet und zur Übungsseite von AskUI navigiert.

Abschluss

Durch die Kombination von AskUI mit Cucumber können Sie AskUI-Workflows im BDD-Stil schreiben. Wenn Sie Ihre Tests wie ein echter menschlicher Benutzer ausführen, werden sie für alle Beteiligten realistischer.