Skip to main content

設定 CI

簡介​

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

您將學習​

設定 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 儲存庫，這樣您就可以新增、提交和推送您的程式碼。

Create a Repo and Push to GitHub

開啟工作流程​

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

​

opening the workflow

檢視測試日誌​

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

​

Viewing Test Logs

HTML 報告​

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

下載 HTML 報告​

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

Downloading the HTML Report

檢視 HTML 報告​

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

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

viewing the HTML report

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

檢視追蹤​

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

playwright trace viewer

在網頁上發佈報告​

將 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 工作流程中上傳報告和追蹤，請確保您只將它們上傳到可信任的產物儲存庫，或在上傳前加密檔案。與團隊成員分享產物時也是如此：使用可信任的檔案分享服務或在分享前加密檔案。

接下來是什麼​