Jenkins Pipeline 提供了自動化佈署和測試網頁應用程式的方法。此專案中，我們使用 Maven 管理網頁電腦應用程式，並透過 Jenkins Pipeline 將其佈署到 Nexus Repository。Pipeline 包含程式碼簽出、Maven 佈署等階段，並利用 Selenium WebDriver 和 Python 進行 UI 自動化測試，確保應用程式功能的正確性。測試過程中，我們使用 Python 指令碼讀取環境變數和 UI 元素識別資訊，並模擬使用者操作，驗證應用程式的行為。
佈署CalculatorAPI於Nexus Repository
在上一章節中，我們已經建立了一個Jenkins Pipeline，現在我們將新增一個階段，「佈署CalculatorAPI於Nexus Repository」（見圖14-11）。
新增階段
為了實作這個階段，我們需要執行Maven的佈署目標。回到Pipeline Syntax: Snippet Generator，選擇「bat」步驟，並在Batch Script編輯欄中輸入 %MVN_HOME%\bin\mvn deploy。然後，點選「Generate Pipeline Script」按鈕，生成指令碼步驟。複製這個步驟並將其貼上到新增的階段中。
Pipeline程式碼
以下是更新的Pipeline程式碼（見清單14-1）：
node {
def mvnHome
stage('簽出程式碼') { // for display purposes
// 從GitLab倉函式庫取得程式碼
git branch: 'Master', credentialsId: 'jenkinsbookcalculatorapi.git'
}
stage('佈署CalculatorAPI於Nexus Repository') {
mvnHome = tool 'MyMaven'
withEnv(["MVN_HOME=$mvnHome"]) {
bat '%MVN_HOME%\\bin\\mvn deploy'
}
}
}
在這段程式碼中，def mvnHome 定義了一個變數 mvnHome。stage('簽出程式碼') 階段從GitLab倉函式庫中簽出程式碼。mvnHome = tool 'MyMaven' 設定 mvnHome 變數為Maven安裝路徑，該路徑在全域性工具組態中設定為 MyMaven（見圖14-12）。
執行Pipeline工作
現在，我們已經建立了一個Pipeline工作。讓我們執行它以發布新的CalculatorAPI版本。我們不會對程式碼進行任何修改，只是糾正了 TestAdditionWithPositiveNumbers() 測試案例的預期結果值（見清單14-2）：
@Test(priority = 1)
public void TestAdditionWithPositiveNumbers() {
//...
}
點選「儲存」按鈕後，Pipeline工作就會開始執行。
圖表翻譯：
graph LR
A[Pipeline工作] --> B[簽出程式碼]
B --> C[佈署CalculatorAPI於Nexus Repository]
C --> D[執行Maven佈署目標]
D --> E[發布新的CalculatorAPI版本]
這個圖表顯示了Pipeline工作的流程，從簽出程式碼到佈署CalculatorAPI於Nexus Repository，最後發布新的CalculatorAPI版本。
內容解密：
在這個階段中，我們使用 withEnv 步驟設定 MVN_HOME 環境變數為Maven安裝路徑。然後，我們使用 bat 步驟執行Maven的佈署目標。這個目標會將CalculatorAPI佈署到Nexus Repository中。
圖表：
flowchart TD
A[Pipeline工作] --> B[簽出程式碼]
B --> C[佈署CalculatorAPI於Nexus Repository]
C --> D[執行Maven佈署目標]
D --> E[發布新的CalculatorAPI版本]
這個圖表顯示了Pipeline工作的流程，從簽出程式碼到佈署CalculatorAPI於Nexus Repository，最後發布新的CalculatorAPI版本。
瞭解Jenkins Pipeline的運作原理
Jenkins Pipeline是一種強大的工具，能夠自動化軟體開發的各個階段，從編譯、測試到佈署。它提供了一種宣告式的方式來定義Pipeline，讓開發者可以輕鬆地管理複雜的工作流程。
Pipeline的優點
Jenkins Pipeline相比於傳統的Jenkins工作（Job）具有許多優點。首先，它允許開發者使用宣告式的語法來定義工作流程，這使得工作流程更容易閱讀和維護。其次，Pipeline可以自動化軟體開發的各個階段，從編譯、測試到佈署，減少了手動操作的需要。
宣告式Pipeline和指令碼式Pipeline
Jenkins Pipeline提供了兩種定義Pipeline的方式：宣告式（Declarative）和指令碼式（Scripted）。宣告式Pipeline使用了一種簡單的語法來定義工作流程，而指令碼式Pipeline則使用Groovy指令碼來定義工作流程。
使用Snippet Generator生成Pipeline步驟
Jenkins提供了一個Snippet Generator工具，可以幫助開發者生成Pipeline步驟。這個工具可以根據開發者的需求生成相應的Pipeline程式碼，減少了手動編寫程式碼的需要。
建立一個Pipeline來執行Java API的構建生命週期
在本章中，我們建立了一個Pipeline來執行Java API的構建生命週期。這個Pipeline包括了編譯、測試和佈署等階段。透過這個例子，我們學習瞭如何使用Jenkins Pipeline來自動化軟體開發的各個階段。
發布新版本的Calculator API到Nexus Repository
最後，我們發布了一個新版本的Calculator API到Nexus Repository。這個過程包括了建立一個新的分支、提交變更、合併到主分支等步驟。透過這個例子，我們學習瞭如何使用Jenkins Pipeline來自動化軟體發布的過程。
// Calculator API範例
public class Calculator {
public int add(int a, int b) {
return a + b;
}
}
內容解密：
上述範例展示了一個簡單的Calculator API。這個API提供了一個add方法，該方法接受兩個整數引數並傳回它們的和。在實際應用中，這個API可以被用於各種計算任務。
flowchart TD
A[開始] --> B[編譯]
B --> C[測試]
C --> D[佈署]
D --> E[發布]
圖表翻譯：
上述Mermaid圖表展示了軟體開發的各個階段。從左到右，圖表展示了編譯、測試、佈署和發布等階段。這個圖表可以幫助開發者瞭解軟體開發的各個階段以及它們之間的關係。
網頁應用程式專案管理
在前一章中，您學習瞭如何使用Jenkins工作來管理使用Java開發的API專案的發布。您建立了自由式和管道工作，從遠端GitLab儲存函式庫中提取最新的應用程式碼，然後執行構建生命週期的不同階段，例如編譯、使用TestNG進行單元測試、封裝測試實作為.JAR檔案，最後將.JAR檔案佈署到Nexus儲存函式庫。
本章將向您展示如何使用Jenkins工作來管理簡單計算器網頁應用程式的發布生命週期。這個網頁應用程式是使用Maven專案開發的，僅包含一個.HTML檔案。您將實作一個端對端的構建過程，包括從儲存函式庫中提取原始碼、將應用程式佈署到IIS網頁伺服器、執行使用Python開發的自動端對端測試，以及使用Selenium WebDriver UI自動化函式庫。
網頁應用程式原始碼理解
載入此應用程式到瀏覽器後，它看起來像圖15-1所示。 圖15-1：計算器網頁應用程式在瀏覽器中執行 它執行簡單的算術運算，如加法、減法、乘法和除法。使用者可以透過輸入數字和運算子來執行任何這些運算。這個應用程式使用HTML和CSS進行設計，其邏輯是使用嵌入在.HTML檔案中的JavaScript編寫的。專案原始碼目錄結構如圖15-2所示。
目錄結構
計算器網頁應用程式專案的目錄結構如圖15-2所示。 圖15-2：計算器網頁應用程式專案的目錄結構 Calculator.html檔案包含應用程式碼，如清單15-1所示。 清單15-1：計算器網頁應用程式的Calculator.html原始碼檔案
<html>
<head>
<script>
//顯示值的函式
function dis(val) {
document.getElementById("result").value += val;
}
//評估數字並傳回結果的函式
function solve() {
let X = document.getElementById("result").value;
let z = eval(X);
document.getElementById("result").value = z;
}
//清除顯示的函式
function clr() {
document.getElementById("result").value = "";
}
</script>
<!-- 用於樣式 -->
<style>
內容解密：
上述程式碼定義了三個函式：dis、solve和clr。dis函式向結果輸入欄中追加值，solve函式評估結果輸入欄中的數字並傳回結果，clr函式清除結果輸入欄中的內容。這些函式使用JavaScript編寫，並嵌入在.HTML檔案中。
圖表翻譯：
flowchart TD
A[使用者輸入] --> B[顯示值]
B --> C[評估數字]
C --> D[傳回結果]
D --> E[清除顯示]
上述Mermaid圖表展示了計算器網頁應用程式的運作流程。使用者輸入數字和運算子，然後顯示值，評估數字並傳回結果，最後清除顯示。
建立Jenkins工作以管理Web應用程式專案
在本章中，我們將探討如何建立Jenkins工作以管理Web應用程式專案。首先，我們需要建立一個簡單的Web應用程式。以下是該應用程式的HTML程式碼：
<style>
.title {
margin-bottom: 10px;
text-align: center;
width: 210px;
color: green;
border: solid black 2px;
}
input[type="button"] {
background-color: green;
color: black;
border: solid black 2px;
width: 100%
}
input[type="text"] {
background-color: white;
border: solid black 2px;
width: 100%
}
</style>
<body>
<div class="title">Jenkins書籍計算器應用程式</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<td><input type="button" value="c" onclick="clr()"/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"/></td>
<td><input type="button" value="2" onclick="dis('2')"/></td>
<td><input type="button" value="3" onclick="dis('3')"/></td>
<td><input type="button" value="/" onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/></td>
<td><input type="button" value="5" onclick="dis('5')"/></td>
<td><input type="button" value="6" onclick="dis('6')"/></td>
<td><input type="button" value="-" onclick="dis('-')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/></td>
<td><input type="button" value="8" onclick="dis('8')"/></td>
<td><input type="button" value="9" onclick="dis('9')"/></td>
<td><input type="button" value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/></td>
<td><input type="button" value="0" onclick="dis('0')"/></td>
<td><input type="button" value="=" onclick="solve()"/></td>
<td><input type="button" value="*" onclick="dis('*')"/></td>
</tr>
</table>
</body>
這個Web應用程式是一個簡單的計算器，包含基本的算術運算。由於這個應用程式只包含一個HTML檔案，因此不需要編譯或封裝階段。
佈署計算器Web應用程式
要佈署這個應用程式，只需要將Calculator.html檔案複製到指定的目錄即可。我在IIS網頁伺服器中建立了一個別名，稱為CalculatorWebApp%，並指向D:\JenkinsBookExamples\DeployedCalculatorWebApp`目錄。
您可以在「編輯虛擬目錄」視窗中新增別名組態，如下圖所示：
圖表翻譯：
graph LR
A[建立別名] --> B[指向目錄]
B --> C[佈署應用程式]
這個圖表展示了建立別名、指向目錄和佈署應用程式的流程。
建立Jenkins工作
現在，我們需要建立一個Jenkins工作以管理這個Web應用程式專案。這個工作將負責佈署應用程式到指定的目錄。
內容解密：
// 佈署應用程式到指定目錄
function deployApp() {
// 複製Calculator.html檔案到目錄
const src = 'path/to/Calculator.html';
const dest = 'D:\\JenkinsBookExamples\\DeployedCalculatorWebApp';
// 使用fs模組複製檔案
const fs = require('fs');
fs.copyFile(src, dest, (err) => {
if (err) {
console.error(err);
} else {
console.log('應用程式已佈署');
}
});
}
這個程式碼片段展示瞭如何使用Node.js的fs模組複製Calculator.html檔案到指定的目錄。
網頁電腦應用程式的端對端測試
要測試網頁電腦應用程式的功能，我們需要使用自動化工具來模擬使用者的互動。這種測試方法稱為端對端（E-E）測試，涉及測試整個應用程式的商業邏輯流程，從使用者的角度出發，檢查應用程式是否正確地反應使用者的操作。
什麼是UI自動化測試？
UI自動化測試是一種自動化工具模擬使用者與應用程式互動的測試方式。這類別工具可以自動執行使用者操作，如點選、輸入文字、選擇下拉選單等。市面上有許多UI自動化工具可供選擇，包括商業工具如UFT、TestComplete、Ranorex等，也有開源工具如Selenium、Protractor、WebDriver IO等。在本章中，我們將使用Selenium進行UI自動化測試。
UI自動化工具的工作原理
這些工具提供了一套函式庫，允許我們模擬使用者互動，如點選、輸入文字等。為了讓工具能夠與應用程式的UI元素互動，它需要兩個重要的指令：
- 識別UI元素：在工具能夠對UI控制/元素執行操作之前，它需要識別出該UI元素從頁面/螢幕上的其他元素中。這可以透過設定UI控制的唯一屬性，如ID、名稱、類別等來完成。
- 執行操作：一旦工具識別出了UI元素，它就可以執行指定的操作，如點選、輸入文字等。
Selenium是一個流行的開源UI自動化工具，提供了一系列API，讓我們可以輕鬆地識別和操作UI元素。透過使用Selenium，我們可以自動化網頁電腦應用程式的測試，確保它能夠正確地反應使用者的操作。
內容解密：
以下是使用Selenium進行UI自動化測試的基本步驟：
// 匯入Selenium函式庫
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
// 設定ChromeDriver
System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");
// 建立WebDriver例項
WebDriver driver = new ChromeDriver();
// 開啟網頁電腦應用程式
driver.get("http://localhost:8082/calculator");
// 識別UI元素（例如：輸入欄）
WebElement inputField = driver.findElement(By.id("inputField"));
// 執行操作（例如：輸入文字）
inputField.sendKeys("10");
// 關閉WebDriver
driver.quit();
在這個範例中，我們使用Selenium的Java API來識別和操作網頁電腦應用程式的UI元素。
圖表翻譯：
以下是Selenium UI自動化測試流程的Mermaid圖表：
flowchart TD
A[啟動Selenium] --> B[識別UI元素]
B --> C[執行操作]
C --> D[驗證結果]
D --> E[關閉WebDriver]
這個圖表展示了Selenium UI自動化測試的基本流程，從啟動Selenium到關閉WebDriver。
Selenium WebDriver：UI 自動化工具
Selenium WebDriver 是一種 UI 自動化工具，提供了多種程式語言的函式庫，包括 Java、C#、JavaScript、Python 等。它允許開發人員使用這些函式庫來識別和與 UI 元素進行互動。
Selenium 測試的實作
在 Python 中，Selenium WebDriver 的函式庫可以用來開發 UI 測試。例如，為 CalculatorWebApplication 開發的 UI 測試就使用了 Selenium WebDriver 的 Python 函式庫。
測試專案
測試專案 TestCalculatorWebApplicationUsingSeleniumPython 是一個 Python 專案，位於 D:\JenkinsBookExamples 目錄中。這個專案包含了幾個重要的檔案，包括：
EnvVars.csv：包含環境變數設定，如路徑、應用程式 URL 等。CalculatorPage.csv：包含 UI 元素的識別資料，位於ObjectRepositories目錄中。AutomationFramework套件：包含自動化框架程式碼，包括函式來讀取環境變數和識別資料，並與瀏覽器和 UI 元素進行互動。
InitializeEnvVars 函式
Utils.py 檔案中的 InitializeEnvVars 函式（見清單 15-2）負責讀取 EnvVars.csv 檔案。使用者需要根據自己的專案路徑修改這個函式中的路徑。
@classmethod
def InitialiseEnvVars(cls):
# 開啟 csv 檔案以讀取模式
with open('D:\\JenkinsBookExamples\\TestCalculatorWebApplicationUsingSeleniumPython\\EnvVars.csv') as file:
# 讀取 csv 檔案內容
env_vars = csv.reader(file)
#...
圖表翻譯
flowchart TD
A[開始] --> B[讀取 EnvVars.csv]
B --> C[初始化環境變數]
C --> D[讀取 CalculatorPage.csv]
D --> E[識別 UI 元素]
E --> F[與瀏覽器和 UI 元素互動]
圖表翻譯：
此圖表描述了 Selenium WebDriver 測試的流程。首先，讀取 EnvVars.csv 檔案以初始化環境變數。接下來，讀取 CalculatorPage.csv 檔案以識別 UI 元素。最後，使用 Selenium WebDriver 的函式庫與瀏覽器和 UI 元素進行互動。
玄貓總結：網頁應用程式持續整合與佈署
持續整合與持續佈署（CI/CD）已成為現代軟體開發不可或缺的環節。本章節以一個簡單的網頁電腦應用程式為例，示範瞭如何利用Jenkins Pipeline實作從程式碼簽出、佈署到IIS伺服器，再到使用Selenium進行UI自動化測試的完整流程。
透過多維比較分析，我們可以發現，相比傳統手動佈署方式，Jenkins Pipeline 的自動化流程顯著提升了效率，減少了人為錯誤的風險。此外，整合價值分析顯示，將 Selenium 整合至 CI/CD 流程中，可以實作自動化的端對端測試，有效保障了應用程式的品質。然而，技術限制深析也指出，Selenium 測試的穩定性受瀏覽器版本、網路環境等因素影響，需要額外關注測試環境的維護與管理。同時，在實務落地分析中，設定環境變數、元素定位等環節也需要仔細組態，才能確保 Pipeline 的順利執行。
展望技術演進預測，隨著雲原生技術的發展，容器化佈署和 Kubernetes 協調將成為主流趨勢，Jenkins Pipeline 也需要適應新的佈署環境。同時，AI 驅動的測試工具也將逐步成熟，有望進一步提升測試效率和準確性。
玄貓認為，對於追求快速迭代和高品質交付的團隊而言，掌握 Jenkins Pipeline 和 Selenium 等 CI/CD 工具至關重要。技術團隊應著重於解決測試穩定性和環境組態等挑戰，才能最大限度地發揮 CI/CD 的效能優勢，並為未來技術演進做好準備。
