Show Menu
SUJETS×

Automatiser les tests des formulaires adaptatifs

Présentation

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 utilizes Hobbes 's user interface for running the tests and provides the following tools:
  • Une API JavaScript pour créer des tests.
  • Une interface utilisateur pour 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 les aspects suivants de vos formulaires adaptatifs :
Aspect du formulaire adaptatif à tester Description
Expérience de remplissage automatique 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 du formulaire sont-elles remplies comme prévu ?
Expérience d’envoi d’un formulaire adaptatif
  • Les données générées lors de l’envoi sont-elles correctes ?
  • Le formulaire est-il à nouveau validé 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 Calculer, Visible, Exécuter des scripts après la sortie d’un champ, sont-elles exécutées après l’exécution des opérations d’interface utilisateur pertinentes ?
Validations
  • Les validations de champs s’exécutent-elles comme prévu après avoir effectué les 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

Conditions préalables

Avant d’utiliser cet article pour créer vos cas de test, vous devez savoir ce qui suit :

Exemple : créer une suite de tests pour un formulaire adaptatif en utilisant Hobbes comme cadre de test

L’exemple suivant vous guide dans 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 que vous souhaitez tester. En effectuant des étapes similaires à celles ci-dessous et en modifiant le code JavaScript à l’étape 11, vous pouvez créer votre propre suite de tests pour tester vos formulaires adaptatifs.
  1. Go to CRXDE Lite in your web browser: 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 nœud en tant que 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 spécifiques à 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
Le clientlib granite.testing.calvin.af contient toutes les API de formulaires adaptatifs. Ces API font partie de l’espace de nommage calvin.
  1. Right-click the test node (here afTestRegistration) and then click Create > Create File . Nommez le fichier js.txt et cliquez sur OK .
  2. Dans le fichier js.txt, ajoutez le texte suivant :
    #base=.
    js.txt
    
    
  3. Cliquez sur Enregistrer tout et fermez le fichier js.txt.
  4. Right-click the test node (here afTestRegistration) and click Create > Create File . Nommez le fichier init.js et cliquez sur OK .
  5. Copy the following code to the init.js file and click Save All :
    (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 Adaptive Form - Demo Test . Pour créer une suite de tests avec un nom différent, changez le nom en conséquence.
  6. Cliquez sur Créer  > Créer un nœud pour créer un nœud sous le dossier clientlib pour chaque formulaire que vous souhaitez tester. Cet exemple utilise un nœud nommé testForm pour tester un formulaire adaptatif nommé testForm . Spécifiez les propriétés suivantes et cliquez sur OK  :
    • Nom : testForm (le nom de votre formulaire)
    • Type : cq:ClientLibraryFolder
  7. Ajoutez les propriétés suivantes au nouveau noeud (ici testForm) pour tester un formulaire adaptatif :
    Propriété
    Type
    Valeur
    categories
    Chaîne #
    granite.testing.hobbes.tests, granite.testing.hobbes.tests.test.testForm
    dependencies
    Chaîne #
    granite.testing.calvin.tests
    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.
  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 et 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. For more information on APIs for testing different aspects of forms and form objects, see Calvin APIs .
    (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éé. Passez à l’exécution du test pour tester les formulaires adaptatifs via Hobbes. For steps for running the test cases, see Executing Tests in Testing Your UI Using Automated Tests .
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.

Tests de l’interface utilisateur à l’aide de tests automatisés

Exécution distincte d’une suite de tests

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 coche indique un test réussi :
An "X" icon indicates a failed test:
Pour exécuter une suite de tests :
  1. Dans le panneau Tests, cliquez ou entrez sur le nom du cas de test que vous souhaitez exécuter pour développer les détails des actions.
  2. Cliquez ou appuyez sur le bouton Exécuter les tests.
  3. L’espace réservé est remplacé par le contenu de la page lors de l’exécution du test.
  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.
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

Terme Description
Suite de tests
Une suite de tests est une série 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 effectuées par les utilisateurs.
Actions
Les actions sont des méthodes qui effectuent un geste 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 sont exécutées de manière synchronisée.
Environnement d’auteur ou de publication
En général, les formulaires peuvent être testés dans un environnement d’auteur ou de publication. Dans le cas d’un environnement de publication, l’accès pour exécuter le test est restreint par défaut. Ce cas de figure est dû au fait que toutes les bibliothèques client liées au programme d’exécution de test se trouvent dans /libs dans la structure JCR.