Show Menu
THEMEN×

Ü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 bieten ein Testframework, 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:

Step 1: Create a test suite

Test suites have a collection of test cases. You can have multiple test suites. Es wird empfohlen, für jedes Formular eine separate Testsuite zu verwenden. So erstellen Sie eine Test-Suite:
  1. Log to AEM Forms author instance in as an administrator. Open CRXDE Lite. You can tap AEM Logo > Tools > General > CRXDE Lite or open the https://localhost:4502/crx/de/index.jsp URL in a browser to open CRXDE Lite.
  2. Navigate to /etc/clientlibs in CRXDE Lite. Klicken Sie mit der rechten Maustaste auf den Unterordner /etc/clientlibs und dann auf Erstellen > Knoten erstellen . In the Name field type WeRetailFormTestCases . Select the type as cq:ClientLibraryFolder and click OK . It creates a node. You can use any name in place of WeRetailFormTestCases .
  3. Add the following properties to the WeRetailFormTestCases node and tap 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:
  4. Right-click the WeRetailFormTestCases node click Create > Create File . In the Name field, type js.txt and click 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 WeRetailFormTestCases Knoten. hinzufügen Sie den folgenden Code in die Datei 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 We retail - Tests erstellt.
  7. Öffnen Sie AEM Testing UI (AEM > Tools > Vorgänge > Tests ). Die Testsuite - Wir für den Handel - Tests - wird in der Benutzeroberfläche aufgelistet.

Schritt 2: Erstellen eines Testfalls zum Vorausfüllen von Werten in einem adaptiven Formular

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 Litezum /content/forms/af/create-first-adaptive-form Ordner. Klicken Sie mit der rechten Maustaste auf den Ordner create-first-adaptive-form und klicken Sie auf Create > Create File . In the Name field, type prefill.xml and click 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 . Right-click the /etc/clientlibs subfolder and click Create > Create Node .
    Geben Sie im Feld Name den gewünschten Wert ein WeRetailFormTests . Wählen Sie den Typ aus cq:ClientLibraryFolder und klicken Sie auf OK .
  3. Add the following properties to the WeRetailFormTests node.
    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 . hinzufügen Sie Folgendes zur Datei:
    #base=.
    prefillTest.js
    
    
    Klicken Sie auf Alle speichern .
  5. Erstellen Sie eine Datei 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 in 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:
  • A checkmark icon indicates a passed test:
  • An "X" icon indicates a failed test:
  1. Navigate to AEM icon > Tools > Operations > Testing
  2. To run all the tests of the Test Suite:
    1. In the Tests panel, tap We retail - Tests (1) . Die Suite wird erweitert, um die Liste des Tests anzuzeigen.
    2. Tap the Run tests button. Der leere Bereich auf der rechten Seite des Bildschirms wird durch ein adaptives Formular ersetzt, während der Test ausgeführt wird.
  3. So führen Sie einen einzelnen Test aus der Test Suite aus:
    1. Tippen Sie im Fenster Tests auf Wir für den Handel - Tests (1) . Die Suite wird erweitert, um die Liste des Tests anzuzeigen.
    2. Tippen Sie auf den Test zum Vorausfüllen und dann auf die Schaltfläche zum Ausführen von Tests . 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. It opens the Result panel. Tap the name of your Test Case in the Result panel to view all the details of the test.
Now the adaptive form is ready for publishing.