https://developers.sap.com/tutorials/cp-uiveri5-cap.html

UIVeri5 是用於 SAPUI5 應用程式的 SAP 開源 JavaScript 測試框架。 它為您部署的應用程式驅動一個真實的瀏覽器並模擬真實的使用者場景。 系統測試檢查前端和後端，並確保應用程式的所有部分都能很好地協同工作。

下圖顯示了與其他測試方法和工具相比，使用 UIVeri5 進行系統測試的定位。 箭頭形狀說明了方法的粒度：與單元、元件或整合測試相比，系統測試檢查的細節較少，而是專注於關鍵的工作流程。

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

# About the SAPUI5 Test Recorder

SAPUI5 測試記錄器是一種幫助您建立整合和系統測試的工具。 您可以在任何 SAPUI5 應用程式中使用它來檢查其使用者介面、檢視控制元件屬性並獲取 OPA5 和 UIVeri5 測試的程式碼片段。 從 1.74 版開始，它是 SAPUI5 框架的一部分。

# About CI/CD with Project “Piper”

“Piper”專案是 SAP 的持續整合和交付解決方案之一。 它提供了預配置的 Jenkins 管道，您可以在自己的 Jenkins 主基礎架構中使用這些管道並根據您的需求進行調整。 “Piper” 專案由兩個不同的部分組成：

* 一個共享庫，其中包含使用 Jenkins 管道所需的步驟、場景和實用程式的描述

* 一組可用於實現最佳實踐流程的 Docker 映象

CTRL + SHIFT + ALT + T，使用這組快捷鍵，開啟 SAP UI5 自帶的 Test Recorder：

![](https://img-blog.csdnimg.cn/img_convert/8a9c32cae7adb6a8049be6314a757d62.png)

對著 Create 按鈕單擊右鍵，選擇 Press：

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

這樣，在 Test Recorder 裡，能找到在 UIVeri5 裡使用程式碼點選 Create 按鈕的實現：

![](https://img-blog.csdnimg.cn/img_convert/016d718ce7f18bf6612b40173e7ae52f.png)

```javascript
<idoaction>: function () {
    element(by.control({
        id: "admin::BooksList--fe::table::Books::LineItem::StandardAction::Create",
        interaction: {
            idSuffix: "BDI-content"
        }
    })).click();
}
```

![](https://img-blog.csdnimg.cn/img_convert/8790c719421c731ba83d71b3f698cd5f.png)

(a) conf.js 檔案：

在此檔案中，您可以定義例如使用的瀏覽器和報告器、基本 URL 和登入對話方塊的憑據。本文您只需要提供基本 URL。

(b) spec.js 檔案（在這種情況下，它被稱為 teched.spec.js）：

在此檔案中，您將定義測試場景，其中包含一個接一個觸發的步驟。在測試場景中，您將引用您的頁面物件。

(c) Page 物件（在本例中，您有 pages/manageBooksPage.js 用於新增的書籍列表和用於建立新書的按鈕，以及 pages/newBookPage.js 用於提供新書的詳細資訊）：

頁面物件是代表應用程式重要部分的設計模式，例如檢視。他們將兩種元素分組：

操作 Actions，例如，選擇“建立”按鈕以建立新書
斷言 Assertions，例如，檢查新建立的書籍是否顯示在書籍列表中

頁面物件使用定位器來識別螢幕上的特定元素。因此，它們允許測試執行者看到並執行真實使用者會做的任何事情。頁面物件駐留在專案的頁面資料夾中。

在 conf.js 裡新增 baseUrl：http://localhost:4004/fiori.html#manage-books
![](https://img-blog.csdnimg.cn/img_convert/298b13e7be25f9d5fa4ea809a2830657.png)

http://localhost:4004/fiori.html#manage-books

編寫完 teched.spec.js 後，切換到 uiveri5 目錄下，使用命令列 uiveri5 啟動測試：

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

最後在 target 資料夾裡，能檢視到測試報告 report.html:

![](https://img-blog.csdnimg.cn/img_convert/0e7eb5699a35631dce5e6b04b8e3a566.png)</idoaction>

使用 SAP UI5 系統測試工具 UIVeri5 的一個具體例子

相關文章