Automatiser les tests des formulaires adaptatifs automate-testing-of-adaptive-forms
Présentation overview
Les formulaires adaptatifs font partie intégrante de vos interactions avec les clients. Il est important de tester vos formulaires adaptatifs à chaque modification apportée, comme lors du déploiement d’un nouveau groupe de correctifs ou de la modification d’une règle dans le formulaire. Cependant, les formulaires adaptatifs de test fonctionnel et tous les champs qu’ils contiennent peuvent s’avérer fastidieux.
Calvin vous permet d’automatiser les tests de vos formulaires adaptatifs dans le navigateur Web. Calvin utilise l’interface utilisateur de Hobbes pour exécuter les tests et fournit les outils suivants :
- Une API JavaScript pour créer des tests.
- Interface utilisateur permettant d’exécuter des tests.
En utilisant Calvin, vous pouvez créer des cas de test dans CRXDE et exécuter des tests d’interface utilisateur directement dans le navigateur web pour tester minutieusement les aspects suivants de vos formulaires adaptatifs :
Prérequis prerequisites
Avant d’utiliser cet article pour créer vos cas de test, vous devez connaître les informations suivantes :
- Créer des suites de tests et exécuter des cas de test à l’aide de Hobbes
- API JavaScript Hobbes
- API JavaScript Calvin
Exemple : Création d’une suite de tests pour un formulaire adaptatif à l’aide de Hobbes comme structure de test example-create-a-test-suite-for-an-adaptive-form-using-hobbes-as-testing-framework
L’exemple suivant vous guide tout au long de la création d’une suite de tests pour tester plusieurs formulaires adaptatifs. Vous devez créer un cas de test distinct pour chaque formulaire à tester. En suivant les étapes similaires à celles ci-après et en modifiant le code JavaScript à l’étape 11, vous pouvez créer votre propre suite de tests pour tester vos formulaires adaptatifs.
-
Accédez à CRXDE Lite dans votre navigateur web :
https://[server]:[port]/crx/de
. -
Cliquez avec le bouton droit sur le sous-dossier /etc/clientlibs et sélectionnez Créer > Créer un nœud. Saisissez un nom (ici afTestRegistration), spécifiez le type de noeud cq:ClientLibraryFolder, puis cliquez sur OK.
Le dossier clientlibs contient l’aspect enregistrement de votre application (JS et Init). Il est recommandé d’enregistrer tous les objets de suites de tests Hobbes propres à un formulaire dans le dossier clientlibs.
-
Spécifiez les valeurs de propriété suivantes au nœud que vous venez de créer (ici, afTestRegistration), puis cliquez sur Enregistrer tout. Ces propriétés aident Hobbes à reconnaître le dossier en tant que test. Pour réutiliser cette bibliothèque client en tant que dépendance dans d’autres bibliothèques client, appelez-la granite.testing.calvin.tests.
-
Faites un clic droit sur le nœud de test (ici afTestRegistration), puis cliquez sur Créer > Créer un fichier. Nommez le fichier js.txt et cliquez sur OK.
-
Dans le fichier js.txt, ajoutez le texte suivant :
code language-none #base=. js.txt
-
Cliquez sur Enregistrer tout et fermez le fichier js.txt.
-
Faites un clic droit sur le nœud de test (ici afTestRegistration), puis cliquez sur Créer > Créer un fichier. Nommez le fichier init.js et cliquez sur OK.
-
Copiez le code suivant dans le fichier init.js et cliquez sur Enregistrer tout :
code language-none (function(window, hobs) { 'use strict'; window.testsuites = window.testsuites || {}; // Registering the test form suite to the sytem // If there are other forms, all registration should be done here window.testsuites.testForm = new hobs.TestSuite("Adaptive Form - Demo Test", { path: '/etc/clientlibs/afTestRegistration/init.js', register: true }); // window.testsuites.testForm1 = new hobs.TestSuite("testForm1"); }(window, window.hobs));
Le code ci-dessus crée une suite de tests nommée Formulaire adaptatif - Test de démonstration. Pour créer une suite de tests portant un nom différent, modifiez le nom en conséquence.
-
Cliquez sur Créer > Créer un noeud pour créer un noeud sous le dossier clientlib pour chaque formulaire que vous souhaitez tester. Cet exemple utilise un noeud nommé testForm pour tester un formulaire adaptatif nommé testForm
.
Spécifiez les propriétés suivantes, puis cliquez sur OK:- Nom : testForm (votre nom de formulaire)
- Type : cq:ClientLibraryFolder
-
Ajoutez les propriétés suivantes au nœud que vous venez de créer (ici testForm) afin de tester un formulaire adaptatif :
table 0-row-3 1-row-3 2-row-3 Propriété Type Valeur categories Chaîne[] granite.testing.hobbes.tests, granite.testing.hobbes.tests.testForm dependencies Chaîne[] granite.testing.calvin.tests note note NOTE Cet exemple utilise une dépendance sur le client lib granite.testing.calvin.tests pour une meilleure gestion. Cet exemple ajoute également une catégorie de bibliothèque client, « granite.testing.hobbes.tests.testForm » pour réutiliser cette bibliothèque client, si nécessaire. -
Cliquez avec le bouton droit sur le dossier que vous avez créé pour le formulaire de test (ici testForm) et sélectionnez Créer > Créer un fichier. Nommez le fichier scriptingTest.js , ajoutez le code suivant au fichier, puis cliquez sur Enregistrer tout.
Pour utiliser le code suivant afin de tester un autre formulaire adaptatif, modifiez le chemin et le nom du formulaire dans navigateTo (lignes 11, 36 et 62) et dans les cas de test respectifs. Pour plus d’informations sur les API permettant de tester différents aspects des formulaires et des objets de formulaire, voir API Calvin.
code language-none (function(window, hobs) { 'use strict'; var ts = new hobs.TestSuite("Script Test", { path: '/etc/clientlibs/testForm/scriptingTest.js', register: false }) .addTestCase(new hobs.TestCase("Checking execution of calculate script") // navigate to the testForm which is to be tested .navigateTo("/content/forms/af/testForm.html?wcmmode=disabled") // check if adaptive form is loaded .asserts.isTrue(function () { return calvin.isFormLoaded() }) .execSyncFct(function () { // create a spy before checking for the expression calvin.spyOnExpression("panel1.textbox1"); // setValue would trigger enter, set the value and exit from the field calvin.setValueInDOM("panel1.textbox", "5"); }) // if the calculate expression was setting "textbox1" value to "5", let's also check that .asserts.isTrue(function () { return calvin.isExpressionExecuted("panel1.textbox1", "Calculate"); }) .execSyncFct(function () { calvin.destroySpyOnExpression("panel1.textbox1"); }) .asserts.isTrue(function () { return calvin.model("panel1.textbox1").value == "5" }) ) .addTestCase(new hobs.TestCase("Calculate script Test") // navigate to the testForm which is to be tested .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml") // check if adaptive form is loaded .asserts.isTrue(function () { return calvin.isFormLoaded() }) .execSyncFct(function () { // create a spy before checking for the expression calvin.spyOnExpression("panel2.panel1488218690733.downPayment"); // setValue would trigger enter, set the value and exit from the field calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "1000000"); }) .asserts.isTrue(function () { return calvin.isExpressionExecuted("panel2.panel1488218690733.downPayment", "Calculate"); }) .execSyncFct(function () { calvin.destroySpyOnExpression("panel2.panel1488218690733.downPayment"); }) .asserts.isTrue(function () { // if the calculate expression was setting "downPayment" value to "10000", let's also check that return calvin.model("panel2.panel1488218690733.downPayment").value == 10000 }) ) .addTestCase(new hobs.TestCase("Checking execution of Value commit script") // navigate to the testForm which is to be tested .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml") // check if adaptive form is loaded .asserts.isTrue(function () { return calvin.isFormLoaded() }) .execSyncFct(function () { // create a spy before checking for the expression calvin.spyOnExpression("panel2.panel1488218690733.priceProperty"); // setValue would trigger enter, set the value and exit from the field calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "100"); }) .asserts.isTrue(function () { return calvin.isExpressionExecuted("panel2.panel1488218690733.priceProperty", "Value Commit"); }) .execSyncFct(function () { calvin.destroySpyOnExpression("panel2.panel1488218690733.priceProperty"); }) .asserts.isTrue(function () { // if the value commit expression was setting "textbox1488215618594" value to "0", let's also check that return calvin.model("panel2.panel1488218690733.textbox1488215618594").value == 0 }) ); // register the test suite with testForm window.testsuites.testForm.add(ts); }(window, window.hobs));
Le cas de test est créé. Procédez au lancement du test pour tester les formulaires adaptatifs via Hobbes. Pour connaître les étapes d’exécution des cas de test, voir Exécuter les tests lorsque vous testez votre interface utilisateur à l’aide de tests automatisés.
Vous pouvez également installer le package dans le fichier joint SampleTestPackage.zip pour obtenir les mêmes résultats qu’avec les étapes expliquées dans Exemple : créer une suite de tests pour un formulaire adaptatif en utilisant Hobbes comme cadre de test.
Test de votre interface utilisateur à l’aide de tests automatisés testing-your-ui-using-automated-tests
Exécution d’une seule suite de tests running-a-single-test-suite
Les suites de tests peuvent être exécutées séparément. Lorsque vous lancez une suite de tests, la page change au fur et à mesure que les cas de tests et leurs actions sont exécutés et une fois que les résultats apparaissent à la fin du test. Les icônes indiquent les résultats.
Une icône de coche indique qu’un test a réussi :
Une icône « X » indique un test échoué :
Pour exécuter une suite de tests :
-
Dans le panneau Tests, cliquez ou appuyez sur le nom du cas de test que vous souhaitez exécuter pour développer les détails des actions.
-
Cliquez ou appuyez sur le bouton Exécuter les tests.
-
L’espace réservé est remplacé par le contenu de la page lors de l’exécution du test.
-
Passez en revue les résultats du cas de test en cliquant ou en appuyant sur la description pour ouvrir le panneau Résultat. Appuyez ou cliquez sur le nom de votre cas de test dans le panneau Résultat pour afficher tous les détails.
Les étapes de test de vos formulaires adaptatifs AEM sont similaires aux étapes de test de votre interface utilisateur AEM. Pour plus d’informations sur le test de vos formulaires adaptatifs, consultez les rubriques suivantes dans Test de votre interface utilisateur:
- Affichage de suites de tests
- Exécution de plusieurs tests