Automatiser les tests des formulaires adaptatifs automate-testing-of-adaptive-forms

CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

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 :

Aspect du formulaire adaptatif à tester
Description
Expérience de préremplissage d’un formulaire adaptatif
  • Le formulaire est-il prérempli comme prévu en fonction du type de modèle de données ?
  • Les valeurs par défaut des objets de formulaire sont-elles préremplies comme prévu ?
Envoyer l’expérience d’un formulaire adaptatif
  • Les données correctes sont-elles générées lors de l’envoi ?
  • Le formulaire est-il revalidé sur le serveur lors de l’envoi ?
  • L’action d’envoi est-elle configurée pour le formulaire en cours d’exécution ?
Règles d’expression
  • Les expressions associées aux objets de formulaire, telles que calculate, visible, execute des scripts après la sortie d’un champ, sont-elles exécutées après l’exécution des opérations de l’interface utilisateur appropriée ?
Validations
  • Les validations de champ s’exécutent-elles comme prévu après l’exécution des opérations ?
Chargement différé
  • Lorsque les onglets sont sélectionnés (ou tout élément de navigation d’un panneau), le contenu HTML est-il récupéré du serveur selon la configuration de chargement différé ?
Interaction de l’interface utilisateur

Prérequis prerequisites

Avant d’utiliser cet article pour créer vos cas de test, vous devez connaître les informations suivantes :

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.

  1. Accédez à CRXDE Lite dans votre navigateur web : https://[server]:[port]/crx/de.

  2. 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.

  3. 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.

Propriété
Type
Valeur
categories
Chaîne[]
granite.testing.hobbes.tests, granite.testing.calvin.tests
dependencies
Chaîne[]
granite.testing.hobbes.testrunner, granite.testing.calvin, apps.testframework.all
NOTE
La bibliothèque client granite.testing.calvin.af contient toutes les API de formulaires adaptatifs. Ces API font partie de l’espace de noms calvin.

1_aftestregistration

  1. 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.

  2. Dans le fichier js.txt, ajoutez le texte suivant :

    code language-none
    #base=.
    js.txt
    
  3. Cliquez sur Enregistrer tout et fermez le fichier js.txt.

  4. 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.

  5. 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.

  6. 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
  7. 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.

    2_testformproperties

  8. 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.

Obtenir le fichier

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 : coche

Une icône « X » indique un test échoué : croix

Pour exécuter une suite de tests :

  1. 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.

    1_tapnameoftestcase

  2. Cliquez ou appuyez sur le bouton Exécuter les tests. runtestcase

    2_clickrun

  3. L’espace réservé est remplacé par le contenu de la page lors de l’exécution du test.

    3_pagecontent

  4. 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.

    4_reviewresults

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

Glossaire glossary

Terme
Description
Suite de tests
Une suite de tests est un ensemble de cas de test associés.
Cas de test
Un cas de test représente une tâche effectuée par un utilisateur à l’aide de votre interface utilisateur. Ajoutez des cas de test à votre suite de tests pour tester les activités que les utilisateurs effectuent.
Actions

Les actions sont des méthodes qui effectuent un mouvement dans l’interface utilisateur, par exemple en cliquant sur un bouton ou en remplissant une zone de saisie avec une valeur.

Les méthodes des classes hobs.actions.Asserts, hobs.actions.Core et hobs.utils.af sont des actions que vous pouvez utiliser dans vos tests. Toutes les actions s’exécutent de manière synchrone.

Environnement de création ou de publication
En règle générale, les formulaires peuvent être testés dans un environnement de création ou de publication. Dans le cas de l’environnement de publication, l’accès à l’exécution du test est limité par défaut. Cela est dû au fait que toutes les bibliothèques clientes liées à l’exécution de test se trouvent à l’intérieur de /libs dans la structure JCR.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da