---
title: GUI-Layer-Augmented Load Testing - Running JMeter with SideeX
tags: Chinese
---
# 擴增GUI層之負載測試 ：JMeter搭配使用SideeX

## 傳統Protocol層負載測試 vs. GUI層負載測試
JMeter是世界上最受歡迎的負載測試工具之一。它已廣泛用於負載測試Web應用程式的功能行為和性能。基本上，JMeter可以在Protocol層透過HTTP/HTTPS來模擬大量的負載連線。然而，隨著Web應用程式變得越來越複雜，尤其是從多頁式轉換為單頁式Web應用程式，越來越多交錯的AJAX HTTP/HTTPS連線是由GUI層中的用戶操作觸發的，而不單純只有頁面間跳轉的簡單HTTP/HTTPS連線。雖然目前[Web Driver Sampler](https://jmeter-plugins.org/wiki/WebDriverSampler/)(一種JMeter插件)可以使用真實的瀏覽器將負載測試提升至GUI層，但是在實務上仍然存在兩項挑戰：
1. 同時大量的開啟瀏覽器（即使是使用無頭模式）來讀取網頁，需耗費相對大量的CPU與記憶體，因此在數量上很難模擬大量的使用者。
2. 在網頁上一些看似簡單的操作，但背後常為一連串複雜的事件觸發與AJAX連線請求，而要為這些複雜行為撰寫大量WebDriver程式碼是一件繁瑣的工作。

## 混合方法：擴增GUI層之負載測試
對於這種情況，我們建議使用一種混合方法-**「使用JMeter發動大量簡單的HTTP/HTTPS請求，以模擬Web伺服器上的繁重負載，同時執行相對較少的GUI自動化操作進行側錄，藉此觀察受測系統GUI層之反應」**。至少通過這種方式，測試人員可以透過側錄結果得知當Web服務器承受沉重的負擔時，使用者在瀏覽器面前所看到的效能體驗為何。底下我們將介紹如何於JMeter上搭配使用SideeX來實現這種混合方法，JMeter可以在執行負載測試時同時運行SideeX錄製下的測試案例，在負載測試結束時，詳細的GUI層頁面呈現資訊將自動記錄到SideeX產生的測試報告中，包括每個指令的執行時間、畫面截圖、影片、時間折線圖和日誌。

## JMeter搭配使用SideeX
基本概念是讓JMeter在執行大量一般HTTP連線測試時同時透過[SideeX Runner](https://sideex.io/download/)來執行[SideeX Recorder](https://sideex.io/download/thanks)所錄下的測試案例。負載測試之後，SideeX Runner將生成包含詳細的GUI層資訊的測試報告。

> 預備工具:
> - [Java SE](https://www.oracle.com/java/technologies/javase-downloads.html)
> - [Node.js](https://nodejs.org)
### 步驟1：準備工具
1. 下載 [JMeter](https://jmeter.apache.org/download_jmeter.cgi)(已測試版本：JMeter 5.0)
2. 啟動Selenium Server
- 下載[Selenium Server](https://www.seleniumhq.org/download/) (已測版本：3.141.59)
- 下載[WebDriver](/@sideex/webdriver-zh#Here-are-the-browsers-currently-supported-by-SideeX)（建議使用Chrome WebDriver），並將其放置於與`selenium-server-standalone-{version}.jar`相同目錄下
- 開啟命令列模式並且切換路徑至`selenium-server-standalone-{version}.jar`的目錄
- 執行`java -jar selenium-server-standalone-{version}.jar`
3. 開啟命令列模式並執行`npm i -g @sideex/runner` 來安裝 [SideeX Runner](/@sideex/runner-zh)
4. 製作一個`config.json`，以下為`config.json`的範例。更多設定檔格式請參閱[附錄 A](/@sideex/runner-zh##-附錄-A---SideeX-Runner設定檔格式)。

    {
        "input": {
            "testSuites": ["YOUR_TESTSUITE_FILE_PATH"]
        },

        "webdriver": {
            "configs": [
                {
                    "serverUrl": "http://localhost:4444",
                    "type": "selenium",
                    "browsers":[
                        {
                            "active": true,
                            "capability": {
                                "browserName": "chrome"
                            }
                        }
                    ]
                }
            ]
        },
        "report": {
            "path": "[PATH_TO_SAVE_YOUR_TEST_REPORT]",
            "type":"html",
            "snapshot": 2,
            "snapshotQuality": 20
        }
    }

### 步驟2：在JMeter為SideeX Runner建立一個Thread Group
1. 於TestPlan上按右鍵，`Add` =>`Threads (User)` => `Thread Group`，您可以在此設定`Number of Thread` 和其他Thread的設定
2. 於Thread Group上按右鍵，`Add` =>`Sampler` => `OS Process Sampler`
3. 設定Command與Parameter
- 針對Windows作業系統，將`Command`設定為`CMD`，並在`Command parameters`底下加入兩個Value，`/C`與`sideex-runner -c {您config.json的路徑}`。
- 針對MAC和Linux作業系統，將`Command`設定為`/bin/bash`，並在`Command parameters`底下加入兩個Value，`-c`與`sideex-runner -c {您config.json的路徑}`。
5. 在Thread Group上按右鍵，`Add` => `Listener` => `View Results Tree`以呈現SideeX Runner之Log。

### 步驟3. 執行Thread
點選toolbar上的start按鈕來執行thread

### 步驟4：觀看測試報告
在執行結束後，測試報告將會被儲存至您`config.json`指定的路徑。
測試報告將顯示每個指令的時間、畫面截圖、影片、時間折線圖和日誌。測試報告可以是[HTML格式或JSON格式](/@sideex/book/%2F%40sideex%2Freportspec#HTML-Format)。此外，GUI層的動作時序顯示為三個折線圖。以下的折線圖範例顯示了第十個操作(clickAt)大約需要9秒才能完成，這顯示在伺服器處於高負載狀態時，使用者在點擊按鈕後將等待9秒。