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 automatisieren das Testen Ihres adaptiven Formulars. Wenn Sie mehrere adaptive Formulare haben, wird das manuelle Testen jedes Felds aller adaptiven Formulare zu einer gewaltigen Aufgabe.

AEM Forms stellen Sie 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 stellt JavaScript-APIs zum Erstellen von Tests bereit. Mithilfe automatisierter Tests können Sie das Erlebnis beim Vorausfüllen eines adaptiven Formulars, das Sendeerlebnis eines adaptiven Formulars, Ausdrucksregeln, von Überprüfungen, verzögertem Laden und Benutzeroberflächeninteraktionen testen. Dieses Tutorial 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 Testsuite

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

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

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

  3. Fügen Sie die folgenden Eigenschaften zum Knoten WeRetailFormTestCases hinzu und tippen Sie auf ALL 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 klicken Sie auf Erstellen > Datei erstellen. Geben Sie im Feld Name js.txt 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 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 > Testen). Die Test-Suite - We retail - Tests - ist in der Benutzeroberfläche aufgelistet.

    we-retail-test-suite

Schritt 2: Erstellen Sie einen Testfall, 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 adaptive Formularfeld 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 klicken Sie auf Erstellen> Datei erstellen. Geben Sie im Feld Name prefill.xml 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 klicken Sie auf Erstellen Knoten erstellen.

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

  3. Fügen Sie die folgenden Eigenschaften zum 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 eine 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 prefillTest.js im Knoten WeRetailFormTests . Fügen Sie der Datei den folgenden Code 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 der Sendeerfahrung 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äkchen-Symbol zeigt einen bestanden Test an: save_icon
  • Ein X-Symbol weist auf einen fehlgeschlagenen Test hin: close-icon
  1. Navigieren Sie zu AEM Symbol > Tools Vorgänge Tests

  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 Ausführen von Tests . 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 Testfenster 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 Ausführen von Tests . 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. Dadurch wird der Bereich Ergebnis geöffnet. Tippen Sie im Bedienfeld Ergebnis auf den Namen Ihres Testfalls, um alle Details des Tests anzuzeigen.

    review-results

Jetzt kann das adaptive Formular veröffentlicht werden.

Auf dieser Seite