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ébut, 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 à l'aide des 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 exécuteur.

1. Modifiez les testEnvironmentOptions de Jest

Dans le fichier Askui_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)" ]
};
...

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

Installer Jest-Concombre

Le moyen le plus simple d'utiliser Jest avec Cucumber est le package npm jest-cucumber. Installons-le avec la commande suivante :

npm install --save-dev jest-cucumber

npm install --save-dev jest-concombre

Créer un fichier de fonctionnalités de base

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

npm install --save-dev jest-cucumber

racine_projet/ ├─ Askui_example/ ├─ fonctionnalités/ ├─ NavigateToWebsite.feature ├─ node_modules/ ├─ ...

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

npm install --save-dev jest-cucumber

Fonction : Accédez à un site Web Scénario : Saisir l'URL correcte dans la barre d'adresse du navigateur Étant donné que je suis sur la page de recherche Google Lorsque je saisis l'URL de la page de pratique AskUI Ensuite, j'arriverai sur la page Web

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

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

npm install --save-dev jest-cucumber

import {defineFeature, loadFeature } depuis 'jest-concombre' ; importer { aui } depuis './helpers/askui-helper' ; // Charge le fichier de fonctionnalités const feature = loadFeature('features/NavigateToWebsite.feature'); définirFeature(fonctionnalité, test => { // Correspond au « Scénario » dans votre fichier de fonctionnalités test('Saisie de l'URL correcte dans la barre d'adresse du navigateur', ({donné, quand, puis }) => { donné('Je suis sur la page de recherche Google', async() => { attendre aui.moveMouse(500, 500).exec(); attendre aui.mouseLeftClick().exec(); wait aui.pressTwoKeys('command', 't').exec(); }); when('Je tape l'URL de la page de pratique AskUI', async() => { wait aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); attendre aui.pressKey('enter').exec(); }); then('Je vais atterrir sur la page Web', async() => { wait aui.expect().text('Bienvenue sur la page de pratique AskUI').exists().exec(); }); }); });

Exécuter le flux de travail

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

npm install --save-dev jest-cucumber

npm exécuter 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.