[原文：state of testing in UI5: OPA5, UIVeri5 and wdi5](https://blogs.sap.com/2020/11/19/state-of-testing-in-ui5-opa5-uiveri5-and-wdi5/)

測試作為確保 UI5 應用程式開發投資的一種手段已經變得越來越普遍。

為了進一步推動這個問題，讓我們評估 UI5 中最突出的端到端測試框架。

![image](https://img-blog.csdnimg.cn/img_convert/77d82e63f7532b9f0473d90cc0b8aac9.png)

所有這三個都允許測試面向使用者的功能，“像使用者一樣”操作 UI5 應用程式：與 UI 元素互動。

UIVeri5 和 wdi5 都可以遠端控制瀏覽器。 也就是說，它們有一個不同於 UI5 應用程式的執行時。 因此，兩者都需要一個（網路）伺服器，以便連線到執行測試中的 UI5 應用程式。

OPA5 的不同之處在於它與 UI5 應用程式共享相同的執行時——它與被測 UI5 應用程式相鄰工作，而不是分開。

（QUnit 不在本文中，因為我們專注於執行面向使用者的測試，而不是純粹的功能測試。）

此外，wdi5 允許在移動裝置上測試混合應用程式。 它可以連線到 iOS、Android 和 Electron 上使用cordova 封裝的UI5 應用程式，並執行與基於瀏覽器的應用程式相同的測試。

# OPA5

OPA5 自帶 UI5，不需要額外的安裝步驟。 然而它的設定並不直觀，混合了 OPA5 的基本 QUnit，並且需要幾個包含級別。

下面是一些例子：

webapp/test/integration/opaTests.qunit.html:

```html
	
	<div></div>

<div id="qunit"></div>
    
```

webapp/test/integration/opaTests.qunit.js:

```javascript
sap.ui.getCore().attachInit(function () {
	"use strict";

sap.ui.require([
        // all test suites aggregated in here
		"test/Sample/test/integration/AllJourneys"
	], function () {
        // `OPA5`'s mama :)
		QUnit.start();
	});
});
```

```javascript
webapp/test/integration/AllJourneys.js:

sap.ui.define([
	"./arrangements/Startup", // arrangements
	"./NavigationJourney", // actions + assertions
	"./BindingJourney", // actions + assertions
	"./InteractionJourney" // actions + assertions
], /* ... */
```

excerpt from webapp/test/integration/BindingJourney.js:

```javascript

sap.ui.define(["sap/ui/test/opaQunit", "./pages/Main", "./pages/Other"], function (opaTest) {
    "use strict";

QUnit.module("Binding Journey");

QUnit.module("Other view: PeopleList: items aggregation");

opaTest("bound status", function (Given, When, Then) {
        Given.iStartMyApp();

When.onTheAppPage.iPressTheNavButton();

Then.onTheOtherView.iShouldSeeTheList().and.theListShouldBeBound();
    });
// ...
```

使用下面的 url 啟動：

http://localhost:1081/test/integration/opaTests.qunit.html

# uiveri5

UIVeri5 需要 Node.js >=8 並透過標準 npm 命令 npm install @ui5/uiveri5 安裝。

然後透過配置檔案和包含測試程式碼的檔案進行設定——確保兩者都在同一個檔案 sys 資料夾中。

配置檔案：

```javascript
exports.config = {
    profile: "integration",
    baseUrl: "http://localhost:1081/index.html"
};
```

然後可以啟動 UIVeri5

* 首先啟動網路伺服器：yarn dev（或yarn start:ci）
* yarn test:uiveri5

OPA5 速度快於 UIVeri5，因為它與 UI5 共享執行時，從而節省了基礎設施開銷，例如啟動瀏覽器本身。然而，當需要更高階的測試行為時，它很快就會達到其極限，例如 UI5 控制元件之間的交叉互動或對 UI5 控制元件以外的元素進行操作。此外，巢狀的 waitFor 操作感覺很笨拙。

使用 UIVeri5，可以真正以外部使用者的身份操作 UI，包括 UI5 控制元件之外的元素和功能。但是 UIVeri5 的核心（Protractor、WebdriverJS）感覺已經過時了，核心元素之間的連線程式碼有時會缺少最後的實現里程（例如不可能在 conf.js 中設定日誌級別？！）。某些限制，例如套件名稱（描述）和檔名之間的強制關聯也會增加這種印象。不幸的是，在測試時控制元件上只有 UI5 API 方法的一個子集可用。此外，文件似乎是零散的——但在文件中有點隱藏，UIVeri5 具有預構建的身份驗證器，其中包括 SAP Cloud Platform SAP ID。

關於 SAP UI5 應用的自動化測試方法

相關文章