本教學課程是建立第一個最適化表單系列中的步驟。 建議您依序依序依序執行系列,以了解、執行和示範完整的教學課程使用案例。
最適化表單準備就緒後,請務必先測試您的最適化,再將其轉出給一般使用者。 您可以手動測試(功能測試)每個欄位,或自動測試最適化表單。 當您有多個最適化表單時,手動測試所有最適化表單的每個欄位將是一項艱巨的任務。
AEM Forms提供測試框架Calvin,以自動測試最適化表單。 使用框架時,直接在Web瀏覽器中編寫並運行UI測試。 架構提供JavaScript API以用於建立測試。 自動化測試可讓您測試最適化表單的預填體驗、提交最適化表單的體驗、運算式規則、驗證、延遲載入和UI互動。 本教學課程會逐步引導您完成在最適化表單上建立和執行自動化測試的步驟。 在本教學課程結束時,您將能夠:
測試套裝包含測試案例的集合。 您可以有多個測試套裝。 建議為每個表單分別設定一個測試套裝。 若要建立測試套裝:
以管理員身分登入AEM Forms製作執行個體。 開啟CRXDE Lite。 您可以點選「AEM標誌> 工具 > 一般 > CRXDE Lite」,或在瀏覽器中開啟https://localhost:4502/crx/de/index.jsp URL以開啟CRXDE Lite。
導覽至CRXDE Lite中的/etc/clientlibs。 按一下右鍵/etc/clientlibs子資料夾,然後按一下Create > Create Node。 在Name欄位中,鍵入WeRetailFormTestCases。 選擇類型為cq:ClientLibraryFolder,然後按一下確定。 它會建立一個節點。 您可以使用任何名稱來取代WeRetailFormTestCases
。
將以下屬性添加到WeRetailFormTestCases
節點,然後點選Save ALL。
屬性 | 類型 | 多 | 值 |
類別 | 字串 | 已啟用 |
|
相依性 | 字串 | 已啟用 |
|
請確定每個屬性都新增至個別方塊,如下所示:
按一下右鍵WeRetailFormTestCases節點,按一下Create > Create File。 在Name欄位中,鍵入js.txt
並按一下OK。
開啟js.txt檔案進行編輯、新增下列程式碼並儲存檔案:
#base=.
init.js
在WeRetailFormTestCases
節點中建立檔案init.js。 將下列程式碼新增至檔案,然後點選「儲存全部」。
(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));
上述程式碼會建立名為We retail - Tests的測試套裝。
開啟AEM Testing UI(AEM > Tools > Operations > Testing)。 UI中列出測試套裝 — We retail - Tests -。
測試案例是測試特定功能的一組動作。 例如,預填表單的所有欄位,並驗證幾個欄位,以確保輸入正確的值。
動作是適用性表單上的特定活動,例如按一下按鈕。 若要建立測試案例和動作,以驗證每個最適化表單欄位的使用者輸入:
在CRXDE lite中,導覽至/content/forms/af/create-first-adaptive-form
資料夾。 以滑鼠右鍵按一下create-first-adaptive-form資料夾節點,然後按一下Create> Create File。 在Name欄位中,鍵入prefill.xml
並按一下OK。 將下列程式碼新增至檔案中:
<?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>
導航到 /etc/clientlibs
. 按一下右鍵/etc/clientlibs
子資料夾,然後按一下Create Create Node。
在名稱欄位中,鍵入WeRetailFormTests
。 選擇類型cq:ClientLibraryFolder
,然後按一下確定。
將下列屬性添加到WeRetailFormTests節點。
屬性 | 類型 | 多 | 值 |
類別 | 字串 | 已啟用 |
|
相依性 | 字串 | 已啟用 |
|
在WeRetailFormTests節點中建立檔案js.txt。 將下列項目新增至檔案:
#base=.
prefillTest.js
按一下「全部保存」。
在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));
已建立測試案例並準備運行。 您可以建立測試案例來驗證適用性表單的各個方面,例如檢查計算指令碼的執行、驗證模式,以及驗證適用性表單的提交體驗。 如需適用性表單測試各個層面的相關資訊,請參閱自動測試適用性表單。
一個測試套裝可以有多個測試案例。 您可以一次或個別執行測試套裝中的所有測試案例。 當您執行測試時,圖示會指出結果:
導覽至AEM圖示> Tools> Operations> Testing
要運行測試套裝的所有測試,請執行以下操作:
在「測試」面板中,點選「We retail - Tests(1)」。 它套裝會展開並顯示測試清單。
點選執行測試按鈕。 測試執行時,螢幕右側的空白區域會以最適化表單取代。
若要從測試套裝執行單一測試:
點選測試名稱「預填測試」 ,以檢閱測試案例的結果。 它會開啟Result面板。 點選Result面板中的測試案例名稱,以檢視測試的所有詳細資訊。
現在最適化表單已可供發佈。