設定 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」。

建立儲存庫並推送到 GitHub

一旦您設定好 GitHub actions 工作流程，您需要做的就是在 GitHub 上建立儲存庫或將您的程式碼推送到現有的儲存庫。請按照 GitHub 上的指示操作，並且不要忘記使用 git init 命令初始化 git 儲存庫，以便您可以新增、提交和推送您的程式碼。

開啟工作流程

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

opening the workflow

檢視測試日誌

點擊工作流程執行將向您顯示 GitHub 執行的所有操作，點擊 Run Playwright tests 將顯示錯誤訊息、預期內容和接收內容以及呼叫日誌。

Viewing Test Logs

HTML 報告

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

下載 HTML 報告

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

檢視 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 報告，只需最少的配置。

建立一個 Azure Storage 帳戶。
為儲存帳戶啟用靜態網站託管。

在 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>

使用上一步驟中的憑證，在您的 GitHub 儲存庫中設定加密的密鑰。前往您儲存庫的設定，在GitHub Actions 密鑰下，新增以下密鑰
- AZCOPY_SPA_APPLICATION_ID
- AZCOPY_SPA_CLIENT_SECRET
- AZCOPY_TENANT_ID
有關如何使用客戶端密鑰授權服務主體的詳細指南，請參閱此 Microsoft 文件。

新增一個步驟，將 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 儲存容器的內容。

注意

此步驟不適用於從 Fork 儲存庫建立的提取請求，因為此類工作流程無法訪問密鑰。

簡介​

您將學到​

設定 GitHub Actions​

建立儲存庫並推送到 GitHub​

開啟工作流程​

​

檢視測試日誌​

​

HTML 報告​

下載 HTML 報告​

檢視 HTML 報告​

檢視追蹤​

在網路上發布報告​

下一步​

簡介