本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。
最適化表單準備就緒後,請務必先測試您的最適化,然後再將它推出給使用者。 您可以手動測試(功能測試)每個欄位,或自動測試最適化表單。 當您有多個可調式表單時,手動測試所有可調式表單的每個欄位將是一項艱巨的任務。
AEM Forms提供測試架構Calvin,以自動測試您的最適化表單。 使用架構,您可直接在網頁瀏覽器中編寫並執行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子資料夾,然後按一下建立 > 建立節點。 在Name欄位中,鍵入WeRetailFormTestCases。 選擇類型為cq:ClientLibraryFolder,然後按一下確定。 它建立一個節點。 您可以使用任何名稱來取代WeRetailFormTestCases
。
將以下屬性添加到WeRetailFormTestCases
節點並按一下「保存所有」(Save ALL)]。[
屬性 | 類型 | 多 | 值 |
類別 | 字串 | 已啟用 |
|
依賴性 | 字串 | 已啟用 |
|
請確定每個屬性都新增至個別方塊,如下所示:
按一下右鍵WeRetailFormTestCases節點,按一下建立 > 建立檔案。 在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測試UI」(AEM > 工具 > 作業 > 測試)。 測試套件- 我們零售——測試 —— 列在UI中。
測試案例是一組動作,可測試特定功能。 例如,預先填寫表單的所有欄位,並驗證幾個欄位,以確保輸入正確的值。
動作是最適化表單上的特定活動,例如按一下按鈕。 若要建立測試案例和動作,以驗證每個自適應表單欄位的使用者輸入:
在CRXDE lite中,導覽至/content/forms/af/create-first-adaptive-form
資料夾。 按一下右鍵create-first-adaptive-form資料夾節點,然後按一下CreateCreate 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
子資料夾,然後按一下建立建立節點。
在名稱欄位中,鍵入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圖示> 工具> 作業> 測試」
若要執行測試套裝的所有測試:
在Tests面板中,點選We retail - Tests(1)。 此套裝會展開以顯示測試清單。
點選執行測試按鈕。 當測試執行時,螢幕右側的空白區域會以最適化形式取代。
若要從測試套裝執行單一測試:
點選測試名稱「預填」測試,以檢視測試案例的結果。 它會開啟Result面板。 在Result面板中點選測試案例的名稱,以檢視測試的所有詳細資訊。
現在,最適化表單已可供發佈。