Tutoriel : Test de votre formulaire adaptatif

Ce didacticiel est une étape de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du didacticiel.

Une fois le formulaire adaptatif prêt, il est important de le tester avant de le déployer sur les utilisateurs finaux. Vous pouvez tester manuellement (tests fonctionnels) chaque champ ou automatiser le test de votre formulaire adaptatif. Lorsque vous disposez de plusieurs formulaires adaptatifs, tester manuellement chaque champ de tous les formulaires adaptatifs devient une tâche ardue.

AEM Forms fournissez une structure de test, Calvin, pour automatiser les tests de vos formulaires adaptatifs. Grâce au framework, vous développez et exécutez des tests d’IU directement dans un navigateur Web. La structure fournit des API JavaScript pour la création de tests. Les tests automatisés vous permettent de tester l’expérience de préremplissage d’un formulaire adaptatif, l’expérience d’envoi d’un formulaire adaptatif, les règles d’expression, depuis les validations, le chargement différé et les interactions de l’interface utilisateur. Ce tutoriel vous guide tout au long des étapes nécessaires à la création et à l’exécution de tests automatisés sur un formulaire adaptatif. À la fin de ce didacticiel, vous serez capable de :

Étape 1 : Créer une suite de tests

Les suites de tests comportent une collection de cas de test. Vous pouvez avoir plusieurs suites de tests. Il est recommandé de disposer d’une suite de tests distincte pour chaque formulaire. Pour créer une suite de tests :

  1. Connectez-vous à l’instance d’auteur Forms AEM en tant qu’administrateur. Ouvrez CRXDE Lite. Vous pouvez appuyer sur AEM Logo > Outils > Général > CRXDE Lite ou ouvrir l’URL https://localhost:4502/crx/de/index.jsp dans un navigateur pour ouvrir le CRXDE Lite.

  2. Accédez à /etc/clientlibs dans CRXDE Lite. Cliquez avec le bouton droit sur le sous-dossier /etc/clientlibs et sélectionnez Créer > Créer un nœud. Dans le champ Name , saisissez WeRetailFormTestCase. Sélectionnez le type cq:ClientLibraryFolder et cliquez sur OK. Il crée un noeud. Vous pouvez utiliser n’importe quel nom à la place de WeRetailFormTestCases.

  3. Ajoutez les propriétés suivantes au noeud WeRetailFormTestCases et appuyez sur Save ALL.

    Propriété Type Multi Valeur
    categories Chaîne Activé
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencies Chaîne Activé
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all

    Veillez à ce que chaque propriété soit ajoutée à une zone distincte, comme illustré ci-dessous :

    dependencies

  4. Cliquez avec le bouton droit de la souris sur le noeud WeRetailFormTestCase et cliquez sur Créer > Créer un fichier. Dans le champ Nom, saisissez js.txt et cliquez sur OK.

  5. Ouvrez le fichier js.txt pour le modifier, ajoutez le code suivant, puis enregistrez le fichier :

    #base=.
     init.js
    
  6. Créez un fichier, init.js, dans le noeud WeRetailFormTestCases. Ajoutez le code ci-dessous au fichier et appuyez sur Enregistrer tout.

    (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.testForm3 = new hobs.TestSuite("We retail - Tests", {
            path: '/etc/clientlibs/WeRetailFormTestCases/init.js',
            register: true
        });
     // window.testsuites.testForm2 = new hobs.TestSuite("testForm2");
    }(window, window.hobs));
    

    Le code ci-dessus crée une suite de tests nommée We retail - Tests.

  7. Ouvrez l’interface utilisateur AEM Tests (AEM > Outils > Opérations > Tests). La suite de tests - We retail - Tests - est répertoriée dans l’interface utilisateur.

    we-retail-test-suite

Étape 2 : Créez un cas de test pour préremplir les valeurs dans un formulaire adaptatif

Un cas de test est un ensemble d’actions permettant de tester une fonctionnalité spécifique. Par exemple, pré-remplir tous les champs d’un formulaire et valider quelques champs pour vérifier que les valeurs correctes sont renseignées.

Une action est une activité spécifique sur un formulaire adaptatif, comme cliquer sur un bouton. Pour créer un cas de test et des actions permettant de valider la saisie de l’utilisateur pour chaque champ de formulaire adaptatif :

  1. Dans CRXDE lite, accédez au dossier /content/forms/af/create-first-adaptive-form. Cliquez avec le bouton droit sur le noeud de dossier create-first-adaptive-form et cliquez sur Créer Créer un fichier. Dans le champ Nom, saisissez prefill.xml et cliquez sur OK. Ajoutez le code suivant au fichier :

    <?xml version="1.0" encoding="UTF-8"?><afData>
      <afUnboundData>
        <data>
          <customer_ID>371767</customer_ID>
          <customer_Name>John Jacobs</customer_Name>
          <customer_Shipping_Address>1657 1657 Riverside Drive Redding</customer_Shipping_Address>
          <customer_State>California</customer_State>
          <customer_ZIPCode>096001</customer_ZIPCode>
         </data>
      </afUnboundData>
      <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/"/>
      </afBoundData>
    </afData>
    
  2. Accédez à /etc/clientlibs. Cliquez avec le bouton droit sur le sous-dossier /etc/clientlibs et cliquez sur Créer Créer un noeud.

    Dans le champ Nom, saisissez WeRetailFormTests. Sélectionnez le type cq:ClientLibraryFolder et cliquez sur OK.

  3. Ajoutez les propriétés suivantes au noeud WeRetailFormTests .

    Propriété Type Multi Valeur
    categories Chaîne Activé
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    dependencies Chaîne Activé
    • granite.testing.calvin.tests
  4. Créez un fichier, js.txt, dans le noeud WeRetailFormTests. Ajoutez le suivant au fichier :

    #base=.
    prefillTest.js
    

    Cliquez sur Enregistrer tout.

  5. Créez un fichier, prefillTest.js, dans le noeud WeRetailFormTests. Ajoutez le code ci-dessous au fichier . Le code crée un cas de test. Le cas de test préremplit tous les champs d’un formulaire et valide certains champs pour s’assurer que les valeurs sont correctement renseignées.

    (function (window, hobs) {
        'use strict';
    
        var ts = new hobs.TestSuite("Prefill Test", {
            path: '/etc/clientlibs/WeRetailFormTests/prefillTest.js',
            register: false
        })
    
        .addTestCase(new hobs.TestCase("Prefill Test")
            // navigate to the testForm which is to be test
            .navigateTo("/content/forms/af/create-first-adaptive-form/shipping-address-add-update-form.html?wcmmode=disabled&dataRef=crx:///content/forms/af/create-first-adaptive-form/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ID").value == 371767;
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ZIPCode").value == 96001;
            })
        );
    
        // register the test suite with testForm
        window.testsuites.testForm3.add(ts);
    
    }(window, window.hobs));
    

    Le cas de test est créé et prêt à être exécuté. Vous pouvez créer des cas de test pour valider différents aspects d’un formulaire adaptatif, tels que la vérification de l’exécution du script de calcul, la validation des modèles et la validation de l’expérience d’envoi d’un formulaire adaptatif. Pour plus d’informations sur les différents aspects du test des formulaires adaptatifs, voir Automatisation du test des formulaires adaptatifs.

Étape 3 : Exécutez tous les tests dans une suite ou des cas de tests individuels

Une suite de tests peut comporter plusieurs cas de test. Vous pouvez exécuter tous les cas de test dans une suite de tests à la fois ou individuellement. Lorsque vous exécutez un test, les icônes indiquent les résultats :

  • Une icône de coche indique qu’un test a réussi : save_icon
  • Une icône "X" indique un test ayant échoué : close-icon
  1. Accédez à l’icône AEM > Outils Opérations Test

  2. Pour exécuter tous les tests de la suite de tests :

    1. Dans le panneau Tests, appuyez sur We retail - Tests (1). Elle La suite se développe pour afficher la liste des tests.

    2. Appuyez sur le bouton Exécuter les tests . La zone vierge sur le côté droit de l’écran est remplacée par un formulaire adaptatif lors de l’exécution du test.

      run-all-test

  3. Pour exécuter un seul test à partir de la suite de tests :

    1. Dans le panneau Tests, appuyez sur We retail - Tests (1). Elle La suite se développe pour afficher la liste des tests.
    2. Appuyez sur Test de préremplissage et appuyez sur le bouton Exécuter les tests. La zone vierge sur le côté droit de l’écran est remplacée par un formulaire adaptatif lors de l’exécution du test.
  4. Appuyez sur le nom du test, Test de préremplissage, pour consulter les résultats du cas de test. Il ouvre le panneau Result. Appuyez sur le nom de votre cas de test dans le panneau Résultat pour afficher tous les détails du test.

    review-results

Le formulaire adaptatif est maintenant prêt pour la publication.

Sur cette page