--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Étapes de test d'interface utilisateur personnalisées ===================================================== Étapes de test d'interface utilisateur personnalisées {#ariaid-title1} ====================================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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 de récupérer et d'identifier Framework de tests automatisés les composants pouvant être testés à partir d'une page Web cible. Remarque : Les pages Next UI Experience ne sont pas prises en charge par les étapes de test d'interface utilisateur personnalisées, y compris, mais sans s'y limiter, les espaces de travail configurables (à l'exception des étapes de formulaire) et le générateur d'IU. Composants testables {#custom-ui-test-steps__section_sd1_rfv_bgb} ----------------------------------------------------------------- Les composants de page testables se composent de HTML et JavaScript standard avec ces caractéristiques. 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 depuis le modèle d'objet de document (DOM) : Les composants de page testables sont accessibles à partir du DOM et prennent en charge la manipulation JavaScript du 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 d'interface utilisateur personnalisées ne peuvent pas accéder aux composants de page qui interagissent directement avec le système d'exploitation, tels que les champs de fichier ou affichent du contenu non HTML, tels que des 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ées. 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 sont affichés à partir du fichier [Inspecteur de page](https://servicenow-prod.fluidtopics.net/MScHXFcJ1evhuSN3PhVj5g "Identifiez les composants de page HTML et JavaScript dans vos interfaces utilisateur qui sont disponibles pour les tests d’interface utilisateur personnalisés. Activez le test automatisé en vous assurant que vos interfaces utilisateur ne contiennent que des composants de page testables."). Les concepteurs de tests peuvent utiliser l'inspecteur de page pour identifier les composants testables d'une page. Ces éléments d'interface utilisateur sont des exemples de composants de page pouvant être testés. * Boutons * Liens * Texte de la page * Contrôles de l'interface utilisateur * Macros d'interface utilisateur * ui_date * ui_date_time * ui_reference {#custom-ui-test-steps__ul_izq_p31_bgb} * Pages de l'interface utilisateur * Assistants {#custom-ui-test-steps__ul_yl4_nty_4fb} Ces éléments d'interface utilisateur sont des exemples de composants de page ne pouvant pas être testés. {#custom-ui-test-steps__table_j5s_pyy_1gb__entry__2} | Motif non testable | Composants de page impossibles à tester | |--------------------------------------------------------------|--------------------------------------------------------------| | Ne sont pas définissables ni cliquables | Contrôles masqués | | Ne sont pas définissables ni cliquables | Commentaires HTML | | Ne sont pas définissables ni cliquables | Éléments de mise en page HTML tels que div, section et span. | | Ne sont pas définissables ni cliquables | Éléments de script HTML | | Sont inaccessibles à partir des DOM | Tableaux de bord | | Sont inaccessibles à partir des DOM | Images | | Sont inaccessibles à partir des DOM | Listes | | Sont inaccessibles à partir des DOM | Rapports | | Sont inaccessibles à partir des DOM | DOM fantôme | | Sont inaccessibles à JavaScript | Fichiers Excel | | Sont inaccessibles à JavaScript | Champs de fichier | | Sont inaccessibles à JavaScript | Fichiers PDF | | Sont Now Platform des fonctionnalités | Concepteur de flux | | Sont Now Platform des fonctionnalités | Studio | | Sont Now Platform des fonctionnalités | Mettre à niveau le moniteur | | Peuvent être testés par d'autres catégories d'étapes de test | Étiquettes de champs de formulaire | | Peuvent être testés par d'autres catégories d'étapes de test | Valeurs des champs de formulaire | | Peuvent être testés par d'autres catégories d'étapes de test | Catalogue de services | | Peuvent être testés par d'autres catégories d'étapes de test | Espaces de travail | [Tableau 1. Exemple de composants de page ne pouvant pas être testés] {#custom-ui-test-steps__table_j5s_pyy_1gb} Composants de page définissables {#custom-ui-test-steps__section_kmt_kwt_1gb} ----------------------------------------------------------------------------- Un composant pouvant être défini 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. {#custom-ui-test-steps__table_qt2_mqy_1gb__entry__2} | Actions de l'inspecteur de page | Étapes de test d'interface utilisateur personnalisées | |---------------------------------|----------------------------------------------------------------------------| | 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) | | Obtenir la valeur de composant | 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) | [Tableau 2. Options de test pour les composants définissables] {#custom-ui-test-steps__table_qt2_mqy_1gb} 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 de l'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 des tests d'interface utilisateur personnalisés. 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 {#custom-ui-test-steps__ul_vzp_ygv_bgb} Consultez [Remplacer le type de données de composant](https://servicenow-prod.fluidtopics.net/uEo0JT2Xau6h~H1~KWp06g "Utilisez les attributs sn-atf-data-type et sn-atf-data-type-params pour remplacer le type de champ affiché dans une étape de test Définir la valeur de composant.") pour plus d'informations. Composants de page cliquables {#custom-ui-test-steps__section_rhc_mwt_1gb} -------------------------------------------------------------------------- Un composant cliquable est un élément d'interface utilisateur avec lequel les utilisateurs peuvent interagir en cliquant, par exemple des entrées de type case à cocher ou cases d'option. Les composants cliquables prennent en charge ces actions de test. {#custom-ui-test-steps__table_fcv_cry_1gb__entry__2} | Actions de l'inspecteur de page | Étapes de test d'interface utilisateur personnalisées | |---------------------------------|----------------------------------------------------------------------------| | 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) | | Obtenir la valeur de composant | 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) | [Tableau 3. Tester les options pour les composants cliquables] {#custom-ui-test-steps__table_fcv_cry_1gb} 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 {#custom-ui-test-steps__section_otr_v1k_cgb} ------------------------------------------------------------------------- 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 du 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 page. La désactivation de cette propriété une fois la conception du 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. 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 de tests d'une instance à une autre, les concepteurs de tests doivent à nouveau récupérer manuellement les composants de page. Considérations relatives à la conception {#custom-ui-test-steps__section_kzp_5qb_qfb} ------------------------------------------------------------------------------------- Suivez ces considérations de conception lorsque vous testez des pages d'interface utilisateur et des composants de page personnalisés. Utiliser l'inspecteur de page pour identifier les composants de page pouvant être testés : L'inspecteur de page détermine les composants de page disponibles pour les tests d'interface utilisateur personnalisés. Les composants de page qui ne sont pas disponibles pour l'inspecteur de page ne sont pas disponibles pour les tests d'interface utilisateur personnalisés. 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 contenant le composant, tel qu'un `
` élément ou `
` . La zone aide les concepteurs de tests à distinguer les composants en fournissant l'emplacement dans la mise en page. Tester votre interface utilisateur personnalisée plutôt que l'interface Now Platform utilisateur : Cela Framework de tests automatisés empêche les tests d'interface utilisateur personnalisés des Now Platform fonctionnalités. Par exemple, vous ne pouvez pas tester les tableaux de bord ou les graphistes. 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 des composants de la page : Modifiez les propriétés de test d'un composant de page particulier à l'aide d'attributs HTML spécifiques à Framework de tests automatisés. Consultez [Remplacer les actions de test du composant](https://servicenow-prod.fluidtopics.net/2ExHVJitsZpbJ1i3kcMPJQ#develop-testable-components "Modifiez les propriétés de test d’un composant de page particulier à l’aide d’attributs HTML spécifiques à Framework de tests automatisés."). Récupérer à nouveau les composants de page lorsque vous déplacez les tests vers une autre instance : Les étapes de test d'interface utilisateur personnalisées ne stockent pas de composants d'interface utilisateur en tant que métadonnées. Les testeurs doivent à nouveau récupérer manuellement les composants de page lors du déplacement des tests entre les instances. Exemple de test d'interface utilisateur personnalisée {#custom-ui-test-steps__section_oph_4ts_4fb} -------------------------------------------------------------------------------------------------- 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 le commentaire 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 pour être testés. Figure 1. Exemple de page d'article de la base de connaissances Par exemple, ces composants de page nécessitent des étapes de test d'interface utilisateur personnalisées. 1. Nombre de vues de l'article. 2. Boutons permettant de marquer l'article comme utile. 3. La zone de texte pour laisser un commentaire. {#custom-ui-test-steps__ol_nkz_p5f_pfb} Ces étapes illustrent des tests d'interface utilisateur personnalisés sur un article de la base de connaissances. L'exemple de test comprend ces étapes de test d'interface utilisateur existantes et personnalisées. 1. Accédez au module. Accédez au module \<\< Publié \>\> dans l'application \<\< Base de connaissances \>\>. 2. Ouvrez un enregistrement existant. Ouvrez le formulaire \<\< Connaissances \>\> avec l'ID \<\< Base de connaissances : KB0011110 \>\>. 3. Cliquez sur une action d'interface utilisateur. Cliquez sur l'action d'interface utilisateur \<\< Afficher l'article \>\> sur 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 \ \[article_comments\]' = Mettre à jour avec l'article réel plutôt que l'URL vers l'article ailleurs. 6. Cliquer sur composant (interface utilisateur personnalisée). Cliquez sur le composant : \<\< Bouton \: Commentaire \>\>. 7. Déclarer le texte sur la page (interface utilisateur personnalisée). Affirmez que le texte \<\< Mettre à jour avec l'article réel plutôt que l'URL vers l'article ailleurs. \>\> est sur la page. {#custom-ui-test-steps__ol_h5s_brs_4fb} Figure 2. Exemples d'étapes de test pour le test d'un article de base de connaissances Version et ordre des composants d'interface utilisateur personnalisés {#custom-ui-test-steps__section_ptz_sxc_jlb} ------------------------------------------------------------------------------------------------------------------ Lorsque vous sélectionnez un composant dans l'une des étapes de test d'interface utilisateur personnalisées, la version d'interface utilisateur personnalisée peut s'afficher. S'il y a plusieurs composants en double, l'ordre des composants s'affiche. Remarque : * La version de l'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 du composant. Vous pouvez les désambiguïser en fonction de l'ordre affiché. * La version d'interface utilisateur personnalisée et la commande s'affichent s'il y a plusieurs composants en double de versions différentes. {#custom-ui-test-steps__ul_fwz_m5k_hcc} Identification des composants {#custom-ui-test-steps__section_x4b_nhb_5mb} -------------------------------------------------------------------------- Implémentez un autre moyen d'identifier 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 Remarque : À partir de la mise en Rome production, si vous avez exactement un composant sur la page qui a l'attribut sn-atf-id, ATF recherche ce composant indépendamment de tout autre attribut de ce composant. Améliorer l'identification des composants ATF {#custom-ui-test-steps__section_acq_qxg_hpb} ------------------------------------------------------------------------------------------ Identifiez votre composant à l'aide du chemin d'accès de l'étiquette inclus dans la colonne Zone de page . Depuis la mise en Rome production, la propriété `sn_atf.element.use_label_path` est définie sur true 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 à l'étiquette de ce composant est affiché dans la colonne Zone de page. Remarque : Si vous avez plusieurs valeurs d'étiquettes portant le même nom, le chemin d'accès de l'étiquette vous aide à identifier le composant correct. Si un composant n'a pas d'attribut `sn-atf-area` ni de chemin d'accès d'étiquette, la valeur s'affiche par défaut. 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. * **[Inspecteur de page](https://servicenow-prod.fluidtopics.net/MScHXFcJ1evhuSN3PhVj5g)** Identifiez les composants de page HTML et JavaScript dans vos interfaces utilisateur qui sont disponibles pour les tests d'interface utilisateur personnalisés. Activez le test automatisé en vous assurant que vos interfaces utilisateur ne contiennent que des composants de page testables. * **[Activer et utiliser l'inspecteur de page](https://servicenow-prod.fluidtopics.net/s1RN11tUsi4JBMGlnZzLGA)** Activez un paramètre de développeur pour inspecter les pages de l'interface utilisateur qui s'ouvrent dans la plateforme. Utilisez l'inspecteur de page de manuel pour inspecter les pages qui s'ouvrent dans un nouvel onglet, par exemple Portail de services les pages. * **[Créer un test d'interface utilisateur personnalisé](https://servicenow-prod.fluidtopics.net/sc0AN2xKfGmq_LdY0UIy2w)** Testez les composants dans des pages d'interface utilisateur personnalisées. * **[Remplacer les actions de test du composant](https://servicenow-prod.fluidtopics.net/2ExHVJitsZpbJ1i3kcMPJQ#develop-testable-components)** Modifiez les propriétés de test d'un composant de page particulier à l'aide d'attributs HTML spécifiques à Framework de tests automatisés. * **[Remplacer le type de données de composant](https://servicenow-prod.fluidtopics.net/uEo0JT2Xau6h~H1~KWp06g)** Utilisez les attributs `sn-atf-data-type` et `sn-atf-data-type-params` pour remplacer le type de champ affiché dans une étape de test Définir la valeur de composant. * **[Fonctionnalités Select2 dans ATF](https://servicenow-prod.fluidtopics.net/KfpTZzq~I_0Au~8MfDun4Q)** Utilisez le composant Select2 pour rechercher et sélectionner facilement votre option dans un menu déroulant.