---
sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - de-DE

ft:publication_title :

    - Yokohama Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Komponententestaktionen überschreiben
=====================================

Komponententestaktionen überschreiben {#ariaid-title1}
======================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 Minuten Lesedauer

Ändern Sie die Testeigenschaften einer bestimmten Seitenkomponente mithilfe von HTML-Attributen, die für Automated Test Frameworkspezifisch sind.

Vorbereitungen
--------------

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird
---------------------------------------------

Wenn Automated Test Framework eine Komponente abruft, bestimmt es die unterstützten Interaktionen, z. B. ob es sich um eine einstellbare oder anklickbare Komponente handelt. Wenn die Komponente einstellbar ist, bestimmt Automated Test Framework den Feldtyp, der eingestellt werden kann. Wenn Automated Test Framework die Aktionen oder Feldtypen Ihrer anwenderdefinierten Komponente falsch bestimmt oder Ihre Komponente mehrere DOM-Elemente enthält, die als eine Entität behandelt werden sollten, legen Sie sie explizit mit HTML-Attributen fest, die für Automated Test Frameworkspezifisch sind.

Mithilfe der Attribute „sn-atf-clickable" und „sn-atf-settable". {#ariaid-title2}
---------------------------------------------------------------------------------

Verwenden Sie die Attribute `sn-atf-clickable` und `sn-atf-settable,` um anzugeben, dass ein Element und seine untergeordneten Elemente als anwenderdefiniert anklickbare oder anwenderdefiniert festlegbare Komponente behandelt werden sollen.

### Vorbereitungen

Erforderliche Rolle: admin

### Prozedur

1. Öffnen Sie die benutzerdefinierte UI-Seite, die Sie testen möchten.
2. Fügen Sie dem zu testenden Element das Attribut `sn-atf-clickable` oder `sn-atf-settable` hinzu.  

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

   Hinweis:  
   Sie können entweder das Attribut `sn-atf-clickable` oder das Attribut `sn-atf-settable` verwenden, um anzugeben, ob ein Element als anwenderdefinierte anklickbare oder anwenderdefinierte festlegbare Komponente behandelt werden soll. Sie können nicht beide Attribute für dasselbe Element verwenden.
3. Verwenden Sie entweder das Attribut `sn-atf-clickable` oder das Attribut `sn-atf-settable`.  
   * `sn-atf-clickable`: Wenn Sie das Attribut `sn-atf-clickable` hinzugefügt haben, klickt ATF auf die Komponente, indem ein `sn-atf-click` -Ereignis an das DOM-Element mit dem Attribut `sn-atf-clickable` gesendet wird. Sie sollten diesem DOM-Element einen Ereignis-Listener hinzufügen (z. B. mit `addEventListener`) und Ihre anwenderdefinierte Klicklogik für die Komponente implementieren. Sie können mit einer anwenderdefinierten klickbaren Komponente interagieren, indem Sie den Testschritt [„Komponente klicken"](https://servicenow-prod.fluidtopics.net/nXgQRlKmnH1KUCS52SQD0A#atf-click-component "Klicken Sie eine Komponente auf einer benutzerdefinierten UI-Seite an.") verwenden. {#atf-override-component-class-02__table_r5q_gry_cgb__entry__2}

     |      Attributname      |                                                                                                                Beschreibung                                                                                                                 |
     |------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
     | sn-atf-deaktiviert     | Das Vorhandensein dieses optionalen Attributs (unabhängig von seinem Wert) teilt ATF mit, dass diese Komponente deaktiviert ist Hinweis: Wenn dieses Attribut fehlt, geht ATF davon aus, dass diese Komponente standardmäßig aktiviert ist. |
     | sn-atf-component-value | Eine Zeichenfolge oder ein JSON-Objekt, die ATF den aktuellen Wert dieser Komponente mitteilt                                                                                                                                               |
     [Tabelle : 1. Attribute klickbarer Komponenten]

     {#atf-override-component-class-02__table_r5q_gry_cgb}
   * `sn-atf-settable`: Wenn Sie das Attribut `sn-atf-settable` hinzugefügt haben, legt ATF den Komponentenwert fest, indem ein `sn-atf-setvalue` -Ereignis an das DOM-Element mit dem Attribut `sn-atf-settable` gesendet wird. Sie sollten diesem DOM-Element einen Ereignis-Listener hinzufügen (z. B. mit `addEventListener`) und Ihre anwenderdefinierte Logik zum Festlegen von Werten für die Komponente implementieren. Auf den Wert, der festgelegt werden muss, kann mit `event.detail.newvalue`zugegriffen werden. Das `Ereignisargument` wird an den Ereignishandler übergeben. Sie können mit einer anwenderdefinierten festlegbaren Komponente über den Testschritt [Komponentenwerte festlegen](https://servicenow-prod.fluidtopics.net/nXgQRlKmnH1KUCS52SQD0A#atf-set-component-values "Legen Sie die Komponentenwerte auf einer benutzerdefinierten UI-Seite fest.") interagieren. {#atf-override-component-class-02__table_kml_csy_cgb__entry__2}

     |      Attributname       |                                                                                                                 Beschreibung                                                                                                                 |
     |-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
     | sn-atf-deaktiviert      | Das Vorhandensein dieses optionalen Attributs (unabhängig von seinem Wert) teilt ATF mit, dass diese Komponente deaktiviert ist. Hinweis: Wenn dieses Attribut fehlt, geht ATF davon aus, dass diese Komponente standardmäßig aktiviert ist. |
     | sn-atf-component-value  | Eine Zeichenfolge oder ein JSON-Objekt, die ATF den aktuellen Wert dieser Komponente mitteilt.                                                                                                                                               |
     | sn-atf-data-type        | Optionaler Feldtyp, der dem Anwender beim Erstellen eines Schritts angezeigt werden soll. Der Standardwert ist Zeichenfolge. Zum Beispiel `glide_date_time`, Referenz, boolescher Wert usw.                                                  |
     | sn-atf-data-type-params | JSON-Objekt mit weiteren Datentypdetails.                                                                                                                                                                                                    |
     [Tabelle : 2. Legbare Komponentenattribute]

     {#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}

### Beispiel

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

Verwendung des Attributs sn-atf-class {#ariaid-title3}
------------------------------------------------------

Verwenden Sie das Attribut `sn-atf-class`, um das zu verwendende JavaScript-Objekt anzugeben, das beim Testen einer benutzerdefinierten anklickbaren oder einstellbaren Komponente verwendet werden soll. Schreiben Sie ein benutzerdefiniertes JavaScript-Objekt, um die für eine benutzerdefinierte Komponente verfügbaren Testaktionen anzugeben.

### Vorbereitungen

Erforderliche Rolle: admin

### Warum und wann dieser Vorgang ausgeführt wird

Testdesigner können die für eine benutzerdefinierte Komponente verfügbaren Testaktionen manuell festlegen, indem sie ein benutzerdefiniertes JavaScript-Objekt schreiben und der Komponente ein Attribut `sn-atf-class` zuweisen. Legen Sie den Wert des Attributs auf den Namen des JavaScript-Objekts fest, das die Komponententestaktionen enthält. Testbare benutzerdefinierte Komponenten müssen entweder anklickbar oder einstellbar sein. Diese Klassifizierung bestimmt die Funktionen und Eigenschaften, die Ihr JavaScript-Objekt benötigt. Siehe [Testschritte für benutzerdefinierte UIs](https://servicenow-prod.fluidtopics.net/MkWz371KDz7r5tza8NdDCQ "Testen Sie angepasste Benutzeroberflächen wie UI-Seiten und UI-Makros, indem Sie deren HTML- und JavaScript-Seitenkomponenten abrufen und die von ihnen unterstützten Testaktionen identifizieren.") für Anforderungen an testbare Seitenkomponenten.

### Prozedur

1. Öffnen Sie die benutzerdefinierte UI-Seite, die Sie testen möchten.
2. Fügen Sie dem zu testenden Element das Attribut `sn-atf-class` hinzu, und legen Sie den Wert auf den Namen des JavaScript-Objekts fest, das auf der Seite eingebettet ist und die Funktionen getValue(), setValue(), Click() oder isDisabled() verarbeitet.  

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

3. Erstellen Sie das im Attribut `sn-atf-class` angegebene JavaScript-Objekt, und fügen Sie die Funktionen und das Attribut hinzu, die erforderlich sind, um Ihre anwenderdefinierte Seitenkomponente als anklickbare oder festlegbare Seitenkomponente zu identifizieren.  
   {#override-component-class__table_r5q_gry_cgb__entry__2}

   |   Funktionsname   |                                                                                                                           Beschreibung                                                                                                                           |
   |-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
   | initialisieren () | Ruft die Anfangswerte der Komponente ab. Geben Sie Folgendes ein: $super(element, area)                                                                                                                                                                          |
   | klicken ()        | Wählt die Komponente aus. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: `success`: „true", wenn auf die Komponente geklickt werden kann. Hinweis: Löst den intelligenten Wartemechanismus des UI-Testschritts aus.                                       |
   | abrufenWert()     | Ruft den Wert des Elements ab. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: * `success`: „true", wenn der Wert abgerufen wird. * `result`: der Wert der Komponente. {#override-component-class__ul_jym_3mm_wfb}                                         |
   | istDeaktiviert () | Gibt an, ob die Komponente deaktiviert ist. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: * `success`: „true", wenn die Komponente deaktiviert ist. * `result`: „true", wenn die Komponente deaktiviert ist. {#override-component-class__ul_ont_4qm_wfb} |
   [Tabelle : 3. Funktionen für anklickbare Komponenten]

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

   |      Funktionsname       |                                                                                                                           Beschreibung                                                                                                                           |
   |--------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
   | initialisieren ()        | Ruft die Anfangswerte der Komponente ab. Geben Sie Folgendes ein: $super(element, area)                                                                                                                                                                          |
   | festlegenWert(neuerWert) | Legt den Wert der Komponente fest. Siehe das zweite Beispiel unten. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: `success`: „true", wenn die Wert festgelegt ist. Hinweis: Löst den intelligenten Wartemechanismus des UI-Testschritts aus.             |
   | abrufenWert()            | Ruft den Wert des Elements ab. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: * `success`: „true", wenn der Wert abgerufen wird. * `result`: der Wert der Komponente. {#override-component-class__ul_mml_csy_cgb}                                         |
   | istDeaktiviert ()        | Gibt an, ob die Komponente deaktiviert ist. Gibt ein JSON-Objekt mit diesen Eigenschaften zurück: * `success`: „true", wenn die Komponente deaktiviert ist. * `result`: „true", wenn die Komponente deaktiviert ist. {#override-component-class__ul_nml_csy_cgb} |
   [Tabelle : 4. Funktionen für einstellbare Komponenten]

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

   |   Attributname   |                          Beschreibung                           |
   |------------------|-----------------------------------------------------------------|
   | isSettable: wahr | Identifiziert die Komponente als einstellbare Seitenkomponente. |
   [Tabelle : 5. Attribut für einstellbare Komponenten]

   {#override-component-class__table_p2n_psy_cgb}
4. Fügen Sie beim Erstellen Ihrer benutzerdefinierten Komponente in Jelly die Tags `<g2:atf_only>` um das im Attribut `sn-atf-class` angegebenen JavaScript-Objekt hinzu.  
   Diese Tags stellen sicher, dass das System das JavaScript-Objekt nur während des automatisierten Tests ausführt.
{#override-component-class__steps_jyp_gkz_1gb}

### Beispiel

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

Referenz- und Datensatzauswahl {#ariaid-title4}
-----------------------------------------------

Verwenden Sie anwenderdefinierte UI-Schritte, um die Werte der Winkelanweisungen `sn-reference-picker` und `sn-record-picker` zu bearbeiten. Der Wert in einer Referenzauswahl gibt die `sys_id` des ausgewählten Datensatzes zurück. Der Wert in einer Datensatzauswahl gibt das für diese Datensatzauswahl ausgewählte Wertfeld zurück. Beide Elemente können festgelegt werden, indem ein Datensatz ausgewählt wird, der als Wert festgelegt werden soll.