KarateUI測試除錯與效能調校

Karate 框架不僅適用於 API 測試，也提供強大的 UI 測試功能。在 UI 測試中，除錯和效能調校至關重要。Karate 提供了截圖、元素高亮顯示等功能，方便開發者快速定位問題。此外，PDF 匯出功能有助於儲存測試結果，方便團隊協作和問題追蹤。Karate 的偵錯器則允許開發者逐步執行測試，並在斷點處檢查變數和程式碼執行狀態，大幅提升除錯效率。對於複雜的 UI 互動場景，Karate 支援 HTTP 請求攔截和模擬，讓開發者可以精確控制測試流程，並模擬各種網路狀況。最後，Karate Gatling 整合提供強大的效能測試能力，協助開發者評估應用程式在高負載下的表現，並找出效能瓶頸。

除錯 UI 測試

在第4章《執行 Karate 測試》中，我們已經看到了 Karate 結合 VS Code 的強大除錯功能。現在，我們將探討如何在瀏覽器測試中使用相同的技術。請注意，這些技術和方法適用於所有支援的瀏覽器。如果您想了解更多與目標瀏覽器和驅動程式相關的選項，例如使用 Karate Docker 映像進行視訊錄製，請參閱官方檔案的相關章節：https://github.com/karatelabs/karate/tree/master/karate-core#configure-drivertarget。

截圖功能

Karate 會在測試失敗時自動截圖。該截圖會自動附加到測試報告中，可以透過點選測試失敗的步驟來檢視。這使得除錯失敗原因變得更加容易。

圖示：測試報告中的失敗測試截圖

除了預設功能外，我們還可以在任何時候新增截圖。這可以成為幫助跟蹤測試過程的好工具。

要擷取當前頁面狀態的截圖，只需新增以下步驟：

* screenshot()

該截圖將在測試報告的精確位置附加。

元素截圖

Karate UI 支援對特定網頁元素進行截圖。這樣可以減少截圖大小，並在關注特定元素時去除幹擾。程式碼如下：

* screenshot('locator')

在這裡，locator 需要替換為網頁元素的定位器。

高亮元素

為了在視覺上確認元素，您可以高亮單個元素或一組相似元素。這些元素在測試執行期間會被清楚地標記出來，具有邊框和背景顏色。

highlight 功能會標記第一個匹配定位器的元素，而 highlightAll 功能則對所有找到的元素執行相同操作。

圖示：測試執行期間高亮的元素

例如，以下步驟用於高亮所有具有 search-item 類別的元素，這是我網站上每個搜尋結果共有的類別：

* highlightAll('.search-item')

預設高亮持續時間為 3 秒。您可以透過 Karate 的 configure 關鍵字或在 karate-config.js 中使用 karate.configure 函式來組態此設定。

匯出 PDF

有時，將網站的當前狀態儲存為 PDF 檔案會非常方便。例如，這在將其新增到錯誤報告中以向開發人員提供視覺線索時很有用。

只需呼叫以下步驟即可實作此功能：

* def resultAsPdf = pdf({})
* karate.write(resultAsPdf, "search.pdf")

在這裡，我們使用 pdf 函式傳回完整的位元組碼，然後將其傳遞給 karate.write 方法以寫入檔案。它需要一個 JSON 物件作為組態引數（您可以傳遞 {'orientation': 'landscape'} 以強制其進入橫向模式）。在本例中，我使用了一個空物件 {} 以使用預設組態。

圖示：產生的完整頁面 PDF

該 PDF 將保留網站連結，因此您可以直接點選這些連結跳轉到實際網站。

產生的 PDF 檔案會自動儲存在測試專案目標目錄下的指定名稱中。

使用偵錯器

我們在第4章《執行 Karate 測試》中使用了 Karate 偵錯器進行 API 測試。如前所述，使用偵錯器的先決條件是在 VS Code 的 launch.json 檔案中新增偵錯組態。

最快的方法是點選 VS Code CodeLens 中的 Karate: Debug，它出現在測試場景上方。這將開啟一個對話方塊，您可以在其中選擇 Karate (debug)，然後自動進入 launch.json 檔案。

圖示：啟動 Karate (debug)

點選 Add Configuration… 按鈕，您將開啟一個組態列表。選擇 Karate (debug): Maven 並儲存檔案。

下次您按下 CodeLens 中的 Karate: Debug 連結時，它應該啟動偵錯伺服器並將 VS Code 置於偵錯模式。

現在，您可以像使用 API 測試一樣，使用偵錯器來除錯瀏覽器測試。您可以參考第4章，瞭解如何一步一步執行測試、在測試之間跳轉，甚至動態更改測試程式碼。

圖示：偵錯主控台命令列用法

當開啟偵錯主控台並在斷點處暫停測試執行時，您可以執行所有可以在 Karate 測試中使用的命令。這使您可以嘗試定位器以查詢元素或直接與它們互動，從而大大加快測試開發的速度。

例如，我在偵錯主控台底部的命令列中輸入了 highlightAll('a')，以框選網站的所有連結元素。

圖示：偵錯主控台中 `highlightAll('a')` 命令的結果

按下 Enter 鍵將立即執行此命令並執行請求的操作！在 Karate UI 中進行偵錯的好處是，您可以在開啟的瀏覽器中立即以視覺方式確認這些操作。

使用 Karate 進行 HTTP 請求重定向

在進行網頁測試時，Karate 提供了一種強大的方法來攔截和重定向 HTTP 請求。這使得測試變得更加靈活和可控。

除錯測試：使用 `karate.stop`

karate.stop 方法是一種特殊的除錯方式，它允許你在測試執行過程中暫停並接管瀏覽器，以檢查元素或確認快速執行的動作是否正確。

* karate.stop(1234)

在測試執行過程中，當遇到 karate.stop 時，執行會暫停，並在控制檯日誌中顯示一個類別似以下的訊息：

*** waiting for socket, type the command below:
curl http://localhost:1234

你可以透過在新的終端視窗中執行 curl 命令或開啟 URL 來繼續測試執行。

重定向 HTTP 請求

在某些情況下，你可能需要將瀏覽器的 HTTP 請求重定向到特定的端點或模擬資料。Karate 的模擬功能可以幫助你實作這一點。

調查 API 請求

首先，你需要調查網頁與哪些端點進行通訊以檢索資料。可以使用 Chrome DevTools 的 Network 標籤來檢查網頁的外部資料來源請求。

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

title KarateUI測試除錯與效能調校

package "網路架構" {
    package "應用層" {
        component [HTTP/HTTPS] as http
        component [WebSocket] as ws
        component [gRPC] as grpc
    }

    package "傳輸層" {
        component [TCP] as tcp
        component [UDP] as udp
        component [TLS/SSL] as tls
    }

    package "網路層" {
        component [IP] as ip
        component [ICMP] as icmp
        component [路由協議] as routing
    }

    package "鏈路層" {
        component [Ethernet] as eth
        component [WiFi] as wifi
        component [ARP] as arp
    }
}

http --> tcp
ws --> tcp
grpc --> tcp
tcp --> tls : 加密
tls --> ip
udp --> ip
ip --> routing
routing --> eth
routing --> wifi
eth --> arp

@enduml

新增模擬回應

一旦你找到了相關的 API 請求，你就可以建立一個模擬回應來替換真實的 API 呼叫。

首先，複製真實的 JSON 回應資料，然後根據需要進行修改。

{
  "Items": [
    {
      "cat": "phone",
      "desc": "This is a test product",
      "id": 1,
      "img": "https://dummyimage.com/200x200?text=Karate",
      "price": 123,
      "title": "Test1"
    }
  ],
  "LastEvaluatedKey": {"id": "9"}
}

組態模擬

接下來，建立一個 Karate 特性檔案來提供模擬回應。

@ignore
Feature: Mock API

Scenario: pathMatches('/entries')
  * def response = read('products.json')

使用模擬回應

在你的測試場景中，你可以使用 karate.configure 方法來啟用模擬。

* karate.configure('mock', { uri: '/entries', feature: 'mock.feature' })

這樣，當網頁發出對 /entries 的請求時，Karate 將傳回你定義的模擬回應。

內容解密：

此段落主要介紹瞭如何使用 Karate 進行 HTTP 請求重定向和模擬。首先，我們瞭解了 karate.stop 方法的使用，這是一種特殊的除錯方式，可以暫停測試執行並接管瀏覽器。接著，我們探討瞭如何調查 API 請求並新增模擬回應。最後，我們學習瞭如何組態和使用模擬回應來替換真實的 API 呼叫。這些技術可以大大提高網頁測試的效率和可靠性。

使用 Karate Gatling 進行效能測試

截至目前為止，我們已經探討了 Karate API 測試的許多不同導向，包括瀏覽器測試。在本章中，我們將探索 Karate 提供的另一種測試型別——效能測試。我們將使用一個簡單的 Karate 場景，並逐步完成將其作為效能測試執行的必要步驟。此外，我們還將檢視日誌和測試報告，以更深入地瞭解這型別的測試以及我們可以從中得出的結論。

在本章中，我們將涵蓋以下主要主題：

什麼是 Gatling？
設定 Karate Gatling
將 Karate 測試作為效能測試執行
檢視 Gatling 報告

技術需求

您需要以下內容：

在第 2 章《設定您的 Karate 專案》中完成的系統和 IDE 設定

建立測試場景

在本章的測試場景中，我們將保持簡單。我們將使用所謂的 Jikan API（https://jikan.moe），它提供了有關動漫和漫畫電影、系列和書籍的資訊。由於此示範應顯示有關一般 API 可用性的一些統計資料，因此我們目前不會費心處理其詳細的請求和回應資料，而是專注於單個端點的回應程式碼。

這是我們將使用的測試場景：

Feature: 效能測試
Scenario: 效能
* url 'https://api.jikan.moe/v4/'
* path 'anime/1'
When method get
Then status 200

內容解密：

此測試場景進行了一個 GET 請求到 anime/1 路徑，檢查 HTTP 狀態碼是否為 200（OK）。

url 'https://api.jikan.moe/v4/'：設定請求的基本 URL。
path 'anime/1'：指定請求的路徑。
When method get：傳送 GET 請求。
Then status 200：斷言 HTTP 回應狀態碼為 200。

在書籍的這個階段，這個測試場景應該是不言自明的，因為它不包含任何複雜的邏輯。我們現在可以透過在終端機中呼叫 mvn clean test 來執行它，就像我們之前建立的所有其他 Karate 測試一樣。這將是我們用來探索 Karate Gatling 的基本測試。

什麼是 Gatling？

負載測試和效能測試是兩種型別的軟體測試，幫助開發人員評估其應用程式在不同工作負載下的效能。負載測試是模擬使用者流量對應用程式進行測試，以檢查其處理大量請求的能力。這種測試有助於確定應用程式的最大容量，並判斷它是否能夠在預期工作負載下正常執行而不會當機或變慢。

另一方面，效能測試是測量應用程式在不同條件下的速度、可擴充套件性和穩定性的過程。這種測試有助於識別應用程式中的效能瓶頸，並對其進行最佳化，以獲得更好的回應和還原能力。

在 API 的上下文中，負載測試和效能測試用於評估 API 處理大量請求並在預期時間範圍內回應的能力。這些測試幫助開發人員識別潛在的問題，例如回應時間緩慢、錯誤、意外行為，甚至可能對使用者經驗產生負面影響的完全當機。

軟體開發中有多種工具可用於此目的。例如有 Apache JMeter（https://jmeter.apache.org）、Locust（https://locust.io）或 Siege（https://www.joedog.org/siege-home）。本章將重點介紹另一種與 Karate 結合使用的常見工具——Gatling。

Gatling 是一個強大的開源負載和效能測試工具，專為現代 Web 應用程式設計。它允許開發人員和測試人員模擬大量使用者對應用程式發起請求，從而評估其在不同負載下的表現。Gatling 以其易用性、高效能和詳細的報告功能而聞名，使其成為開發人員和 QA 工程師的首選工具之一。

使用 Karate UI 進行瀏覽器測試

使用 Mock 攔截真實請求

Feature: Intercept test
Scenario: Inject custom products
* configure driver = { type: 'chrome' }
* driver 'https://www.demoblaze.com'
* driver.intercept({ patterns: [{ urlPattern: '*/entries' }], mock: 'products.feature' })
* karate.stop(5555)

內容解密：

此範例展示瞭如何使用 driver.intercept 方法攔截特定的請求，並將其轉發到一個 mock feature。

configure driver = { type: 'chrome' }：設定 WebDriver 為 Chrome 瀏覽器。
driver 'https://www.demoblaze.com'：開啟指定的網頁。
driver.intercept({ patterns: [{ urlPattern: '*/entries' }], mock: 'products.feature' })：攔截 URL 符合特定模式 (*/entries) 的請求，並將其轉發到 products.feature 中定義的 mock 端點。
karate.stop(5555)：暫停測試執行，保持瀏覽器開啟，以便手動驗證結果。

這個強大的功能結合了 Karate 的 mocking 功能和 API 呼叫攔截，使得在瀏覽器測試中模擬 API 回應變得非常方便。

效能測試與 Karate Gatling 整合

Gatling 簡介

Gatling（https://gatling.io）是一款開源的負載測試和效能測試工具，幫助開發者模擬和衡量應用程式的效能。它使用 Scala 程式語言，具有高效、可擴充套件和易用的特點。

Scala 語言概述

Scala 是一種多用途的程式語言，設計用於大型應用程式的高效能和可擴充套件性。它結合了函式式程式設計和物件導向程式設計，使開發者能夠撰寫簡潔、易讀且易於維護的程式碼。由於與 Java 相容並支援分散式運算，Scala 成為建立高效能應用程式的熱門選擇。

使用 Gatling 進行效能測試

Gatling 允許使用者建立複雜的負載測試場景，並在多台機器上執行，以測試應用程式或 API 在不同條件下的效能。除了安裝 Gatling 並使用其使用者介面設計測試案例外，還可以透過多執行緒模擬多個請求。

Gatling 的優勢

Gatling 提供即時的測試結果報告和分析，以圖形格式呈現，幫助識別效能瓶頸。這對於最佳化應用程式以處理更高負載至關重要。Gatling 在軟體開發行業中被廣泛用於確保 Web 應用程式的品質和可擴充套件性。

設定 Karate Gatling

本文將介紹如何設定 Karate Gatling 以進行效能測試。主要工作將在 Maven POM 檔案中完成。

在 VS Code 中設定 Scala

為了有效地撰寫 Scala 程式碼，建議使用支援 Scala 的 IDE。VS Code 提供官方的 Scala 語法外掛，能夠提供程式碼高亮顯示等功能。

建立 Maven 設定檔

Maven 設定檔允許在單一 pom.xml 檔案中組織不同的依賴和工作流程，並在執行時啟用所需的設定檔。這使得使用者能夠選擇要執行的測試以及執行方式。

重組 `pom.xml` 檔案

標準的 pom.xml 檔案由 Karate Maven 原型（archetype）生成，包含執行 Karate 測試所需的一切。本文將重組 <build> 區段，將 maven-surefire-plugin 區塊移到新的設定檔中。

新增預設設定檔

新增 <profiles> 區段到 pom.xml 檔案中，包含兩個設定檔定義：預設設定檔用於執行單元測試，效能設定檔用於執行 Gatling 效能測試。

<profiles>
    <profile>
        <id>default</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <!-- maven-surefire-plugin 設定 -->
    </profile>
    <!-- 效能設定檔 -->
</profiles>

詳細解說：

profiles 元素：定義多個建置設定檔，可以根據不同需求啟用不同設定。
profile 元素：每個設定檔的定義，包括 id 和 activation 等屬性。
activeByDefault 元素：指定預設啟用的設定檔。
maven-surefire-plugin 設定：在預設設定檔中包含此外掛，用於執行單元測試。

此圖示說明瞭本章節的主要內容流程，從 Gatling 簡介到設定 Karate Gatling 及 Maven 設定檔的建立。

後續步驟

後續章節將探討 Gatling 測試報告的解讀和分析，以及如何根據測試結果最佳化應用程式的效能。

玄貓 BlackCat

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。

KarateUI測試除錯與效能調校

除錯 UI 測試

截圖功能

圖示：測試報告中的失敗測試截圖

元素截圖

高亮元素

圖示：測試執行期間高亮的元素

匯出 PDF

圖示：產生的完整頁面 PDF

使用偵錯器

圖示：啟動 Karate (debug)

圖示：偵錯主控台命令列用法

圖示：偵錯主控台中 highlightAll('a') 命令的結果

使用 Karate 進行 HTTP 請求重定向

除錯測試：使用 karate.stop

重定向 HTTP 請求

調查 API 請求

新增模擬回應

組態模擬

使用模擬回應

內容解密：

使用 Karate Gatling 進行效能測試

技術需求

建立測試場景

內容解密：

什麼是 Gatling？

使用 Karate UI 進行瀏覽器測試

使用 Mock 攔截真實請求

內容解密：

效能測試與 Karate Gatling 整合

Gatling 簡介

Scala 語言概述

使用 Gatling 進行效能測試

Gatling 的優勢

設定 Karate Gatling

在 VS Code 中設定 Scala

建立 Maven 設定檔

重組 pom.xml 檔案

新增預設設定檔

詳細解說：

此圖示說明瞭本章節的主要內容流程，從 Gatling 簡介到設定 Karate Gatling 及 Maven 設定檔的建立。

後續步驟

玄貓 BlackCat

圖示：偵錯主控台中 `highlightAll('a')` 命令的結果

除錯測試：使用 `karate.stop`

重組 `pom.xml` 檔案