Show Menu
主題×

教學課程:測試您的最適化表單

本教學課程是「建立您的第 一個最適化表單 」系列的步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。
最適化表單準備就緒後,請務必先測試您的最適化,然後再將它推出給使用者。 您可以手動測試(功能測試)每個欄位,或自動測試最適化表單。 當您有多個可調式表單時,手動測試所有可調式表單的每個欄位將是一項艱巨的任務。
AEM Forms提供測試架構Calvin,以自動測試您的調適性表單。 使用架構,您可直接在網頁瀏覽器中編寫並執行UI測試。 此架構提供JavaScript API以建立測試。 自動化測試可讓您測試自適應表單的預先填寫體驗、從驗證、延遲載入和UI互動提交自適應表單、運算式規則的體驗。 本教學課程會逐步引導您在最適化表單上建立和執行自動化測試的步驟。 在本教學課程結束時,您將能夠:

步驟1:建立測試套裝

測試套裝包含一組測試案例。 您可以有多個測試套裝。 建議每個表單使用個別的測試套裝。 若要建立測試套裝:
  1. 以管理員身分登入AEM Forms作者實例。 開啟CRXDE Lite。 您可以點選「AEM標誌>工具 >一般 > CRXDE Lite 」,或在瀏覽器 index.jsp 中開啟https://localhost:4502/crx/de/index.jsp Logo URL以開啟CRXDE Lite。
  2. 導覽至CRXDE Lite中的/etc/clientlibs。 按一下右鍵/etc/clientlibs子資料夾,然後按一下「創 」>「 建立節點」。 在「名稱」欄位中, 鍵入WeRetailFormTestCases 。 選擇類型為 cq:ClientLibraryFolder ,然後按一 下「確定」 。 它建立一個節點。 您可以使用任何名稱來取代WeRetailFormTestCases。
  3. 將下列屬性新增至WeRetailFormTestCases節點,然後點選「全 部儲存」
屬性 類型
類別 字串 已啟用
  • granite.testing.hobbes.tests
  • granite.testing.calvin.tests
依賴性 字串 已啟用
  • granite.testing.hobbes.testrunner
  • granite.testing.calvin
  • apps.testframework.all
請確定每個屬性都新增至個別方塊,如下所示:
  1. 以滑鼠右鍵按一下「 WeRetailFormTestCases」節點 ,按一下「 建立 >建 立檔案 」。 在「名稱」欄位中,輸入並 js.txt 按一下「 確定」
  2. 開啟js.txt檔案以進行編輯、新增下列程式碼並儲存檔案:
    #base=.
     init.js
    
    
  3. 在節點中建立一個檔案init.js WeRetailFormTestCases 。 將下列程式碼新增至檔案,然後點選「全 部儲存」
    (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));
    
    
    上述程式碼會建立名為「我們零售- 測試」的測試套裝
  4. 開啟「AEM測試UI」(AEM >工具>作業>測試)。 測試套件——我 們零售——測試 -會列在UI中。

步驟2:建立測試案例,以在最適化表單中預先填寫值

測試案例是一組動作,可測試特定功能。 例如,預先填寫表單的所有欄位,並驗證幾個欄位,以確保輸入正確的值。
動作是最適化表單上的特定活動,例如按一下按鈕。 若要建立測試案例和動作,以驗證每個自適應表單欄位的使用者輸入:
  1. 在CRXDE lite中,導覽至資料 /content/forms/af/create-first-adaptive-form 夾。 按一下右鍵 create-first-adaptive-form 資料夾節點,然後按一下 Create > Create File 。 在「名稱」欄位中,輸入並 prefill.xml 按一下「 確定」 。 將下列程式碼新增至檔案:
    <?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. 導航到 /etc/clientlibs . 按一下右鍵子文 /etc/clientlibs 件夾,然後單 「創 建節點」
    在「名 」欄位類型中 WeRetailFormTests 。 選擇類型,然 cq:ClientLibraryFolder 後按一下 確定
  3. 將下列屬性新增至 WeRetailFormTests節點
屬性 類型
類別 字串 已啟用
  • granite.testing.hobbes.tests
  • granite.testing.hobbes.tests.testForm
依賴性 字串 已啟用
  • granite.testing.calvin.tests
  1. WeRetailFormTests節點中建立js.txt檔案 。 將下列項目新增至檔案:
    #base=.
    prefillTest.js
    
    
    按一下「 全部儲存 」。
  2. 在WeRetailFormTests節 prefillTest.js 點中建 立檔案 。 將下列程式碼新增至檔案。 程式碼會建立測試案例。 測試案例會預先填寫表單的所有欄位,並驗證某些欄位,以確保輸入正確的值。
    (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));
    
    
    測試案例已建立並可供執行。 您可以建立測試案例來驗證自適應表單的各個方面,例如檢查計算指令碼的執行、驗證模式,以及驗證自適應表單的提交體驗。 如需有關最適化表單測試各方面的資訊,請參閱自動化最適化表單測試。

步驟3:在套裝或個別測試案例中執行所有測試

測試套裝可以有多個測試案例。 您可以一次或個別執行測試套裝中的所有測試案例。 當您執行測試時,圖示會指出結果:
  • 複選標籤圖示表示通過的測試:
  • 「X」圖示表示測試失敗:
  1. 導覽至「AEM圖示>工 > 作業 >測 試」
  2. 若要執行測試套裝的所有測試:
    1. 在「測試」面板中,點選「 We retail - Tests(1)」 。 此套裝會展開以顯示測試清單。
    2. 點選「執 行測試 」按鈕。 當測試執行時,螢幕右側的空白區域會以最適化形式取代。
  3. 若要從測試套裝執行單一測試:
    1. 在「測試」面板中,點選「 We retail - Tests(1)」 。 此套裝會展開以顯示測試清單。
    2. 點選「 Prefill Test (預填測試 )」並點選「 Run tests(執行測試)」按鈕。 當測試執行時,螢幕右側的空白區域會以最適化形式取代。
  4. 點選測試名稱「預填」測試,以檢閱測試案例的結果。 它會開啟「結果」面板。 在「結果」面板中點選測試案例的名稱,檢視測試的所有詳細資訊。
現在,最適化表單已可供發佈。