使用单页验收（OPA5）测试执行集成测试

学习目标

使用 OPA5 执行集成测试。

使用 OPA5 进行集成测试

观看这段简短视频，了解 OPA5 及其优势和局限性。

视频：本节含 SAP 官方视频（视频 ID 1_fjnvoj6v），需在 learning.sap.com 在线观看。

OPA5 与引导

正如我们在 QUnit 课程中已经看到的，OPA 测试的启动也是通过另一个 html 文件实现的。该文件名为 opaTests.qunit.html，包含用于执行 OPA 测试的引导代码。该引导文件由 SAP Business Applicaton Studio 在生成项目时生成。

现在让我们来看引导、库加载和测试启动。

视频：本节含 SAP 官方视频（视频 ID 1_25n6cg72），需在 learning.sap.com 在线观看。

注意

在一个 UI5 项目中通常会有各种测试。测试通常按其上下文区分——例如，诸如确保在选中某个列表项时显示并测试所选项详细信息之类的测试（当该项的状态为特定值时，显示特定图标）。这些不同的测试通常关联到一个旅程（journey）。一个旅程由一系列属于同一上下文（例如在应用中导航）的集成测试组成。与 QUnit 测试的实现类似，OPA5 使用 QUnit，这就是我们首先设置一个将显示在结果页面上的 QUnit 模块 Navigation 的原因。该旅程在文件 NavigationJourney 中实现。当然，你也可能有名称不同、包含旅程实现的其他文件。

OPA5：测试用例剖析

每个测试用例场景都在不同的 JavaScript 文件中实现。

以下两幅图描述了 OPA5 测试用例的剖析。

示例 TestCase.js 文件。

带有 Given、When 和 Then 对象的 opaTest 定义。

上图展示了一个测试实现。该测试用例用于检查命名空间为 sap.training.optest.integration.button 的组件是否可以加载。

函数 opaTest 是使用 OPA 定义集成测试的主要方面。它的参数定义了一个测试名称和一个回调函数，该回调函数会使用以下 OPA5 辅助对象执行，以编写读起来像用户故事一样的有意义的测试。

Given：在 given 对象上，我们可以调用诸如 iStartMyUIComponent 之类的安排函数，以在单独的 iFrame 中加载我们的应用进行集成测试。
When：包含我们可以执行的自定义操作，以使应用进入允许我们测试预期行为的状态。
Then：包含用于检查应用中特定组合情况的自定义断言，以及再次移除我们 iFrame 的 teardown 函数。

OPA5 通过 ID 检索控件

OPA5 框架为我们提供了多种获取视图上 UI 控件引用的方式。一种方式是通过控件的 id 获取引用。下图展示了通过 ID 检索控件所涉及的关键方面。

示例 When 代码，包含 viewName 和 UI 控件的 id、成功时的事件触发以及错误消息。

注意

确保视图实现中的每个控件都具有稳定的 id。除其他事项外，使用稳定的 id 将确保你的测试能够正常工作。要了解有关稳定 id 的更多信息，请参阅 SAPUI5 文档，https://ui5.sap.com/#/topic/79e910e6a0d949c7acb051b33170bebc。

OPA5 不使用 ID 检索控件

除了通过 id 检索 UI 控件之外，还可以使用所谓的匹配器（matcher）。下图展示了使用匹配器在不带 ID 的情况下检索控件。在这种情况下，使用了 sap.ui.test.matchers.PropertyStrictEquals。我们想要获取所有类型为 sap.m.Button 的控件，其属性 text 包含值 Press me。你可以在 SAPUI5 API 文档的命名空间 sap.ui.test.matchers 中找到更多匹配器实现（https://ui5.sap.com/#/api/sap.ui.test.matchers）。

使用匹配器检索控件的示例 When 代码。

编写 OPA 测试

在本演示中，你将编写 OPA 测试。

小心

请注意，根据你用于演示的环境，你可能会遇到一些错误。这需要直接在 PC 上执行。在诸如培训环境之类的虚拟环境中可能无法正常工作。

步骤

将 *opa.tar* 项目导入你的 Business Application Studio。
在你的培训文件中找到 *CHECKopa.tar* 文件。
选择菜单 File→Open Folder...。
选择或输入 /home/user/projects/ 文件夹并选择 OK。
选择菜单 File→Import Project..。
选择 *CHECKopa.tar* 文件并选择 OK。
运行你的应用。选择 Press me 按钮。会出现一个对话框，显示消息 Button pressed。
在你的项目文件夹 (CHECKopa) 上打开上下文菜单。
选择 预览应用。
在打开的对话框中选择 start fiori run –open ".."。
如果出现提示，请在右下角的对话框中选择 Open。
在 *webapp/test/integration/pages/Main.js* 文件中实现一个名为 iShouldFindAButton 的测试函数，并检查上一个任务中实现的 Main 视图是否包含 id 为 helloButton 的控件。

this.waitFor 的属性-值对

属性	值
viewName	`sViewName`
id	`helloButton`
success	带有一个名为 `oButton` 参数的回调函数
errorMessage	`Did not find the hellobutton`
timeout	`3`

打开 *webapp/test/integration/pages/Main.js* 文件。
使用以下代码在 iShouldSeeThePageView 函数之后实现 iShouldFindAButton 函数：

iShouldFindAButton: function () {
return this.waitFor({
viewName: sViewName,
id: "helloButton",
success: function (oButton) {
},
errorMessage: "Did not find the hello-Button",
timeout: "3"
});
}

实现 success 函数。在传入的 oButton 对象上触发 press 事件，并打印一个类型为 ok 的断言。使用以下代码：

oButton.$().trigger("press");
Opa5.assert.ok(oButton.getId(), "Button with the given ID found");

保存你的工作。你的实现现在应如下所示：
将断言 iShouldFindAButton 添加到 *webapp/test/integration/NavigationJourney.js* 文件中。
打开 *NavigationJourney.js* 文件，并将iShouldFindAButton 添加为新断言。在 iShouldSeeThePageView() 断言之后添加以下代码：

Then.onTheViewPage.iShouldFindAButton();

保存你的更改。你的代码应如下所示：
在 int-tests 模式下启动你的应用。会打开一个新的浏览器选项卡，测试用例随即开始。测试完成后，你可以展开测试结果以获取更多详细信息。结果屏幕应如下图所示。
在我们的项目文件夹 (CHECKopa) 上打开上下文菜单。
选择 预览应用。
在打开的对话框中选择 int-tests fiori run –open ".."。
如果出现提示，请在右下角的对话框中选择 Open。
会打开一个新的浏览器选项卡，测试用例随即开始。测试完成后，你可以展开测试结果以获取更多详细信息。