Utilisez AskUI et Cucumber ensemble

Utilisez AskUI et Cucumber ensemble

En définissant le comportement d'un système dans un format structuré comme Gherkin, le développement piloté par le comportement (BDD) permet aux équipes de combler le fossé entre les parties prenantes, les testeurs et les développeurs, en évitant les malentendus et en réduisant les retouches. Dans le cadre d'une approche collaborative, BDD encourage toutes les parties à travailler ensemble dès le départ, en veillant à ce que tout le monde soit impliqué
la même page et que les exigences sont capturées avec précision.

Dans ce processus, Cucumber est un outil populaire utilisé pour implémenter BDD, permettant aux équipes d'écrire des tests clairs et exécutables qui garantissent que le système se comporte comme prévu.

Dans cet article de blog, nous allons vous montrer comment configurer Cucumber en conjonction avec AskUI pour définir les flux de travail AskUI en utilisant les principes BDD.

Conditions préalables

• AskUI installé et configuré sur votre système (Windows, Linux, macOS)

• Supprimer askui_example/my-first-askui-test-suite.test.ts après l'initialisation

Préparer la configuration

Cucumber ne fonctionne pas encore bien avec la configuration par défaut d'AskUI (version 0.20.3). Pour qu'AskUI fonctionne bien avec Cucumber, vous devez effectuer deux petites préparations car AskUI utilise Jest comme coureur.

1. Modifiez les testEnvironmentOptions de Jest

Dans le fichier asgui_example/helpers/jest.config.ts, vous devez désactiver que le code soit inclus dans le rapport d'exécution. Vous y parvenez en ajoutant une propriété testEnvironmentOptions avec la propriété addCodeInReport définie sur false.

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

2. Dites à Jest où trouver l'implémentation des définitions d'étape

Également dans Askui_example/helpers/jest.config.ts, vous devez développer la propriété testMatch par défaut. Il doit inclure des fichiers se terminant par step.ts car nous y stockerons l'implémentation.

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

Installer Jest-Concombre

La façon la plus simple d'utiliser Jest avec Cucumber est le npm-package jest-cucumber. Installons-le avec la commande suivante :

npm install --save-dev jest-cucumber

Créer un fichier de fonctionnalités de base

Créez un dossier de fonctionnalités et dedans un fichier Feature NavigateToWebsite.feature

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

Écrivez la Fonctionnalité de base suivante dans ce fichier :

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

Créer les implémentations de définitions d'étape

Créez le fichier de définition d'étape asku_example/navigate-to-url.step.ts où chaque test correspond à un scénario spécifique.

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();
    });

  });
});

Exécuter le flux de travail

Ouvrez votre navigateur en plein écran et démarrez le workflow avec :

npm run askui

Vous devriez voir que l'exécution du flux de travail ouvrira un nouvel onglet et accédera à la page de pratique d'AskUI.

Conclusion

La combinaison d'AskUI avec Cucumber vous permet d'écrire des flux de travail AskUI dans le style BDD. Exécuter vos tests comme un véritable utilisateur humain les rendra plus réalistes pour toutes les parties prenantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!