本教程是创建第一个自适应表单系列中的一个步骤。 建议按照时间顺序按照系列来了解、执行和演示完整的教程用例。
自适应表单准备就绪后,在将自适应表单推出给最终用户之前,务必先测试它。 您可以手动测试每个字段(功能测试)或自动测试自适应表单。 当您有多个自适应表单时,手动测试所有自适应表单的每个字段将变得令人望而生畏的任务。
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子文件夹,然后单击创建 > 创建节点。 在名称字段类型WeRetailFormTestCases中。 选择类型cq:ClientLibraryFolder,然后单击确定。 它创建一个节点。 可以使用任何名称代替WeRetailFormTestCases
。
将以下属性添加到WeRetailFormTestCases
节点,然后点按保存所有。
属性 | 类型 | 多个 | 值 |
类别 | 字符串 | 启用 |
|
依赖 | 字符串 | 启用 |
|
确保将每个属性添加到单独的框中,如下所示:
右键单击WeRetailFormTestCases节点,单击创建 > 创建文件。 在名称字段中,键入js.txt
并单击确定。
打开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 > 工具 > 操作 > 测试)。 测试套件- We retail - Tests —— 列在UI中。
测试用例是测试特定功能的一组操作。 例如,预填表单的所有字段并验证几个字段,以确保输入正确的值。
操作是自适应表单上的特定活动,如单击按钮。 要创建测试用例和操作以验证每个自适应表单字段的用户输入,请执行以下操作:
在CRXDE lite中,导览至/content/forms/af/create-first-adaptive-form
文件夹。 右键单击create-first-adaptive-form文件夹节点,然后单击创建创建文件。 在名称字段中,键入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>
导航至 /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图标> 工具> 操作> 测试
要运行测试套件的所有测试,请执行以下操作:
在测试面板中,点按We retail - Tests(1)。 它该套件扩展为显示测试列表。
点按运行测试按钮。 测试执行时,屏幕右侧的空白区域将替换为自适应表单。
要从测试套件运行单个测试,请执行以下操作:
点按测试名称“Prefill test”,查看测试用例的结果。 它打开Result面板。 点按Result面板中测试用例的名称,以视图测试的所有详细信息。
现在,自适应表单已准备好发布。