Übung: 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 das adaptive Formular testen, bevor Sie es an die Endbenutzer übertragen. Sie können jedes Feld manuell testen (funktionelle Tests) oder das Testen des adaptiven Formulars automatisieren. Wenn Sie mehrere adaptive Formulare haben, wird das manuelle Testen aller Felder der adaptiven Formulare zu einer beängstigenden Aufgabe.

AEM Forms stellen Sie ein Testframework bereit, 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. Mit dem automatisierten Test können Sie das Erlebnis zum Vorausfüllen eines adaptiven Formulars testen, die Sendeerfahrung eines adaptiven Formulars, die Regeln für den Ausdruck von Überprüfungen, verzögertes Laden und Benutzeroberflächeninteraktionen testen. Dieses Lernprogramm 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: Testsuite erstellen

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

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

  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. Geben Sie im Feld Name WeRetailFormTestCases ein. Wählen Sie den Typ cq:ClientLibraryFolder und klicken Sie auf OK. Es wird eine Node erstellt. Sie können jeden beliebigen Namen anstelle von WeRetailFormTestCases verwenden.

  3. hinzufügen Sie die folgenden Eigenschaften auf den Knoten WeRetailFormTestCases und tippen Sie auf Save ALL.

    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 wie unten dargestellt einem separaten Feld hinzugefügt wird:

    dependencies

  4. Klicken Sie mit der rechten Maustaste auf den Knoten WeRetailFormTestCases und klicken Sie auf Create > Create File. 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. hinzufügen Sie den folgenden Code in die Datei ein 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));
    

    Mit dem obigen Code wird eine Testsuite mit dem Namen Wir für den Handel - Tests erstellt.

  7. Öffnen Sie AEM Benutzeroberfläche für Tests (AEM > Tools > Vorgänge > Tests). Die Testsuite - Wir für den Handel - Tests - ist in der Benutzeroberfläche aufgeführt.

    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 müssen Sie alle Felder eines Formulars im Voraus ausfüllen und einige Felder überprüfen, um sicherzustellen, dass die richtigen Werte eingegeben werden.

Eine Aktion ist eine bestimmte Aktivität in einem adaptiven Formular, z. B. durch 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 Ordnernamen create-first-adaptive-form und klicken Sie auf Create Create File. 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 Erstellen Sie Knoten.

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

  3. hinzufügen Sie die folgenden Eigenschaften auf den Knoten WeRetailFormTests.

    Eigenschaft Typ Multi Wert
    Kategorien Zeichenfolge Aktiviert
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    Abhängigkeiten 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 mit dem Namen prefillTest.js im Knoten WeRetailFormTests. hinzufügen Sie den unten stehenden Code in die Datei ein. Der Code erstellt einen Testfall. Der TestCase füllt alle Felder eines Formulars im Voraus aus und überprüft 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 Überprüfung von Mustern und die Überprüfung der Sendeerfahrung eines adaptiven Formulars. Weitere Informationen zu verschiedenen Aspekten des Testens adaptiver Formulare finden Sie unter Automatisches Testen von adaptiven Formularen.

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

Eine Testsuite kann mehrere Testfälle aufweisen. Sie können alle Testfälle in einer Testsuite auf einmal oder einzeln ausführen. Wenn Sie einen Test durchführen, werden die Ergebnisse durch die Symbole angezeigt:

  • Ein Häkchen-Symbol zeigt an, dass ein Test bestanden hat: save_icon
  • Ein X-Symbol weist auf einen fehlgeschlagenen Test hin: close-icon
  1. Navigieren Sie zu AEM Symbol > Tools Vorgänge Testen

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

    1. Tippen Sie im Bedienfeld Tests auf Wir für den Handel - Tests (1). Die Suite wird erweitert, um die Liste des Tests anzuzeigen.

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

      all-test

  3. So führen Sie einen einzelnen Test aus der Test Suite aus:

    1. Tippen Sie im Testbedienfeld auf Wir für den Handel - Tests (1). Die Suite wird erweitert, um die Liste des Tests anzuzeigen.
    2. Tippen Sie auf Test vor dem Ausfüllen und dann auf die Schaltfläche Tests ausführen. Der leere Bereich auf der rechten Seite des Bildschirms wird durch ein adaptives Formular ersetzt, während der Test ausgeführt wird.
  4. Tippen Sie auf den Testnamen "Vorausfüllen", um die Ergebnisse des Test Case zu überprüfen. Es wird das Bedienfeld Ergebnis geöffnet. Tippen Sie im Bereich Ergebnis auf den Namen Ihres Testfalls, um alle Testdetails Ansicht.

    review-results

Jetzt kann das adaptive Formular veröffentlicht werden.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now