Étapes de test d’interface utilisateur personnalisée

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 10 minutes de lecture
  • Testez les interfaces utilisateur personnalisées telles que les pages d’interface utilisateur et les macros d’interface utilisateur en récupérant leurs composants de page HTML et JavaScript et en identifiant les actions de test qu’elles prennent en charge.

    Les étapes de test d’interface utilisateur personnalisées nécessitent la Framework de tests automatisés récupération et l’identification des composants testables à partir d’une page Web cible.

    Remarque :
    L’interface utilisateur Now n’est pas prise en charge par les étapes de test d’interface utilisateur personnalisée.

    Composants pouvant être testés

    Les composants de page testables sont des formats HTML et JavaScript standard avec les caractéristiques suivantes.

    Sont définis ou cliqués par l’interaction de l’utilisateur
    Les composants de page testables permettent aux utilisateurs de définir une valeur ou de cliquer dessus.
    Sont accessibles à partir du modèle d’objet de document (DOM)
    Les composants de page testables sont accessibles à partir du DOM et prennent en charge la manipulation JavaScript des DOM. Les étapes de test d’interface utilisateur personnalisées ne peuvent pas accéder aux composants de page dans le Shadow DOM.
    Sont accessibles en JavaScript
    Les composants de page testables sont accessibles en JavaScript. Les étapes de test personnalisées de l’interface utilisateur ne peuvent pas accéder aux composants de la page qui interagissent directement avec le système d’exploitation, tels que les champs de fichier, ou afficher du contenu non HTML, tel que les fichiers Excel ou PDF.
    Les nouveaux onglets ou fenêtres de navigateur ne sont pas pris en charge par les étapes de test d’interface utilisateur personnalisée.
    Ne sont pas exclus des tests d’interface utilisateur personnalisés
    Les composants de page testables ne sont pas exclus des tests d’interface utilisateur personnalisés. Framework de tests automatisés exclut les composants de page qui peuvent déjà être testés par d’autres catégories d’étapes de test et exclut également les composants de page associés aux Now Platform fonctionnalités.
    Sont accessibles à l’inspecteur de page
    Les composants de page testables doivent renvoyer des résultats lorsqu’ils Inspecteur de pagesont affichés à partir du fichier . Les concepteurs de tests peuvent utiliser l’inspecteur de page pour identifier les composants testables d’une page.
    Les éléments d’interface utilisateur suivants sont des exemples de composants de page testables.
    • Boutons
    • Liens
    • Texte de la page
    • Contrôles de l'interface utilisateur
    • Macros d'interface utilisateur
      • ui_date
      • ui_date_time
      • ui_reference
    • Pages de l'interface utilisateur
    • Assistants

    Les éléments d’interface utilisateur suivants sont des exemples de composants de page non testables.

    Tableau 1. Exemples de composants de page non testables
    Motif non testable Composants de page non testables
    Ne sont pas définissables ni cliquables Contrôles masqués
    Commentaires HTML
    Éléments de mise en page HTML tels que div, section et span.
    Éléments de script HTML
    Sont inaccessibles depuis les DOM Tableaux de bord
    Images
    Listes
    Rapports
    Shadow DOM
    Sont inaccessibles à JavaScript Fichiers Excel
    Champs de fichier
    Fichiers PDF
    Sont Now Platform des fonctionnalités Concepteur de flux
    Studio
    Mettre à niveau le moniteur
    Peuvent être testées par d’autres catégories d’étapes de test Étiquettes de champs de formulaire
    Valeurs des champs de formulaire
    Catalogue de services
    Espaces de travail

    Composants de page définissables

    Un composant paramétrable est un élément d’interface utilisateur qui a une valeur dynamique telle qu’un champ d’entrée de texte. Les composants définissables prennent en charge ces actions de test et étapes de test.

    Tableau 2. Options de test pour les composants définissables
    Actions de l’inspecteur de page Étapes de test d’interface utilisateur personnalisée
    Définir la valeur de composant Définir les valeurs de composant (interface utilisateur personnalisée)
    Obtenir la valeur de composant Déclarer le texte sur la page (interface utilisateur personnalisée)
    Validation de la valeur de composant (interface utilisateur personnalisée)
    Est un composant désactivé Validation de l'état de composant (interface utilisateur personnalisée)

    Les composants définissables ont un type de données qui détermine les valeurs qu’une étape de test d’interface utilisateur personnalisée peut définir. Par exemple, un composant de page destiné à afficher une référence à un enregistrement particulier peut avoir un type de données de référence pour afficher uniquement les valeurs d’ID système.

    Framework de tests automatisés permet aux développeurs d’interface utilisateur de spécifier un type de données à utiliser lors du test d’interface utilisateur personnalisée. Les développeurs d’interface utilisateur peuvent affecter un type de données aux composants de page pour s’assurer qu’une étape de test définit une valeur valide. Ces types de données sont pris en charge.
    • Date
    • Date/Heure
    • Référence

    Consultez Remplacer le type de données du composant pour plus d'informations.

    Composants de page cliquables

    Un composant cliquable est un élément de l’interface utilisateur avec lequel les utilisateurs peuvent interagir en cliquant dessus, comme les entrées de type case à cocher ou radio. Les composants cliquables prennent en charge ces actions de test.

    Tableau 3. Options de test pour les composants cliquables
    Actions de l’inspecteur de page Étapes de test d’interface utilisateur personnalisée
    Cliquer sur le composant Cliquer sur composant (interface utilisateur personnalisée)
    Obtenir la valeur de composant Déclarer le texte sur la page (interface utilisateur personnalisée)
    Validation de la valeur de composant (interface utilisateur personnalisée)
    Est un composant désactivé Validation de l'état de composant (interface utilisateur personnalisée)

    Les composants cliquables n’ont pas de type de données, car ils n’ont pas de valeurs dynamiques.

    Composants de page récupérés

    Framework de tests automatisés stocke une liste des composants de page récupérés pour chaque page d’interface utilisateur personnalisée que vous testez. Les étapes de test d’interface utilisateur personnalisées affichent la liste des composants récupérés à partir des champs Composant et Valeurs de composant .

    Par défaut, la liste des composants de la page est statique et n’est mise à jour que lorsque les concepteurs de tests cliquent manuellement sur Récupérer les composants. Les administrateurs peuvent activer la propriété sn_atf.page_data_capture.enabled système pour actualiser la liste des composants de la page chaque fois qu’une étape de test d’interface utilisateur personnalisée est exécutée. L’activation de cette propriété pendant la conception du test garantit que vos concepteurs de tests ont toujours accès à la liste la plus récente des composants de la page. La désactivation de cette propriété une fois la conception de test terminée permet à vos tests de s’exécuter plus rapidement, car les étapes de test peuvent utiliser la liste des composants de page précédemment récupérée.

    L’traite Now Platform la liste des composants de page récupérés comme des données et ne les inclut pas dans les ensembles de mises à jour ou les fichiers d’applications. Lors du transfert des tests d’une instance à l’autre, les concepteurs de tests doivent à nouveau récupérer manuellement les composants de la page.

    Considérations relatives à la conception

    Suivez ces considérations de conception lorsque vous testez des pages d’interface utilisateur personnalisées et des composants de page.

    Utiliser l’inspecteur de page pour identifier les composants de page testables
    L’inspecteur de page détermine quels composants de page sont disponibles pour le test d’interface utilisateur personnalisé. Les composants de page qui ne sont pas disponibles pour l’inspecteur de page ne sont pas disponibles pour le test d’interface utilisateur personnalisé.
    Accédez à l’interface utilisateur personnalisée que vous souhaitez tester
    Utilisez les étapes de test existantes pour accéder à l’interface utilisateur personnalisée cible. Par exemple, pour tester un article de la base de connaissances, utilisez les étapes de test existantes pour accéder à un module ou pour ouvrir un enregistrement existant. La plupart des tests d’interface utilisateur personnalisés nécessitent l’utilisation de catégories d’étapes de test existantes dans le cadre du test.
    Utiliser la zone de composant pour identifier les composants de la page
    La zone de composant décrit l’élément de mise en page HTML qui contient le composant, tel qu’un <div> élément ou <section> . Cette zone aide les concepteurs de tests à distinguer les composants en fournissant l’emplacement dans la mise en page.
    Testez votre interface utilisateur personnalisée plutôt que l’interface Now Platform utilisateur
    Le empêche le Framework de tests automatisés test d’interface utilisateur personnalisé des Now Platform fonctionnalités. Par exemple, vous ne pouvez pas tester les tableaux de bord ou les concepteurs graphiques. Au lieu de cela, créez des tests pour valider vos pages et éléments d’interface utilisateur personnalisés, car vous avez un contrôle direct sur ces interfaces utilisateur.
    Utiliser des attributs HTML pour remplacer les propriétés de test du composant de la page
    Modifiez les propriétés de test d’un composant de page particulier à l’aide des attributs HTML spécifiques à Framework de tests automatisés. Reportez-vous à Remplacer les actions de test du composant.
    Récupérer à nouveau les composants de la page lorsque vous déplacez des tests vers une autre instance
    Les étapes de test d’interface utilisateur personnalisées ne stockent pas les composants d’interface utilisateur en tant que métadonnées. Les testeurs doivent à nouveau récupérer manuellement les composants de la page lors du déplacement des tests entre les instances.

    Exemple de test d’interface utilisateur personnalisé

    Vous pouvez utiliser la liste des composants récupérés pour concevoir des étapes de test d’interface utilisateur personnalisées. Par exemple, supposons que vous souhaitiez tester la révision et les commentaires d’un article de la base de connaissances. Un article de la base de connaissances contient plusieurs composants de page qui nécessitent des étapes d’interface utilisateur personnalisées à tester.

    Figure 1. Exemple de page d’article de la base de connaissances
    Page affichant KB0011110 « Guide de codage sécurisé ServiceNow pour les développeurs d’instance »
    Par exemple, ces composants de page nécessitent des étapes de test d’interface utilisateur personnalisées.
    1. Le nombre de vues de l’article.
    2. Les boutons permettant de marquer l’article comme utile.
    3. Zone de texte pour laisser un commentaire.
    Ces étapes illustrent les tests d’interface utilisateur personnalisés sur un article de la base de connaissances. L’exemple de test se compose des étapes de test d’interface utilisateur existantes et personnalisées.
    1. Accédez au module. Accédez au module « Publié » dans l’application « Connaissances ».
    2. Ouvrez un enregistrement existant. Ouvrez le formulaire « Connaissances » avec l’ID « Connaissances : KB0011110 ».
    3. Cliquez sur une action d’interface utilisateur. Cliquez sur l’action d’interface utilisateur « Afficher l’article » dans le formulaire « Connaissances ».
    4. Déclarer le texte sur la page (interface utilisateur personnalisée). Vérifiez que le texte « développeurs » est sur la page.
    5. Définir les valeurs de composant (interface utilisateur personnalisée). Définissez les composants sur la page comme suit : 'Zone de texte <textarea> [article_comments]' = Mettre à jour avec l’article réel plutôt qu’avec l’URL vers l’article ailleurs.
    6. Cliquer sur composant (interface utilisateur personnalisée). Cliquez sur le composant : 'Bouton <button>: Commenter'.
    7. Déclarer le texte sur la page (interface utilisateur personnalisée). Vérifiez que le texte « Mettre à jour avec l’article actuel plutôt que l’URL vers l’article ailleurs. » est sur la page.
    Figure 2. Exemples d’étapes de test pour un test d’article de base de connaissances
    Capture d’écran affichant un exemple de test avec sept étapes de test.

    Version et ordre des composants d’interface utilisateur personnalisés

    Lorsque vous sélectionnez un composant dans l’une des étapes de test d’interface utilisateur personnalisée, la version d’interface utilisateur personnalisée peut s’afficher. S’il y a plusieurs composants en double, l’ordre des composants s’affiche.

    Image montrant la commande pour les composants en double

    Remarque :
    • La version d’interface utilisateur personnalisée s’affiche uniquement s’il existe au moins deux composants différents avec des versions d’interface utilisateur personnalisées différentes.
    • L’ordre s’affiche uniquement s’il y a des composants en double dans le menu déroulant des composants. Vous pouvez les lever l’ambiguïté en fonction de l’ordre affiché.
    • La version d’interface utilisateur personnalisée et l’ordre s’affichent tous deux s’il existe plusieurs composants en double de versions différentes.

    Identification des composants

    Implémentez une autre méthode d’identification de votre composant à l’aide de l’attribut sn-atf-id. Cela est utile si l’attribut name ou id de votre composant est dynamique et change à chaque exécution d’un test. Ajoutez l’attribut sn-atf-id avec une valeur cohérente pour permettre à ATF d’identifier votre composant lors de l’exécution d’un test. Il vous permet également d’identifier votre composant lors de la création d’un test. Par exemple, dans un composant de bouton
    <button sn-atf-id="consistentValue">Test</button>
    Remarque :
    À partir de la Rome version, si vous avez exactement un composant sur la page qui possède un attribut sn-atf-id, ATF trouve ce composant indépendamment de tous les autres attributs de ce composant.

    Améliorer l’identification des composants ATF

    Identifiez votre composant à l’aide du chemin d’accès de l’étiquette inclus dans la colonne Zone de page . À partir de la Rome mise en production, la propriété sn_atf.element.use_label_path a été définie sur vrai par défaut.

    Si un composant possède l’attribut sn-atf-area , la colonne Zone de page affiche la valeur sn-atf-area . Si l’attribut sn-atf-area n’est pas présent, le chemin d’accès de l’étiquette pour ce composant s’affiche dans la colonne Zone de page.

    Image montrant le chemin d’accès de l’étiquette du composant

    Remarque :
    Si vous avez plusieurs valeurs d’étiquette portant le même nom, le chemin d’accès de l’étiquette vous aide à identifier le composant approprié. Si un composant n’a pas d’attribut sn-atf-area ou de chemin d’accès d’étiquette, la valeur s’affiche par défaut.

    Image montrant la valeur par défaut des composants

    Lorsque vous sélectionnez le composant requis dans la liste et que vous cliquez sur Soumettre, la description de l’étape de test est également mise à jour avec plus de détails.

    Image montrant une description mise à jour d’une étape de test soumise