Tester votre IU testing-your-ui

NOTE
À partir de la version 6.5 d’AEM, le framework de test de l’interface utilisateur hobbes.js est obsolète. Adobe ne prévoit pas d’y apporter d’autres améliorations et recommande à sa clientèle d’utiliser l’automatisation Selenium.
Consultez les Fonctionnalités obsolètes et supprimées.

AEM fournit un framework pour l’automatisation des tests pour votre IU AEM. Grâce au framework, vous développez et exécutez des tests d’IU directement dans un navigateur web. Ce framework fournit une API Javascript dédiée à la création de tests.

Le framework de test AEM utilise Hobbes.js, une bibliothèque de tests développée en JavaScript. Le framework Hobbes.js a été développé pour tester AEM dans le cadre du processus de développement. Le framework est aujourd’hui disponible au public pour tester les applications AEM.

NOTE
Reportez-vous à la documentation Hobbes.js pour obtenir plus de détails sur l’API.

Structure des tests structure-of-tests

Lors de l’utilisation de tests automatisés dans AEM, il est important de comprendre les termes suivants :

Action
Une action est une activité spécifique sur une page web, par exemple, un clic sur un lien ou un bouton.
Cas de test
Un cas de test est une situation spécifique qui peut être composée d’une ou de plusieurs Actions.
Suite de tests
Une suite de tests est un groupe de cas de test associés qui testent ensemble un cas d’utilisation spécifique.

Exécution de tests executing-tests

Affichage de suites de tests viewing-test-suites

Ouvrez la console de test pour voir les suites de tests enregistrées. Le panneau Tests contient une liste des suites de tests et de leurs cas de test.

Accédez à la console Outils via Navigation globale > Outils > Opérations > Test.

chlimage_1-63

Lors de l’ouverture de la console, les suites de tests sont répertoriées à gauche avec une option permettant de les exécuter en séquence. L’espace à droite affiché avec un arrière-plan en damier est un espace réservé permettant d’afficher le contenu de la page pendant l’exécution des tests.

chlimage_1-64

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 en forme de coche indique un test réussi :

Icône en forme de coche.

Une icône « X » indique l’échec d’un test :

Icône de test ayant échoué représentée par un X dans un cercle.

Pour exécuter une suite de tests, procédez comme suit :

  1. Dans le panneau Tests, cliquez sur le nom du cas de test à exécuter pour développer les détails des actions.

    chlimage_1-65

  2. Cliquez sur Exécuter le test.

    Image du bouton Exécuter les tests, représenté par un pointeur orienté à droite dans un cercle.

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

    chlimage_1-66

  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.

    chlimage_1-67

Exécution de plusieurs tests running-multiple-tests

Les suites de tests s’exécutent séquentiellement dans l’ordre dans lequel elles sont visibles dans la console. Vous pouvez analyser en profondeur un test pour afficher les résultats détaillés.

chlimage_1-68

  1. Dans le panneau Tests, cliquez sur l’une des options suivantes : Exécution de tous les tests ou le bouton Exécution de tests sous le titre de la suite de tests que vous souhaitez exécuter.

    Une image du bouton Exécuter tous les tests et du bouton Exécuter les tests, indiqué par un pointeur orienté vers la droite dans un cercle.

  2. Pour afficher les résultats de chaque cas de test, cliquez sur le titre du cas de test. Cliquez sur le nom de votre test dans le panneau Résultat pour afficher tous les détails.

    chlimage_1-69

Création et utilisation d’une suite de tests simple creating-and-using-a-simple-test-suite

La procédure suivante vous guide tout au long de la création et de l’exécution d’une suite de tests sur le contenu We.Retail. Toutefois, vous pouvez facilement modifier le test pour utiliser une autre page web.

Pour plus d’informations sur la création de vos propres suites de tests, reportez-vous à la documentation de l’API Hobbes.js.

  1. Ouvrez CRXDE Lite. (https://localhost:4502/crx/de)

  2. Cliquez avec le bouton droit de la souris sur le dossier /etc/clientlibs, puis cliquez sur Créer > Créer un dossier. Entrez myTests comme nom et cliquez sur OK.

  3. Cliquez avec le bouton droit sur le dossier /etc/clientlibs/myTests et cliquez sur Créer > Créer un nœud. Entrez les valeurs de propriété suivantes, puis cliquez sur OK  :

    • Nom : myFirstTest
    • Type : cq:ClientLibraryFolder
  4. Ajoutez les propriétés suivantes au nœud myFirstTest :

    table 0-row-3 1-row-3 2-row-3
    Nom Type Valeur
    categories Chaîne[] granite.testing.hobbes.tests
    dependencies Chaîne[] granite.testing.hobbes.testrunner
    note note
    NOTE
    AEM Forms uniquement
    Pour tester des formulaires adaptatifs, ajoutez les valeurs suivantes aux catégories et aux dépendances. Par exemple :
    categories  : granite.testing.hobbes.tests, granite.testing.hobbes.af.commons
    dependencies  : granite.testing.hobbes.testrunner, granite.testing.hobbes.af
  5. Cliquez sur Enregistrer tout.

  6. Cliquez avec le bouton droit sur le nœud myFirstTest et cliquez sur Créer > Créer un fichier. Nommez le fichier js.txt et cliquez sur OK.

  7. Dans le fichier js.txt, entrez le texte suivant :

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

  9. Cliquez avec le bouton droit sur le nœud myFirstTest et cliquez sur Créer > Créer un fichier. Nommez le fichier myTestSuite.js et cliquez sur OK.

  10. Copiez le code suivant dans le fichier myTestSuite.js, puis enregistrez le fichier :

    code language-none
    new hobs.TestSuite("Experience Content Test Suite", {path:"/etc/clientlibs/myTests/myFirstTest/myTestSuite.js"})
       .addTestCase(new hobs.TestCase("Navigate to Experience Content")
          .navigateTo("/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html")
       )
       .addTestCase(new hobs.TestCase("Hover Over Topnav")
          .mouseover("li.visible-xs")
       )
       .addTestCase(new hobs.TestCase("Click Topnav Link")
          .click("li.active a")
    );
    
  11. Accédez à la console Tests pour essayer votre suite de tests.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2