---
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


---

Remplacer les actions de test du composant
==========================================

Remplacer les actions de test du composant {#ariaid-title1}
===========================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes de lecture

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.

Avant de commencer
------------------

Rôle requis : admin

Pourquoi et quand exécuter cette tâche
--------------------------------------

Lorsqu'un Framework de tests automatisés composant est récupéré, il détermine les interactions qu'il prend en charge, par exemple s'il s'agit d'un composant définissable ou cliquable. Si le composant peut être définie, Framework de tests automatisés détermine le type de champ qui peut être défini. Si Framework de tests automatisés les actions ou les types de champs de votre composant personnalisé sont incorrectement définis, ou si votre composant contient plusieurs éléments DOM qui doivent être traités comme une seule entité, définissez-les explicitement à l'aide des attributs HTML spécifiques à Framework de tests automatisés.

Utilisation des attributs sn-atf-clickable et sn-atf-settable {#ariaid-title2}
------------------------------------------------------------------------------

Utilisez `les attributs sn-atf-clickable` et `sn-atf-settable` pour spécifier qu'un élément et ses éléments enfants doivent être traités comme un composant cliquable personnalisé ou définissable personnalisé.

### Avant de commencer

Rôle requis : admin

### Procédure

1. Ouvrez la page d'interface utilisateur personnalisée que vous souhaitez tester.
2. Ajoutez l'attribut `sn-atf-clickable` ou `sn-atf-settable` à l'élément testé.  

       <div sn-atf-clickable="true" sn-atf-disabled id="customClickable">
       	<button id="customButton">Click me</button>
       </div>

       <div sn-atf-settable="true" id="customSettable" sn-atf-component-value="A default value">
       	<input id="customInput" value="A default value"></input>
       </div>

   Remarque :  
   Vous pouvez utiliser `l'attribut sn-atf-clickable` ou `sn-atf-settable` pour spécifier si un élément doit être traité comme un composant cliquable personnalisé ou définissable personnalisé. Vous ne pouvez pas utiliser les deux attributs sur le même élément.
3. Utilisez l'attribut `sn-atf-clickable` ou `sn-atf-settable` .  
   * `sn-atf-clickable` : si vous avez ajouté l'attribut `sn-atf-clickable` , ATF clique sur le composant en envoyant un événement `sn-atf-click` à l'élément DOM avec l'attribut `sn-atf-clickable` . Vous devez ajouter un écouteur d'événement (par exemple, à l'aide `d'addEventListener`) à cet élément DOM et implémenter votre logique de clic personnalisée pour le composant. Vous pouvez interagir avec un composant cliquable personnalisé à l'aide de l'étape [de test Cliquer sur composant](https://servicenow-prod.fluidtopics.net/Xof9g0dMIFFGoeyguZozkQ#atf-click-component "Cliquez sur un composant d’une page d’interface utilisateur personnalisée.") . {#atf-override-component-class-02__table_r5q_gry_cgb__entry__2}

     |     Nom d'attribut     |                                                                                                  Description                                                                                                   |
     |------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
     | sn-atf-disabled        | La présence de cet attribut facultatif (quelle que soit sa valeur) indique à ATF que ce composant est désactivé Remarque : Si cet attribut est manquant, ATF considère que ce composant est activé par défaut. |
     | sn-atf-component-value | Chaîne ou objet JSON qui indique à ATF la valeur actuelle de ce composant                                                                                                                                      |
     [Tableau 1. Attributs de composants cliquables]

     {#atf-override-component-class-02__table_r5q_gry_cgb}
   * `sn-atf-settable` : si vous avez ajouté l'attribut `sn-atf-settable` , ATF définit la valeur du composant en envoyant un événement `sn-atf-setvalue` à l'élément DOM avec l'attribut `sn-atf-settable` . Vous devez ajouter un écouteur d'événement (par exemple, à l'aide `d'addEventListener`) à cet élément DOM et implémenter votre logique de valeur de définition personnalisée pour le composant. La valeur qui doit être définie est accessible avec `event.detail.newvalue`. `L'argument event` est transmis à votre gestionnaire d'événements. Vous pouvez interagir avec un composant sertable personnalisé à l'aide de l'étape [de test Définir les valeurs de composant](https://servicenow-prod.fluidtopics.net/Xof9g0dMIFFGoeyguZozkQ#atf-set-component-values "Définissez les valeurs de composant sur une page d’interface utilisateur personnalisée.") . {#atf-override-component-class-02__table_kml_csy_cgb__entry__2}

     |     Nom d'attribut      |                                                                                                   Description                                                                                                   |
     |-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
     | sn-atf-disabled         | La présence de cet attribut facultatif (quelle que soit sa valeur) indique à ATF que ce composant est désactivé. Remarque : Si cet attribut est manquant, ATF considère que ce composant est activé par défaut. |
     | sn-atf-component-value  | Chaîne ou objet JSON qui indique à ATF la valeur actuelle de ce composant.                                                                                                                                      |
     | sn-atf-data-type        | Type facultatif de champ à présenter à l'utilisateur lors de la création d'une étape. La valeur par défaut est string. Par exemple, `glide_date_time`, référence, booléen, etc.                                 |
     | sn-atf-data-type-params | Objet JSON avec plus de détails sur le type de données.                                                                                                                                                         |
     [Tableau 2. Attributs de composant définissables]

     {#atf-override-component-class-02__table_kml_csy_cgb}
   {#atf-override-component-class-02__ul_xst_3rq_slb}
{#atf-override-component-class-02__steps_jyp_gkz_1gb}

### Exemple

    //A custom clickable component

    <div sn-atf-clickable="true" sn-atf-disabled id="customClickable">
    	<button id="customButton">Click me</button>
    </div>
    <script>
    	var customClickableDiv = document.getElementById("customClickable");
    	customClickableDiv.addEventListener('sn-atf-click', function() {
    		document.getElementById('customButton').click();
    	});
    </script>

    //A custom settable component

    <div sn-atf-settable="true" id="customSettable" sn-atf-component-value="A default value">
    	<input id="customInput" value="A default value"></input>
    </div>
    <script>
    	var customSettableDiv = document.getElementById("customSettable");
    	customSettableDiv.addEventListener('sn-atf-setvalue', function(event) {
    		var newValue = event.detail.newValue;
    		document.getElementById("customInput").value = newValue;
    	});
    </script>

Utilisation de l'attribut sn-atf-class {#ariaid-title3}
-------------------------------------------------------

Utilisez l'attribut `sn-atf-class` pour spécifier l'objet JavaScript à utiliser lors du test d'un composant personnalisé cliquable ou définissable. Écrivez un objet JavaScript personnalisé pour spécifier les actions de test disponibles pour un composant personnalisé.

### Avant de commencer

Rôle requis : admin

### Pourquoi et quand exécuter cette tâche

Les concepteurs de tests peuvent spécifier manuellement les actions de test disponibles pour un composant personnalisé en écrivant un objet JavaScript personnalisé et en affectant au composant un attribut `sn-atf-class` . Définissez la valeur de l'attribut sur le nom de l'objet JavaScript contenant les actions de test du composant. Les composants personnalisés testables doivent être cliquables ou définissables, et cette classification détermine les fonctions et propriétés requises par votre objet JavaScript. Reportez-vous à la section pour connaître les [Étapes de test d'interface utilisateur personnalisées](https://servicenow-prod.fluidtopics.net/aejKkgWqtyVaq8r24Sqisw "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.") exigences de composant de page testable.

### Procédure

1. Ouvrez la page d'interface utilisateur personnalisée que vous souhaitez tester.
2. Ajoutez l'attribut `sn-atf-class` à l'élément testé et définissez la valeur sur le nom de l'objet JavaScript incorporé dans la page qui gère les fonctions getValue(), setValue(), click() ou isDisabled().  

       <div sn-atf-class="MyClickableComponent">
           <label for="a_clickable_checkbox">MyClickableComponent</label>
           <input type="checkbox" id="a_clickable_checkbox" checked="true"/>
       </div>

3. Créez l'objet JavaScript spécifié dans l'attribut `sn-atf-class` et ajoutez les fonctions et l'attribut nécessaires pour identifier votre composant de page personnalisé en tant que composant de page cliquable ou définissable.  
   {#override-component-class__table_r5q_gry_cgb__entry__2}

   | Nom de fonction |                                                                                                                  Description                                                                                                                   |
   |-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
   | initialize()    | Obtient les valeurs initiales du composant. Saisissez : $super(element, area)                                                                                                                                                                  |
   | clic()          | Sélectionne le composant. Renvoie un objet JSON avec les propriétés suivantes : `Réussite` : vrai si vous pouvez cliquer sur le composant. Remarque : Déclenche le mécanisme d'attente intelligent de l'étape de test d'interface utilisateur. |
   | getValue()      | Obtient la valeur de l'élément. Renvoie un objet JSON avec les propriétés suivantes : * `Réussite` : vrai si la valeur est récupérée. * `Résultat` : la valeur du composant. {#override-component-class__ul_jym_3mm_wfb}                       |
   | isDisabled()    | Indique si le composant est désactivé. Renvoie un objet JSON avec les propriétés suivantes : * `Réussite` : vrai si le composant est désactivé. * `Résultat` : vrai si le composant est désactivé. {#override-component-class__ul_ont_4qm_wfb} |
   [Tableau 3. Fonctions des composants cliquables]

   {#override-component-class__table_r5q_gry_cgb}  
   {#override-component-class__table_kml_csy_cgb__entry__2}

   |     Nom de fonction      |                                                                                                                                   Description                                                                                                                                   |
   |--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
   | initialize()             | Obtient les valeurs initiales du composant. Saisissez : $super(element, area)                                                                                                                                                                                                   |
   | setValue(nouvellevaleur) | Définit la valeur du composant. Consultez le deuxième exemple ci-dessous. Renvoie un objet JSON avec les propriétés suivantes : `Réussite` : vrai si la valeur est définie. Remarque : Déclenche le mécanisme d'attente intelligent de l'étape de test d'interface utilisateur. |
   | getValue()               | Obtient la valeur de l'élément. Renvoie un objet JSON avec les propriétés suivantes : * `Réussite` : vrai si la valeur est récupérée. * `Résultat` : la valeur du composant. {#override-component-class__ul_mml_csy_cgb}                                                        |
   | isDisabled()             | Indique si le composant est désactivé. Renvoie un objet JSON avec les propriétés suivantes : * `Réussite` : vrai si le composant est désactivé. * `Résultat` : vrai si le composant est désactivé. {#override-component-class__ul_nml_csy_cgb}                                  |
   [Tableau 4. Fonctions des composants définissables]

   {#override-component-class__table_kml_csy_cgb}  
   {#override-component-class__table_p2n_psy_cgb__entry__2}

   |  Nom d'attribut   |                           Description                           |
   |-------------------|-----------------------------------------------------------------|
   | isSettable : vrai | Identifie le composant comme un composant de page définissable. |
   [Tableau 5. Attribut de composant définissable]

   {#override-component-class__table_p2n_psy_cgb}
4. Lors de la création de votre composant personnalisé dans Jelly, ajoutez `des balises <g2 :atf_only>` autour de l'objet JavaScript spécifié dans l'attribut `sn-atf-class` .  
   Ces balises garantissent que le système exécute uniquement l'objet JavaScript pendant les tests automatisés.
{#override-component-class__steps_jyp_gkz_1gb}

### Exemple

    //A custom clickable component

    <form>
         <div sn-atf-class="MyClickableComponent">
             <label for="a_clickable_checkbox">MyClickableComponent</label>
             <input type="checkbox" id="a_clickable_checkbox" checked="true"/>
         </div>
    </form>
    <script>
    var MyClickableComponent = {

        // The constructor must have this signature, but you can perform additional setup after the $super(element, area) call
        initialize: function($super, element, area) {
            $super(element, area);
        },

        click: function() {
            document.getElementById('a_clickable_checkbox').click();
            return {success: true};
        },

        // The function returns an object with a result attribute of type String
        getValue: function() {
            var isChecked = document.getElementById('a_clickable_checkbox').checked ? "true" : "false";
            return {success: true, result: isChecked};
        },

        // The function returns an object with a result attribute of type Boolean
        isDisabled: function() {
            if (document.getElementById('a_clickable_checkbox').disabled)
                return {success: true, result: true};

            return {success: true, result: false};
        },

    };
    </script>

    //A custom settable component

    <form>
        <div sn-atf-class="MySettableComponent">
            <label for="a_settable_checkbox">MySettableComponent</label>
            <input type="checkbox" id="a_settable_checkbox" checked="true"/>
        </div>
    </form>
    <script>
    var MySettableComponent = {

        // This attribute is required for settable components
        isSettable: true,

        // The constructor must have this signature, but you can perform additional setup after the $super(element, area) call
        initialize: function($super, element, area) {
            $super(element, area);
        },

        // The value parameter is a string
        setValue: function(value) {
            document.getElementById('a_settable_checkbox').checked = (value == "true");
            return {success: true};
        },

        // The function returns an object with a result attribute of type String
        getValue: function() {
            var isChecked = document.getElementById('a_settable_checkbox').checked ? "true" : "false";
            return {success: true, result: isChecked};
        },

        // The function returns an object with a result attribute of type Boolean
        isDisabled: function() {
            if (document.getElementById('a_settable_checkbox').disabled)
                return {success: true, result: true};

            return {success: true, result: false};
        },

    };
    </script>

Référence et sélecteur d'enregistrement {#ariaid-title4}
--------------------------------------------------------

Utilisez des étapes d'interface utilisateur personnalisées pour manipuler les valeurs des directives angulaires `sn-reference-picker` et `sn-record-picker` . La valeur d'un sélecteur de référence renvoie le `sys_id` de l'enregistrement choisi. La valeur d'un sélecteur d'enregistrement renvoie le champ de valeur choisi pour ce sélecteur d'enregistrement. Les deux éléments peuvent être définis en sélectionnant un enregistrement à définir comme valeur.