Playwright 微服務自動化測試與 CI/CD 整合

– 15 分鐘閱讀

Playwright 作為一款強大的跨瀏覽器自動化測試工具，能有效提升微服務測試效率。本文將示範如何使用 Playwright 撰寫測試指令碼，驗證網頁元素與功能，並透過 CLI 命令執行測試和檢視結果。同時，我們也將探討 Playwright 在不同測試層級（單元、整合、端對端）的應用，以及如何結合 Jest 進行更全面的測試覆寫。最後，文章將說明如何將 Playwright 整合到 CI/CD 管線中，實作自動化測試流程，提升軟體交付速度和品質。

測試指令碼

首先，我們需要撰寫測試指令碼。以下是測試 Flixtube 網頁的範例：

// 存取 Flixtube 網頁
await page.goto('/');

// 取得 video 元素
const videos = page.locator('div.video');

// 驗證兩個影片是否顯示在 UI 中
await expect(videos).toHaveCount(2);

// 驗證第一個影片的名稱和連結
const firstVideo = videos.nth(0).locator('a');
await expect(firstVideo).toHaveText('SampleVideo_1280x720_1mb.mp4');
await expect(firstVideo).toHaveAttribute('href', '/video?id=5ea234a1c34230004592eb32');

// 驗證第二個影片的名稱和連結
const secondVideo = videos.nth(1).locator('a');
await expect(secondVideo).toHaveText('Another video.mp4');
await expect(secondVideo).toHaveAttribute('href', '/video?id=5ea234a5c34230004592eb33');

執行測試

要執行測試，我們可以使用以下命令：

npx playwright test

Playwright 會顯示測試進度和結果。如果測試失敗，Playwright 會開啟一個網頁顯示測試結果。

測試結果

如果您想在終端機中檢視所有測試結果（無論是否透過），可以使用以下命令：

npx playwright test --list

這會顯示所有測試結果，包括透過和失敗的測試。

章節9：微服務的自動化測試

在本章中，我們將探討如何使用Playwright進行微服務的自動化測試。Playwright是一個強大的工具，允許我們在多個瀏覽器中執行測試，包括Chrome、Firefox和Safari。

9.8 章節：使用Playwright進行自動化測試

要使用Playwright進行自動化測試，我們需要先安裝Playwright並組態它。然後，我們可以使用npx playwright test --reporter=list命令來執行測試。

9.8.1 執行測試

當我們執行測試時，Playwright會啟動一個真實的瀏覽器（即使它是無頭模式），並執行測試。這個過程可能需要一些時間，因為Playwright需要啟動瀏覽器並載入測試頁面。

9.8.2 組態Playwright

要組態Playwright，我們需要在package.json檔案中增加一個指令碼。例如：

{
  "name": "example-4",
  "version": "1.0.0",
  "scripts": {
    "test": "playwright test --reporter=list --workers 1"
  },
  "dependencies": {},
  "devDependencies": {
    //...
  }
}

這個指令碼會啟動Playwright並執行測試。

9.8.3 測試結果

當測試完成後，Playwright會顯示測試結果。結果會顯示測試是否透過或失敗，以及錯誤訊息。

9.8.4 使用Playwright進行單元測試

Playwright也可以用於單元測試。這個方法允許我們在前端程式碼中進行單元測試，而不需要啟動整個應用程式。

9.8.5 使用Playwright進行除錯

Playwright提供了一個強大的除錯工具，允許我們在瀏覽器中除錯測試。這個工具可以幫助我們快速地找出錯誤並修復它們。

圖表翻譯：

以下是使用Mermaid語法建立的一個簡單流程圖，展示瞭如何使用Playwright進行自動化測試：

  flowchart TD
    A[開始] --> B[安裝Playwright]
    B --> C[組態Playwright]
    C --> D[執行測試]
    D --> E[顯示測試結果]
    E --> F[除錯]

這個流程圖展示瞭如何使用Playwright進行自動化測試，從安裝和組態到執行測試和除錯。

自動化測試在 CI/CD 管線中的應用

自動化測試是軟體開發中的一個重要環節，它可以幫助我們確保程式碼的品質和穩定性。現在，我們來看看如何將自動化測試整合到 CI/CD 管線中。

自動化測試的目的

自動化測試的目的是在程式碼提交到程式碼倉函式庫後自動執行測試套件，以檢查程式碼的健康狀態。這樣可以確保程式碼在佈署到生產環境之前已經透過了充分的測試。

CI/CD 管線中的自動化測試

在 CI/CD 管線中，自動化測試可以作為一個檢查點，位於生產佈署之前。如果測試透過，程式碼就會被佈署到生產環境；如果測試失敗，程式碼就不會被佈署。這樣可以確保只有透過測試的程式碼才會被佈署到生產環境。

自動化測試流程

以下是自動化測試在 CI/CD 管線中的流程：

  1. 開發人員提交程式碼和更新的測試。
  2. 程式碼被推播到程式碼倉函式庫。
  3. CI/CD 管線被觸發，自動執行測試套件。
  4. 測試套件執行於管線中，位於佈署之前。
  5. 如果測試透過，程式碼被佈署到生產環境。
  6. 如果測試失敗，管線被終止，開發人員被通知。

工具和技術

在這個流程中，我們可以使用各種工具和技術來實作自動化測試。例如，我們可以使用 Jest 和 Playwright 來執行單元測試和整合測試。同時，我們也可以使用 Kubernetes 和 GitHub Actions 來管理和觸發 CI/CD 管線。

內容解密：

上述流程圖展示了自動化測試在 CI/CD 管線中的流程。開發人員提交程式碼和更新的測試後，程式碼被推播到程式碼倉函式庫，觸發 CI/CD 管線。管線自動執行測試套件，如果測試透過，程式碼被佈署到生產環境；如果測試失敗，管線被終止，開發人員被通知。

圖表翻譯：

上述流程圖使用 Mermaid 語法繪製，展示了自動化測試在 CI/CD 管線中的流程。圖表中，每個步驟都被清楚地標示出來，展示了從開發人員提交程式碼到程式碼被佈署到生產環境的整個流程。這個圖表有助於我們更好地理解自動化測試在 CI/CD 管線中的作用和重要性。

自動化測試的重要性

自動化測試是確保微服務架構中各個服務正確運作的關鍵步驟。透過自動化測試，我們可以在不斷增加的微服務數量中保持對系統的信心。這章節中，我們探討瞭如何使用 Jest 和 Playwright 進行自動化測試，並將其整合到 CI/CD Pipeline中。

測試金字塔

測試金字塔是一個概念，描述了單元測試、整合測試和端對端測試之間的關係。一般來說，我們應該有更多的單元測試，然後是整合測試，最後是端對端測試。這種層次結構幫助我們確保系統的穩定性和可靠性。

單元測試

單元測試旨在隔離地測試一小段程式碼，例如一個函式或一個類別。這種隔離使得我們可以專注於特定的程式碼段，並確保它的正確性。JavaScript 的動態性使得模擬（mocking）變得容易，這對於單元測試非常有幫助。

整合測試

整合測試則是對更大段程式碼進行測試，例如整個微服務。這種測試幫助我們確保不同元件之間的互動作用是正確的。

端對端測試

端對端測試是對整個應用程式或其子集進行測試。這種測試模擬了真實使用者的行為，幫助我們確保系統從使用者的角度來看是功能性的。

Jest 和 Playwright

Jest 是一個流行的 JavaScript 測試框架，適合用於單元測試和整合測試。Playwright 則是一個用於端對端測試的框架，允許我們模擬使用者互動並驗證應用程式的行為。

CI/CD Pipeline整合

將自動化測試整合到 CI/CD Pipeline中，是確保系統品質的關鍵步驟。透過在每次程式碼提交時執行測試，我們可以及早發現問題並糾正它們。

內容解密：

以上內容簡要概述了自動化測試在微服務架構中的重要性，並介紹了 Jest 和 Playwright 等工具的使用。瞭解這些概念和工具，有助於您建立一個強大的測試基礎，從而提高系統的品質和可靠性。

圖表翻譯：

  graph LR
    A[單元測試] --> B[整合測試]
    B --> C[端對端測試]
    C --> D[CI/CD Pipeline]
    D --> E[自動化測試]

此圖表展示了從單元測試到端對端測試，再到 CI/CD Pipeline整合的過程，強調了自動化測試在微服務架構中的重要性。

10.1 重溫工具

恭喜！您已經學習了所有主要工具，以便開始構建根據微服務的應用程式。您可以在表 10.1 中看到我們在本章中將要重溫的工具列表。

工具版本目的
Node.js18.17.1我們使用 Node.js 執行個別的微服務（在本章中，我們使用「metadata」微服務作為示例）。
Docker24.0.5我們使用 Docker 封裝和釋出 FlixTube 的微服務。
Docker Compose包含在 Docker 中我們使用 Docker Compose 定義和執行多個 Docker 容器。

10.2 取得程式碼

要跟隨本章的內容，您需要下載程式碼或克隆倉函式庫： *您可以使用 Git 克隆程式碼，如下所示：

git clone https://github.com/ example/chapter-10.git

如需安裝和使用 Git 的幫助，請參閱第 2 章。如果您遇到程式碼問題，請在 GitHub 中的倉函式庫中記錄問題。

10.3 FlixTube 應用程式概覽

FlixTube 是一個根據微服務的應用程式，包括多個微服務。以下是 FlixTube 的主要微服務：

  • Metadata 微服務：負責管理應用程式的資料。
  • Video 微服務：負責管理影片內容。
  • User 微服務：負責管理使用者資料。

10.4 建立和執行 FlixTube

要建立和執行 FlixTube，您需要按照以下步驟：

  1. 克隆 FlixTube 倉函式庫。
  2. 安裝所需的依賴項。
  3. 使用 Docker Compose 建立和執行微服務。
docker-compose up -d

10.5 測試 FlixTube

要測試 FlixTube，您需要執行自動化測試。您可以使用 Jest 執行測試。

npm test

10.6 佈署 FlixTube

要佈署 FlixTube，您需要建立一個持續佈署（CD）管道。您可以使用 GitHub Actions 建立一個 CD 管道。

name: Deploy FlixTube
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Build and push image
        run: |
          docker build -t myflixtube.
          docker tag myflixtube:latest ${{ secrets.DOCKER_USERNAME }}/myflixtube:latest
          docker push ${{ secrets.DOCKER_USERNAME }}/myflixtube:latest
      - name: Deploy to Kubernetes
        uses: kubernetes/deploy-action@v1
        with:
          kubeconfig: ${{ secrets.KUBECONFIG }}
          deployment: myflixtube

這個 CD 管道會在程式碼推播到 main 分支時自動建立和佈署 FlixTube 的 Docker 映像。

使用Docker和Kubernetes佈署微服務

在開發和測試微服務時，我們使用Docker Compose來執行FlixTube。同時，我們也使用Kubernetes來佈署FlixTube到本地和生產環境。

Docker Compose

Docker Compose是一種工具，允許我們定義和執行多個容器的應用程式。在FlixTube的例子中，我們使用Docker Compose來執行多個微服務，包括元資料微服務、前端等。

Kubernetes

Kubernetes是一種容器協調系統，允許我們自動化佈署、擴充套件和管理容器化應用程式。在FlixTube的例子中，我們使用Kubernetes來佈署微服務到本地和生產環境。

Kubectl

Kubectl是一種命令列工具，允許我們與Kubernetes叢集互動。在FlixTube的例子中，我們使用Kubectl來佈署微服務到Kubernetes叢集。

GitHub Actions

GitHub Actions是一種連續整合和連續佈署（CI/CD）工具，允許我們自動化測試和佈署應用程式。在FlixTube的例子中，我們使用GitHub Actions來建立CI/CD管道。

Jest和Playwright

Jest和Playwright是兩種測試工具，允許我們測試個別微服務和整個應用程式。在FlixTube的例子中，我們使用Jest來測試元資料微服務，使用Playwright來測試前端。

內容解密：

// 使用Docker Compose執行FlixTube
docker-compose up

// 使用Kubectl佈署FlixTube到Kubernetes叢集
kubectl apply -f deployment.yaml

// 使用GitHub Actions建立CI/CD管道
github-actions create -f.github/workflows/ci-cd.yaml

// 使用Jest測試元資料微服務
jest tests/metadata.test.js

// 使用Playwright測試前端
playwright tests/frontend.test.js

圖表翻譯：

  graph LR
    A[開發電腦] -->|Docker Compose|> B[多個微服務]
    B -->|Kubernetes|> C[本地和生產環境]
    C -->|Kubectl|> D[佈署微服務]
    D -->|GitHub Actions|> E[CI/CD管道]
    E -->|Jest和Playwright|> F[測試個別微服務和整個應用程式]

在這個例子中，我們使用Docker Compose執行多個微服務，使用Kubernetes佈署微服務到本地和生產環境，使用Kubectl與Kubernetes叢集互動，使用GitHub Actions建立CI/CD管道，使用Jest和Playwright測試個別微服務和整個應用程式。

微服務開發與佈署

在現代軟體開發中，微服務架構已成為了一種主流的設計模式。這種架構將應用程式分解為多個小型、獨立的服務，每個服務負責特定的業務邏輯。這樣的設計使得系統更加靈活、可擴充套件和易於維護。

開發與測試

在開發微服務時，我們可以使用 Node.js 作為開發環境。Node.js 提供了豐富的函式庫和框架，使得開發和測試微服務變得更加容易。例如，我們可以使用 Express.js 框架來建立 Web 伺服器，使用 Mocha 和 Chai 進行單元測試和整合測試。

版本控制與持續佈署

版本控制是軟體開發中的一個重要環節。Git 是目前最常用的版本控制系統，它允許我們追蹤程式碼變化、合作開發和管理不同版本的程式碼。透過 Git，我們可以將程式碼儲存到遠端倉函式庫中，例如 GitHub 或 GitLab。

持續佈署（Continuous Deployment）是指自動將程式碼從版本控制系統佈署到生產環境的過程。這樣可以確保程式碼的變化可以快速地反映到生產環境中，提高了軟體的交付速度和品質。

使用 Docker 和 Kubernetes

Docker 是一個容器化平臺，它允許我們將應用程式和其依賴項封裝到一個容器中，然後在任何支援 Docker 的環境中執行。這樣可以確保應用程式在不同環境中的一致性和可靠性。

Kubernetes 是一個容器協調系統，它可以自動化地佈署、擴充套件和管理容器化應用程式。透過 Kubernetes，我們可以輕鬆地管理多個微服務，確保它們之間的通訊和協調。

微服務佈署

在微服務架構中，每個服務都是獨立的，可以使用不同的語言和框架開發。透過 Docker 和 Kubernetes，我們可以輕鬆地佈署和管理多個微服務。

例如，我們可以使用 Docker 建立一個微服務的容器，然後使用 Kubernetes 將其佈署到叢集中。Kubernetes 會自動化地管理容器的生命週期，包括啟動、停止和擴充套件。

  graph LR
    A[微服務] -->|封裝|> B[Docker 容器]
    B -->|佈署|> C[Kubernetes 叢集]
    C -->|管理|> D[容器生命週期]

內容解密：

上述流程圖展示了微服務從開發到佈署的過程。首先，我們將微服務封裝到 Docker 容器中，然後將容器佈署到 Kubernetes 叢集中。Kubernetes 會自動化地管理容器的生命週期，包括啟動、停止和擴充套件。

圖表翻譯：

此圖表展示了微服務佈署的過程。左邊的「微服務」代表了我們要佈署的應用程式。中間的「Docker 容器」代表了封裝好的微服務，右邊的「Kubernetes 叢集」代表了容器的佈署環境。箭頭代表了封裝、佈署和管理的過程。

10.4 FlixTube 概覽

在本章中，我們將探討 FlixTube 的架構和實作細節。FlixTube 是一個完整的專案，包含多個微服務，以下是它的概覽。

10.4.1 FlixTube 微服務

FlixTube 由多個微服務組成，每個微服務都有其特定的功能。以下是其中一些微服務：

  • 影片串流（Video-streaming）：負責將影片從儲存裝置串流給使用者，讓他們可以觀看影片。
  • Azure 儲存（Azure-storage）：負責管理和儲存影片檔案。
  • 歷史記錄（History）：負責記錄使用者觀看影片的歷史。
  • 元資料（Metadata）：負責管理和儲存影片的元資料，例如標題、描述等。

此外，還有一些新的微服務，例如：

  • 閘道（Gateway）：作為應用程式的入口，提供 REST API 並服務前端。
  • 影片上傳（Video-upload）：負責上傳影片檔案到儲存裝置。

以下是每個微服務的目的：

微服務目的
閘道作為應用程式的入口，提供 REST API 並服務前端。
影片串流將影片從儲存裝置串流給使用者。
Azure 儲存管理和儲存影片檔案。
歷史記錄記錄使用者觀看影片的歷史。
元資料管理和儲存影片的元資料。
影片上傳上傳影片檔案到儲存裝置。

內容解密：

以上內容介紹了 FlixTube 的架構和實作細節，包括各個微服務的功能和目的。這些微服務一起工作，提供了一個完整的影片串流平臺。

圖表翻譯：

  graph LR
    A[閘道] --> B[影片串流]
    A --> C[Azure 儲存]
    A --> D[歷史記錄]
    A --> E[元資料]
    A --> F[影片上傳]
    B --> C
    C --> D
    D --> E
    E --> F

此圖表展示了 FlixTube 中各個微服務之間的關係和資料流向。閘道作為入口，提供 REST API 並服務前端，同時也與其他微服務進行互動，以實作影片串流、儲存、歷史記錄和元資料管理等功能。

微服務架構下的FlixTube應用程式

FlixTube是一個根據微服務架構的應用程式，負責管理使用者上傳的影片。該應用程式使用Azure雲端儲存來儲存影片檔案，並具有多個微服務來處理不同的任務。

微服務結構

每個微服務都是一個獨立的Node.js專案，具有自己的目錄結構。以metadata微服務為例，其目錄結構如下：

  • 根目錄：包含專案的基本訊息，例如package.json和package-lock.json檔案
  • src目錄：包含專案的源程式碼，包括index.js和index.test.js檔案
  • node_modules目錄：包含專案依賴的第三方函式庫

FlixTube單體倉函式庫

FlixTube的所有微服務都儲存在一個單體倉函式庫中，稱為FlixTube單體倉函式庫。該倉函式庫包含所有微服務的程式碼， 每個微服務都有自己的子目錄。

FlixTube單體倉函式庫的結構如下：

  • 根目錄：包含FlixTube應用程式的基本訊息
  • metadata目錄：包含metadata微服務的程式碼
  • video-upload目錄：包含video-upload微服務的程式碼
  • azure-storage目錄：包含azure-storage微服務的程式碼
  • mock-storage目錄：包含mock-storage微服務的程式碼

微服務列表

FlixTube應用程式包含以下微服務：

  • History：記錄使用者的觀看歷史
  • Metadata：記錄每個影片的詳細訊息和元資料
  • Video-upload：協調影片上傳到儲存中
  • Azure-storage：使用外部雲端儲存來儲存和檢索影片
  • Mock-storage：一個替代儲存微服務，將影片儲存在本地檔案系統中
  flowchart TD
    A[使用者] --> B[影片上傳]
    B --> C[Metadata微服務]
    C --> D[Azure-storage微服務]
    D --> E[影片儲存]
    E --> F[影片檢索]
    F --> G[使用者]

內容解密：

上述流程圖描述了FlixTube應用程式的基本工作流程。使用者上傳影片到video-upload微服務，然後metadata微服務記錄影片的詳細訊息和元資料。接著，azure-storage微服務將影片儲存到外部雲端儲存中。當使用者需要檢視影片時，azure-storage微服務會檢索影片並傳回給使用者。

圖表翻譯：

上述流程圖使用Mermaid語法繪製，描述了FlixTube應用程式的基本工作流程。圖表中包含五個節點，分別代表使用者、影片上傳、metadata微服務、azure-storage微服務和影片儲存。圖表中還包含五個箭頭，描述了節點之間的工作流程。

從技術架構視角來看，本章節深入淺出地介紹瞭如何使用 Playwright 進行微服務的自動化測試，涵蓋了從測試指令碼撰寫、執行到結果分析的完整流程。Playwright 作為一款跨瀏覽器自動化測試工具，其便捷的 API 和強大的功能有效降低了測試門檻，提升了測試效率。分析段落中，我們看到了 Playwright 如何模擬使用者行為，驗證 UI 元素和功能，以及如何整合至 CI/CD 管線中，實作自動化測試流程。然而，Playwright 的跨平臺相容性仍有待進一步提升，尤其在移動端測試方面仍需更多實踐驗證。展望未來，隨著 Web 技術的快速發展，預計 Playwright 將持續演進，提供更豐富的測試功能和更廣泛的平臺支援。玄貓認為，Playwright 是一款值得關注且具有廣闊應用前景的自動化測試工具，尤其適合重視跨瀏覽器相容性和 UI 測試的專案。

玄貓

玄貓

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