設定 CI

簡介

Playwright 測試可以在任何 CI 提供者上執行。本指南涵蓋了在 GitHub 上使用 GitHub Actions 執行測試的一種方法。如果您想了解更多或如何設定其他 CI 提供者，請查看我們的詳細持續整合文件。

您將學習

• 如何設定 GitHub Actions
• 如何檢視測試日誌
• 如何檢視 HTML 報告
• 如何檢視追蹤
• 如何在網頁上發佈報告

設定 GitHub Actions

當使用 VS Code 擴充功能或透過 npm init playwright@latest 安裝 Playwright 時，您可以選擇新增 GitHub Actions 工作流程。這會在 .github/workflows 資料夾中建立一個 playwright.yml 檔案，包含您所需的所有內容，以便在每次推送和發出拉取請求到 main/master 分支時執行測試。該檔案的內容如下：

.github/workflows/playwright.yml

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

工作流程執行這些步驟：

1. 複製您的儲存庫
2. 安裝 Node.js
3. 安裝 NPM 相依套件
4. 安裝 Playwright 瀏覽器
5. 執行 Playwright 測試
6. 上傳 HTML 報告到 GitHub UI

若要了解更多相關資訊，請參閱「了解 GitHub Actions」。

建立一個 Repo 並推送到 GitHub

一旦設定好您的 GitHub Actions 工作流程，您只需要在 GitHub 上建立一個儲存庫或將您的程式碼推送到現有的儲存庫。遵循 GitHub 上的指示，別忘了使用 git init 指令初始化 git 儲存庫，這樣您就可以新增、提交和推送您的程式碼。

開啟工作流程

點擊 Actions 頁籤以查看工作流程。在這裡您將看到您的測試是否通過或失敗。

檢視測試日誌

點擊工作流程執行會顯示 GitHub 執行的所有動作，點擊 Run Playwright tests 會顯示錯誤訊息、預期內容和實際收到的內容以及呼叫日誌。

HTML 報告

HTML 報告顯示您測試的完整報告。您可以依瀏覽器、通過測試、失敗測試、跳過測試和不穩定測試篩選報告。

下載 HTML 報告

在 Artifacts 區段中，點擊 playwright-report 以 zip 檔案格式下載您的報告。

檢視 HTML 報告

在本地開啟報告並不會如預期般運作，因為您需要一個網頁伺服器才能讓所有功能正常運作。首先，解壓縮 zip 檔案，最好是在已經安裝 Playwright 的資料夾中。使用命令列，切換到報告所在的目錄，並使用 npx playwright show-report 指令加上解壓縮資料夾的名稱。這會啟動報告服務，讓您能在瀏覽器中檢視。

npx playwright show-report name-of-my-extracted-playwright-report

若要了解更多關於報告的資訊，請查看我們的詳細指南HTML 報告器

檢視追蹤

使用 npx playwright show-report 啟動報告服務後，點擊測試檔案名稱旁邊的追蹤圖示（如上圖所示）。然後您可以檢視測試的追蹤並檢查每個動作，以嘗試找出測試失敗的原因。

在網頁上發佈報告

將 HTML 報告下載為 zip 檔案並不是很方便。然而，我們可以利用 Azure Storage 的靜態網站託管功能，輕鬆且有效地在網際網路上提供 HTML 報告服務，只需要最少的組態設定。

1. 建立一個 Azure Storage 帳戶。

2. 為該儲存帳戶啟用靜態網站託管。

3. 在 Azure 中建立一個服務主體並授予其存取 Azure Blob 儲存的權限。成功執行後，該指令將顯示將在下一步中使用的憑證。

   az ad sp create-for-rbac --name "github-actions" --role "Storage Blob Data Contributor" --scopes /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP_NAME>/providers/Microsoft.Storage/storageAccounts/<STORAGE_ACCOUNT_NAME>

4. Use the credentials from the previous step to set up encrypted secrets in your GitHub repository. Go to your repository's settings, under GitHub Actions secrets, and add the following secrets:

   • AZCOPY_SPA_APPLICATION_ID
   • AZCOPY_SPA_CLIENT_SECRET
   • AZCOPY_TENANT_ID

   有關如何使用用戶端機密授權服務主體的詳細指南，請參閱此 Microsoft 文件。

5. 新增一個上傳 HTML 報告到 Azure Storage 的步驟。

   .github/workflows/playwright.yml

   ...
       - name: Upload HTML report to Azure
         shell: bash
         run: |
           REPORT_DIR='run-${{ github.run_id }}-${{ github.run_attempt }}'
           azcopy cp --recursive "./playwright-report/*" "https://<STORAGE_ACCOUNT_NAME>.blob.core.windows.net/\$web/$REPORT_DIR"
           echo "::notice title=HTML report url::https://<STORAGE_ACCOUNT_NAME>.z1.web.core.windows.net/$REPORT_DIR/index.html"
         env:
           AZCOPY_AUTO_LOGIN_TYPE: SPN
           AZCOPY_SPA_APPLICATION_ID: '${{ secrets.AZCOPY_SPA_APPLICATION_ID }}'
           AZCOPY_SPA_CLIENT_SECRET: '${{ secrets.AZCOPY_SPA_CLIENT_SECRET }}'
           AZCOPY_TENANT_ID: '${{ secrets.AZCOPY_TENANT_ID }}'

可以透過使用網站的公開 URL 從瀏覽器存取 $web 儲存容器的內容。

note

此步驟對於從分叉儲存庫建立的拉取請求將無法運作，因為此類工作流程無法存取機密。

正確處理機密

像追蹤檔案、HTML 報告甚至主控台日誌等產物包含關於您測試執行的資訊。它們可能包含敏感資料，例如測試使用者的用戶憑證、測試環境後端的存取權杖、測試原始碼，有時甚至是您的應用程式原始碼。請將這些檔案視為與那些敏感資料同等重要。如果您在 CI 工作流程中上傳報告和追蹤，請確保您只將它們上傳到可信任的產物儲存庫，或在上傳前加密檔案。與團隊成員分享產物時也是如此：使用可信任的檔案分享服務或在分享前加密檔案。

接下來是什麼

• 學習如何使用定位器
• 學習如何執行動作
• 學習如何撰寫斷言
• 了解更多關於追蹤檢視器
• 了解更多在 GitHub Actions 上執行測試的方法
• 了解更多在其他 CI 提供者上執行測試