上一篇我們掌握了建立 Page Object Models 的設計模式，提高了測試程式的可讀性與可維護性，接著來談談如何將測試案例加入 Github CI/CD 流程之中。

如果想在 Github 上加入 CI/CD 流程，作法非常簡單，還記得一開始安裝 Playwright 時的選項 - 「Add a GitHub Actions workflow?」嗎？如果選擇 true，Playwright 會幫忙建立好資料夾與檔案：

在安裝 Playwright 時，可能會因為團隊的協作模式是將所有測試集中放在專屬的測試專案底下，所以並沒有在一開始就加入。這種情況下，其實也不用擔心，我們可以自行選擇以下方式新增 CI/CD 設定：

• 將新的 .yml 檔放在正確的位置，建立專屬流程
• 直接在既有的 CI/CD 設定檔中，加入執行 Playwright 測試的 job

最小可行 CI/CD 配置

1. 首先在 Github 上準備好專案
2. 在適當位置建立 .yml 檔案(或準備好既有的 CI/CD 設定檔)
3. 將 Playwright Setting up GitHub Actions 中的設定加入 .yml 檔案裡
4. 推送上 Github
5. 接著點擊 Actions 頁面，可以看到已經開始運作：
   
6. 等待 workflow 跑完，顯示綠色勾勾就代表我們的 Actions workflow 成功完成啦！
   
7. 點入查看，可下載測試產出(報告)
   

是不是相當的簡單呢？來看看 .yml 幫我們做了什麼事吧！

.yml 設定檔內容

• workflow 名稱，會顯示在 GitHub Actions 介面上

  name: Playwright Tests
  

• on 定義觸發條件：對 main 與 master 分支 push 或發出 PR 時觸發

  on:        
    push:
      branches: [ main, master ]
    pull_request:
      branches: [ main, master ]
  

• jobs 定義接下來要執行的工作

  jobs:    
    test:    # 第一個 job 名稱為 test
      timeout-minutes: 60    # 設定整個 job timeout，避免卡死
      runs-on: ubuntu-latest     # 指定執行環境為最新的 ubuntu
      steps:    # 定義逐步執行指令
      - uses: actions/checkout@v4    # 取出專案原始碼到 runner 環境
      - uses: actions/setup-node@v4    # 安裝 Node.js 環境
        with:
          node-version: lts/*    #使用最新的 LTS (長期支援版本) Node.js
      - name: Install dependencies
        run: npm ci    # 使用 npm ci 安裝，確保鎖定版本一致
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps    # 安裝所需依賴(包含瀏覽器)   
      - name: Run Playwright tests
        run: npx playwright test    # 執行 Playwright 測試案例
      - uses: actions/upload-artifact@v4    # 上傳測試產出 (例如報告)
        if: ${{ !cancelled() }}    # 若流程沒有被手動取消才執行
        with:
          name: playwright-report    # 上傳的檔案命名為 playwright-report
          path: playwright-report/    # 指定要上傳的檔案路徑
          retention-days: 30    # 測試產出保留 30 天
  

以上設定都可以依照需求自行變更或添加。

添加 deploy job (產出測試報告靜態頁面)

雖然我們能夠從 workflow 下載測試產出，但為了方便在 Github Pages 查看測試報告，我們可以在 jobs 裡加上 deploy job。

1. 先在 .yml 內加入以下內容：

     deploy:                           # job 名稱為 deploy
       needs: test                     # 依賴前一個 job (test)，必須測試完成後才執行
       runs-on: ubuntu-latest          # 執行環境：最新 Ubuntu runner
       if: github.ref == 'refs/heads/main' && always()  
                                       # 條件判斷：只有在 main 分支才會部署
                                       # `always()` 確保即使測試失敗，也會執行 (方便檢視失敗的報告)
       permissions:                    
         pages: write                  # 允許寫入 GitHub Pages
         id-token: write               # 允許 OIDC 驗證，用於 Pages 部署
       environment:
         name: github-pages            # 指定環境名稱 (GitHub Pages)
         url: ${{ steps.deployment.outputs.page_url }}  
                                       # 部署完成後的 URL，取自 deployment 步驟輸出
   
       steps:                          # 部署流程的各個步驟
       - name: Download test report
         uses: actions/download-artifact@v4   # 從先前 job (test) 下載測試報告
         with:
           name: playwright-report            # 要下載的 artifact 名稱
           path: playwright-report/           # 下載後存放的資料夾路徑
   
       - name: Setup Pages
         uses: actions/configure-pages@v4     # 設定 GitHub Pages 的環境
   
       - name: Upload to GitHub Pages
         uses: actions/upload-pages-artifact@v3   # 將內容上傳為 pages artifact
         with:
           path: playwright-report/               # 指定要上傳的路徑 (測試報告資料夾)
   
       - name: Deploy to GitHub Pages
         id: deployment                          # 此步驟命名為 deployment (方便引用輸出)
         uses: actions/deploy-pages@v4           # 執行 GitHub Pages 部署，發佈上傳的 artifact
   

2. 添加好內容後，在 push 之前，記得先將 Github Pages Source 選為 Github Actions：
   
   如果沒有開啟設定，會在 deploy 階段失敗：
   

3. push 到 Github，點擊進入 workflow 查看，可以看到頁面顯示我們建立的 2 個 job：
   

4. 等待 workflow 結束，可以看見 deploy 階段下方有一列網址，點擊網址就能開啟測試報告靜態頁面
   

完整程式碼：https://github.com/erinn712/playwright-cicd

到這裡，我們已經順利在 GitHub 上完成 CI/CD 的設定與流程。不過在不同團隊或企業中，版本控制平台未必都是 GitHub，很多情境下會使用 GitLab 作為主要的開發與協作工具。由於 GitLab 在 CI/CD 上有自己獨立的設定方式與特色，因此接下來，我們就把視角轉向 GitLab，看看如何在其中建立並執行相對應的流程吧！