Show Menu
SUJETS×

Didacticiel : 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 que le formulaire adaptatif est prêt, il est important de le tester avant de le déployer pour les utilisateurs finaux. Vous pouvez tester manuellement (des tests fonctionnels) chaque champ ou automatiser le test de votre formulaire adaptatif. Lorsque vous disposez de plusieurs formulaires adaptatifs, le test manuel de chaque champ de tous les formulaires adaptatifs devient une tâche intimidante.
aem fournit une structure de test, Calvin, pour automatiser les tests de vos formulaires adaptatifs. Forms 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, d’envoyer l’expérience d’un formulaire adaptatif, les règles d’expression, depuis les validations, le chargement différé et les interactions de l’interface utilisateur. Ce didacticiel vous guide tout au long des étapes nécessaires pour créer et exécuter des tests automatisés sur un formulaire adaptatif. À la fin de ce didacticiel, vous serez capable de :

Étape 1 : Création d’une suite de tests

Les suites de tests comportent un ensemble de cas de test. Vous pouvez avoir plusieurs suites de tests. Il est recommandé d’avoir une suite de tests distincte pour chaque formulaire. Pour créer une suite de tests :
  1. Log to AEM Forms author instance in as an administrator. Open 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 le 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 WeRetailFormTestCases . 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. Add the following properties to the WeRetailFormTestCases node and tap 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
    Assurez-vous que chaque propriété est ajoutée à une zone distincte, comme indiqué ci-dessous :
  4. Right-click the WeRetailFormTestCases node click Create > Create File . In the Name field, type js.txt and click 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 WeRetailFormTestCases noeud. ajoutez le code ci-dessous dans le 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 commerce - Tests .
  7. Ouvrez AEM interface utilisateur Tests (AEM > Outils > Opérations > Tests ). La suite de tests - Nous commercialisons - Tests - est répertoriée dans l’interface utilisateur.

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

Un cas de test est un ensemble d’actions permettant de tester une fonctionnalité spécifique. Par exemple, le préremplissage de tous les champs d’un formulaire et la validation de quelques champs afin de s’assurer que les valeurs correctes sont saisies.
Une action est une activité spécifique sur un formulaire adaptatif, telle qu’un clic sur un bouton. Pour créer un cas de test et des actions permettant de valider les données utilisateur pour chaque champ de formulaire adaptatif :
  1. Dans CRXDE Lite, accédez au /content/forms/af/create-first-adaptive-form dossier. Cliquez avec le bouton droit sur le noeud de dossier create-first-adaptive-form et cliquez sur Créer > Créer un fichier . In the Name field, type prefill.xml and click 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 . Right-click the /etc/clientlibs subfolder and click Create > Create Node .
    Dans le champ Nom , tapez WeRetailFormTests . Sélectionnez le type cq:ClientLibraryFolder et cliquez sur OK .
  3. Add the following properties to the WeRetailFormTests node.
    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 les éléments suivants dans le fichier :
    #base=.
    prefillTest.js
    
    
    Cliquez sur Enregistrer tout .
  5. Créez un fichier, prefillTest.js ,dans le noeud WeRetailFormTests . ajoutez le code ci-dessous dans le 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 saisies correctement.
    (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 divers aspects d’un formulaire adaptatif, tels que la vérification de l’exécution du script de calcul, la validation de modèles et la validation de l’expérience d’envoi d’un formulaire adaptatif. Pour plus d’informations sur divers aspects du test des formulaires adaptatifs, voir Test automatisé des formulaires adaptatifs.

Étape 3 : Exécution de 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 en une seule fois ou individuellement. Lorsque vous exécutez un test, les icônes indiquent les résultats :
  • A checkmark icon indicates a passed test:
  • An "X" icon indicates a failed test:
  1. Accédez à AEM icône > Outils > Opérations > Tests
  2. Pour exécuter tous les tests de la suite de tests :
    1. Dans le panneau Tests , appuyez sur Nous commercialisons - Tests (1) . Il La suite se développe pour afficher la liste de test.
    2. Appuyez sur le bouton Exécuter les tests . La zone vierge sur le côté droit de l’écran est remplacée par le formulaire adaptatif au fur et à mesure que le test s’exécute.
  3. Pour exécuter un seul test à partir de la suite de tests :
    1. Dans le panneau Tests, appuyez sur Nous commercialisons - Tests (1) . Il La suite se développe pour afficher la liste de test.
    2. Appuyez sur le test de préremplissage et sur le bouton Exécuter les tests . La zone vierge sur le côté droit de l’écran est remplacée par le formulaire adaptatif au fur et à mesure que le test s’exécute.
  4. Appuyez sur le nom du test, Test de préremplissage, pour examiner les résultats du test. Il ouvre le panneau Résultat . Appuyez sur le nom de votre cas de test dans le panneau Résultat pour vue tous les détails du test.
Désormais, le formulaire adaptatif est prêt pour la publication.