Verwenden Sie AskUI und Cucumber zusammen

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 dabei 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 (Windows, Linux, macOS) installiert und konfiguriert

• 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. Sie erreichen dies, 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. Sagen Sie Jest, 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)" ]
};
...

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

Erstellen Sie eine Datei mit grundlegenden Funktionen

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

project_root/
├─ askui_example/
├─ features/
  ├─ NavigateToWebsite.feature
├─ node_modules/
├─ ...

Schreiben Sie die folgende grundlegende Funktion in diese Datei:

Feature: Navigate to a website

Scenario: Entering the correct URL into the browser address bar
  Given I am on the Google search page
  When I type in the URL for AskUI practice page
  Then I will land on the webpage

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.

import { defineFeature, loadFeature } from 'jest-cucumber';
import { aui } from './helpers/askui-helper';

// Load the feature file
const feature = loadFeature('features/NavigateToWebsite.feature');

defineFeature(feature, test => {

  // Maps to 'Scenario' in your feature file
  test('Entering the correct URL into the browser address bar', ({ given, when, then }) => {

    given('I am on the Google search page', async () => {
      await aui.moveMouse(500, 500).exec();
      await aui.mouseLeftClick().exec();
      await aui.pressTwoKeys('command', 't').exec();
    });

    when('I type in the URL for AskUI practice page', async () => {
      await aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec();
      await aui.pressKey('enter').exec();
    });

    then('I will land on the webpage', async () => {
      await aui.expect().text('Welcome to the AskUI Practice Page').exists().exec();
    });

  });
});

Führen Sie den Workflow aus

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

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.

Das obige ist der detaillierte Inhalt vonVerwenden Sie AskUI und Cucumber zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!