Tutorial: Testen des adaptiven Formulars

Diese Schulung ist ein Schritt in der Serie Erstellen Sie Ihr erstes adaptives Formular. Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren.

Nachdem das adaptive Formular fertig ist, müssen Sie Ihr adaptives Formular testen, bevor Sie es an die Endbenutzer übertragen. Sie können jedes Feld manuell testen (funktionale Tests) oder das Testen Ihres adaptiven Formulars automatisieren. Wenn Sie mehrere adaptive Formulare haben, wird das manuelle Testen jedes Felds aller adaptiven Formulare zu einer gewaltigen Aufgabe.

AEM Forms bietet ein Test-Framework, Calvin, um das Testen Ihrer adaptiven Formulare zu automatisieren. Mit diesem Framework können Sie Tests der Benutzeroberfläche direkt in einem Webbrowser schreiben und ausführen. Das Framework umfasst eine JavaScript-API für das Erstellen von Tests. Mithilfe automatisierter Tests können Sie das Erlebnis beim Vorausfüllen eines adaptiven Formulars, das Sendeerlebnis eines adaptiven Formulars, Ausdrucksregeln, Überprüfungen, verzögertes Laden und Benutzeroberflächeninteraktionen testen. Diese Anleitung führt Sie durch die Schritte zum Erstellen und Ausführen automatisierter Tests für ein adaptives Formular. Am Ende dieser Schulung können Sie Folgendes:

Schritt 1: Erstellen einer Test-Suite

Test-Suites verfügen über eine Sammlung von Testfällen. Sie können über mehrere Test-Suites verfügen. Es wird empfohlen, für jedes Formular eine separate Testsuite zu verwenden. So erstellen Sie eine Test-Suite aus:

  1. Melden Sie sich bei der AEM Forms-Autoreninstanz als Administrator an. Öffnen Sie CRXDE Lite. Sie können auf AEM Logo > tippen. Instrumente > Allgemein > CRXDE Lite oder öffnen Sie die https://localhost:4502/crx/de/index.jsp URL in einem Browser zum Öffnen der CRXDE Lite.

  2. Navigieren Sie zu /etc/clientlibs in CRXDE Lite. Klicken Sie mit der rechten Maustaste auf den Unterordner /etc/clientlibs und dann auf Erstellen > Knoten erstellen. Im Name Feldtyp WeRetailFormTestCases. Wählen Sie den Typ als cq:ClientLibraryFolder und klicken Sie auf OK. Es wird ein Knoten erstellt. Sie können einen beliebigen Namen anstelle von WeRetailFormTestCases verwenden.

  3. Fügen Sie dem WeRetailFormTestCasesKnoten die folgenden Eigenschaften hinzu und klicken Sie auf Alle speichern.

    Eigenschaft Typ Multi Wert
    categories Zeichenfolge Aktiviert
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencies Zeichenfolge Aktiviert
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all

    Stellen Sie sicher, dass jede Eigenschaft einem separaten Feld hinzugefügt wird, wie unten dargestellt:

    dependencies

  4. Klicken Sie mit der rechten Maustaste auf den Knoten WeRetailFormTestCases und danach auf Erstellen > Datei erstellen. Geben Sie js.txt in das Feld Name ein und klicken Sie auf OK.

  5. Öffnen Sie die Datei „js.txt“ zur Bearbeitung, fügen Sie den folgenden Code hinzu und speichern Sie die Datei:

    #base=.
     init.js
    
  6. Erstellen Sie eine Datei namens „init.js“ im Knoten WeRetailFormTestCases. Fügen Sie den folgenden Code zur Datei hinzu und tippen Sie auf Alle speichern.

    (function(window, hobs) {
        'use strict';
        window.testsuites = window.testsuites || {};
      // Registering the test form suite to the sytem
      // If there are other forms, all registration should be done here
        window.testsuites.testForm3 = new hobs.TestSuite("We retail - Tests", {
            path: '/etc/clientlibs/WeRetailFormTestCases/init.js',
            register: true
        });
     // window.testsuites.testForm2 = new hobs.TestSuite("testForm2");
    }(window, window.hobs));
    

    Der obige Code erstellt eine Test-Suite mit dem Namen We retail - Tests.

  7. Öffnen Sie AEM-Testbenutzeroberfläche (AEM > Tools > Vorgänge > Test). Die Test-Suite We retail - Tests wird in der Benutzeroberfläche aufgelistet.

    we-retail-test-suite

Schritt 2: Erstellen eines Testfalls, um Werte in einem adaptiven Formular vorab auszufüllen.

Ein Testfall ist eine Reihe von Aktionen zum Testen einer bestimmten Funktion. Beispielsweise das Vorausfüllen aller Felder eines Formulars und die Validierung einiger Felder, um sicherzustellen, dass die richtigen Werte eingegeben werden.

Eine Aktion ist eine bestimmte Aktivität in einem adaptiven Formular, z. B. das Klicken auf eine Schaltfläche. So erstellen Sie einen Testfall und Aktionen, um die Benutzereingabe für jedes Feld des adaptiven Formulars zu überprüfen:

  1. Navigieren Sie in CRXDE lite zum Ordner /content/forms/af/create-first-adaptive-form. Klicken Sie mit der rechten Maustaste auf den Ordnerknoten create-first-adaptive-form und dann auf Erstellen > Datei erstellen. Geben Sie prefill.xml in das Feld Name ein und klicken Sie auf OK. Fügen Sie der Datei den folgenden Code hinzu:

    <?xml version="1.0" encoding="UTF-8"?><afData>
      <afUnboundData>
        <data>
          <customer_ID>371767</customer_ID>
          <customer_Name>John Jacobs</customer_Name>
          <customer_Shipping_Address>1657 1657 Riverside Drive Redding</customer_Shipping_Address>
          <customer_State>California</customer_State>
          <customer_ZIPCode>096001</customer_ZIPCode>
         </data>
      </afUnboundData>
      <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/"/>
      </afBoundData>
    </afData>
    
  2. Navigieren Sie zu /etc/clientlibs. Klicken Sie mit der rechten Maustaste auf den Unterordner /etc/clientlibs und danach auf Erstellen > Knoten erstellen.

    Geben Sie WeRetailFormTests in das Feld Name ein. Wählen Sie den Typ als cq:ClientLibraryFolder und klicken Sie auf OK.

  3. Fügen Sie die folgenden Eigenschaften zu dem Knoten WeRetailFormTests hinzu.

    Eigenschaft Typ Multi Wert
    categories Zeichenfolge Aktiviert
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    dependencies Zeichenfolge Aktiviert
    • granite.testing.calvin.tests
  4. Erstellen Sie die Datei „js.txt“ im Knoten WeRetailFormTests. Fügen Sie der Datei den folgenden hinzu:

    #base=.
    prefillTest.js
    

    Klicken Sie auf Alle speichern.

  5. Erstellen Sie eine Datei namens prefillTest.js im Knoten WeRetailFormTests. Fügen Sie den folgenden Code zu der Datei hinzu. Der Code erstellt einen Testfall. Der Testfall füllt alle Felder eines Formulars im Voraus aus und validiert einige Felder, um sicherzustellen, dass korrekte Werte eingegeben werden.

    (function (window, hobs) {
        'use strict';
    
        var ts = new hobs.TestSuite("Prefill Test", {
            path: '/etc/clientlibs/WeRetailFormTests/prefillTest.js',
            register: false
        })
    
        .addTestCase(new hobs.TestCase("Prefill Test")
            // navigate to the testForm which is to be test
            .navigateTo("/content/forms/af/create-first-adaptive-form/shipping-address-add-update-form.html?wcmmode=disabled&dataRef=crx:///content/forms/af/create-first-adaptive-form/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ID").value == 371767;
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ZIPCode").value == 96001;
            })
        );
    
        // register the test suite with testForm
        window.testsuites.testForm3.add(ts);
    
    }(window, window.hobs));
    

    Der Testfall wird erstellt und kann ausgeführt werden. Sie können Testfälle erstellen, um verschiedene Aspekte eines adaptiven Formulars zu validieren, z. B. die Ausführung des Berechnungsskripts, die Validierung von Mustern und die Validierung des Sendens eines adaptiven Formulars. Informationen zu verschiedenen Aspekten des Testens adaptiver Formulare finden Sie unter „Automatisieren des Testens adaptiver Formulare“.

Schritt 3: Führen Sie alle Tests in einer Suite oder einzelnen Testfällen aus.

Eine Test-Suite kann mehrere Testfälle aufweisen. Sie können alle Testfälle in einer Test-Suite gleichzeitig oder einzeln ausführen. Wenn Sie einen Test ausführen, zeigen die Symbole die Ergebnisse an:

  • Ein Häkchensymbol zeigt an, dass der Test bestanden wurde: save_icon
  • Eine X-Symbol zeigt einen fehlgeschlagenen Test an: close-icon
  1. Navigieren Sie zum AEM-Symbol > Tools > Vorgänge > Testen

  2. So führen Sie alle Tests der Test-Suite aus:

    1. Tippen Sie im Bedienfeld Tests auf We retail - Tests (1). Die Suite wird erweitert, um eine Liste mit Tests anzuzeigen.

    2. Tippen Sie auf die Schaltfläche Tests ausführen. Der leere Bereich auf der rechten Bildschirmseite wird durch ein adaptives Formular ersetzt, während der Test ausgeführt wird.

      run-all-test

  3. So führen Sie einen einzelnen Test über die Test-Suite aus:

    1. Tippen Sie im Bedienfeld „Tests“ auf We retail - Tests (1). Die Suite wird erweitert, um eine Liste mit Tests anzuzeigen.
    2. Tippen Sie auf Vorbefüllungstest und dann auf die Schaltfläche Tests ausführen. Der leere Bereich auf der rechten Bildschirmseite wird durch ein adaptives Formular ersetzt, während der Test ausgeführt wird.
  4. Tippen Sie auf den Testnamen „Vorbefüllungstest“, um die Ergebnisse des Testfalls zu überprüfen. Das Bedienfeld Ergebnis wird geöffnet. Tippen Sie auf den Namen Ihres Testfalls im Bedienfeld Ergebnis, um alle Details des Tests anzuzeigen.

    review-results

Jetzt ist das adaptive Formular zur Veröffentlichung bereit.

Auf dieser Seite