自動測試最適化表單

概覽

最適化表單是客戶互動的必備項目。 務必透過您在表單中所做的每項變更（例如推出新的修正套件或變更表單中的規則）來測試最適化表單。 不過，功能測試適用性表單及其中的每個欄位可能都很繁瑣。

Calvin允許您在網路瀏覽器中自動測試您的最適化表單。 Calvin使用Hobbes的用戶介面運行測試，並提供以下工具：

• 用於建立測試的JavaScript API。
• 用於運行測試的用戶介面。

使用Calvin，您可以在CRXDE中建立測試用例，並直接在Web瀏覽器中運行UI測試，以徹底測試您的最適化表單的以下方面：

必備條件

使用此文章建立測試案例之前，您需要了解下列事項：

• 使用Hobbes建立測試套裝並執行測試案例
• Hobbes JavaScript API
• Calvin JavaScript API

範例：使用霍布斯作為測試架構，建立最適化表單的測試套裝

下列範例會逐步引導您建立測試套裝，以測試多個最適化表單。 您需要為每個需要測試的表單建立個別的測試案例。 依照類似下列步驟的操作並修改步驟11中的JavaScript程式碼，您可以建立自己的測試套裝來測試最適化表單。

1. 前往網頁瀏覽器中的CRXDE Lite:https://'[server]:[port]'/crx/de。

2. 按一下右鍵/etc/clientlibs子資料夾，然後按一下​Create > Create Node。 輸入名稱（此處為afTestRegistration），將節點類型指定為cq:ClientLibraryFolder，然後按一下​確定。

   clientlibs資料夾包含應用程式（JS和Init）的註冊方面。 建議您在clientlibs資料夾中註冊所有特定於表單的霍布斯測試套裝物件。

3. 在新建立的節點（此處為afTestRegistration）中指定以下屬性值，然後按一下​Save All。 這些屬性可協助霍布斯將資料夾識別為測試。 若要在其他用戶端程式庫中重複使用此用戶端程式庫作為相依性，請將其命名為granite.testing.calvin.tests。

1. 按一下右鍵測試節點（此處​afTestRegistration），然後按一下​Create > Create File。 將檔案命名為js.txt，然後按一下「確定」。

2. 在js.txt檔案中，新增下列文字：

   #base=.
   js.txt
   

3. 按一下「儲存全部」 ，然後關閉js.txt檔案。

4. 按一下右鍵測試節點（此處​afTestRegistration），然後按一下​Create > Create File。 將檔案命名為init.js，然後按一下​OK。

5. 將下列程式碼複製到init.js檔案中，然後按一下​Save All:

   (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.testForm = new hobs.TestSuite("Adaptive Form - Demo Test", {
           path: '/etc/clientlibs/afTestRegistration/init.js',
           register: true
       });
    // window.testsuites.testForm1 = new hobs.TestSuite("testForm1");
   }(window, window.hobs));
   

   上述程式碼會建立名為​適用性表單 — 示範測試​的測試套裝。 若要建立具有不同名稱的測試套裝，請據此變更名稱。

6. 按一下​建立 > 建立節點​以在要測試的每個表單的clientlib資料夾下建立節點。 此範例使用名為​testForm​的節點來測試名為​testForm​的最適化表單。 指定以下屬性，然後按一下​OK:

   • 名稱：testForm（您的表單名稱）
   • 類型：cq:ClientLibraryFolder

7. 將下列屬性新增至新建立的節點（此處為testForm），以測試最適化表單：

   屬性	類型	值
   類別	String[]	granite.testing.hobbes.tests, granite.testing.hobbes.tests.testForm
   相依性	字串[]	granite.testing.calvin.tests

   注意

   此範例使用對用戶端lib granite.testing.calvin.tests的相依性，以提供更理想的管理。 此範例也新增用戶端程式庫類別"granite.testing.hobbes.testForm"，以視需要重複使用此用戶端程式庫。

   

8. 按一下右鍵為測試表單建立的資料夾（此處為testForm），然後選擇​Create > Create File。 將檔案命名為scriptingTest.js，並將下列程式碼新增至檔案中，然後按一下「儲存全部」。

   若要使用下列程式碼來測試另一個最適化表單，請在​navigateTo（行11、36和62）中變更表單的路徑和名稱，以及個別的測試案例。 有關用於測試表單和表單對象不同方面的API的詳細資訊，請參閱Calvin API。

   (function(window, hobs) {
       'use strict';
   
    var ts = new hobs.TestSuite("Script Test", {
           path: '/etc/clientlibs/testForm/scriptingTest.js',
     register: false
    })
   
       .addTestCase(new hobs.TestCase("Checking execution of calculate script")
           // navigate to the testForm which is to be tested
           .navigateTo("/content/forms/af/testForm.html?wcmmode=disabled")
           // check if adaptive form is loaded
           .asserts.isTrue(function () {
               return calvin.isFormLoaded()
           })
           .execSyncFct(function () {
               // create a spy before checking for the expression
               calvin.spyOnExpression("panel1.textbox1");
               // setValue would trigger enter, set the value and exit from the field
               calvin.setValueInDOM("panel1.textbox", "5");
           })
           // if the calculate expression was setting "textbox1" value to "5", let's also check that
           .asserts.isTrue(function () {
               return calvin.isExpressionExecuted("panel1.textbox1", "Calculate");
           })
           .execSyncFct(function () {
               calvin.destroySpyOnExpression("panel1.textbox1");
           })
           .asserts.isTrue(function () {
               return calvin.model("panel1.textbox1").value == "5"
           })
       )
   
       .addTestCase(new hobs.TestCase("Calculate script Test")
           // navigate to the testForm which is to be tested
           .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml")
           // check if adaptive form is loaded
           .asserts.isTrue(function () {
               return calvin.isFormLoaded()
           })
   
           .execSyncFct(function () {
               // create a spy before checking for the expression
               calvin.spyOnExpression("panel2.panel1488218690733.downPayment");
               // setValue would trigger enter, set the value and exit from the field
               calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "1000000");
           })
           .asserts.isTrue(function () {
               return calvin.isExpressionExecuted("panel2.panel1488218690733.downPayment", "Calculate");
           })
           .execSyncFct(function () {
               calvin.destroySpyOnExpression("panel2.panel1488218690733.downPayment");
           })
           .asserts.isTrue(function () {
               // if the calculate expression was setting "downPayment" value to "10000", let's also check that
      return calvin.model("panel2.panel1488218690733.downPayment").value == 10000
           })
       )
   
       .addTestCase(new hobs.TestCase("Checking execution of Value commit script")
           // navigate to the testForm which is to be tested
           .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml")
           // check if adaptive form is loaded
           .asserts.isTrue(function () {
               return calvin.isFormLoaded()
           })
   
           .execSyncFct(function () {
               // create a spy before checking for the expression
               calvin.spyOnExpression("panel2.panel1488218690733.priceProperty");
               // setValue would trigger enter, set the value and exit from the field
               calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "100");
           })
           .asserts.isTrue(function () {
               return calvin.isExpressionExecuted("panel2.panel1488218690733.priceProperty", "Value Commit");
           })
           .execSyncFct(function () {
               calvin.destroySpyOnExpression("panel2.panel1488218690733.priceProperty");
           })
           .asserts.isTrue(function () {
            // if the value commit expression was setting "textbox1488215618594" value to "0", let's also check that
               return calvin.model("panel2.panel1488218690733.textbox1488215618594").value == 0
           })
       );
   
    // register the test suite with testForm
     window.testsuites.testForm.add(ts);
   
    }(window, window.hobs));
   

   已建立測試案例。 繼續執行測試案例，透過Hobbes測試最適化表單。 有關運行測試案例的步驟，請參閱使用自動測試在測試您的UI中執行測試。

您也可以將套件安裝在附加的檔案SampleTestPackage.zip中，以取得與範例中說明的步驟相同的結果：使用霍布斯作為測試架構，為最適化表單建立測試套裝。

取得檔案

使用自動測試測試您的UI

運行單個測試套件

測試套裝可個別執行。 當您執行測試套裝時，頁面會隨著測試案例及其動作執行而變更，結果會在測試完成後顯示。 圖示會指出結果。

勾選記號圖示表示通過的測試：

「X」圖示表示測試失敗：

若要執行測試套裝：

1. 在「測試」面板中，按一下或點選您要執行的「測試案例」名稱，以展開「動作」的詳細資訊。

   

2. 按一下或點選「執行測試」按鈕。

   

3. 測試執行時，預留位置會以頁面內容取代。

   

4. 點選或按一下說明以開啟「結果」面板，以檢閱測試案例的結果。 點選或按一下「結果」面板中的「測試案例」名稱，即會顯示所有詳細資訊。

   

測試AEM最適化表單的步驟與測試AEM UI的步驟類似。 如需測試最適化表單的詳細資訊，請參閱測試UI中的下列主題：

• 檢視測試套裝
• 執行多個測試

字彙表