跳到主要內容

持續整合

簡介​

Playwright 測試可以在 CI 環境中執行。我們為常見的 CI 供應商建立範例設定。

讓您的測試在 CI 上運行的 3 個步驟

  1. 確保 CI 代理程式可以運行瀏覽器：在 Linux 代理程式中使用我們的 Docker 映像檔，或使用CLI安裝您的依賴項。

  2. 安裝 Playwright:

    # Install NPM packages
    npm ci

    # Install Playwright browsers and dependencies
    npx playwright install --with-deps

  3. 執行您的測試:

    npx playwright test

工作人員​

我們建議在 CI 環境中將工作人員設定為「1」，以優先考慮穩定性和可重現性。依序執行測試可確保每個測試都獲得完整的系統資源，避免潛在的衝突。但是，如果您有功能強大的自架 CI 系統，您可以啟用平行測試。為了更廣泛的平行化，請考慮分片 - 將測試分散到多個 CI 作業中。

playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // Opt out of parallel tests on CI.
  workers: process.env.CI ? 1 : undefined,
});

CI 設定​

命令行工具可用於在 CI 中安裝所有作業系統依賴項。

GitHub Actions​

在 push/pull_request 時​

測試將在 main/master 分支上的 push 或 pull request 時執行。工作流程將安裝所有依賴項、安裝 Playwright，然後執行測試。它還將建立 HTML 報告。

.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

在 push/pull_request 時 (分片)​

GitHub Actions 支援在多個作業之間分片測試。查看我們的分片文件以了解有關分片的更多資訊，並查看GitHub Actions 範例，了解如何設定作業以在多部機器上執行測試，以及如何合併 HTML 報告。

透過容器​

GitHub Actions 支援透過使用jobs.<job_id>.container選項在容器中運行作業。這對於不使用依賴項污染主機環境，以及為跨不同作業系統的螢幕截圖/視覺迴歸測試提供一致的環境非常有用。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  playwright:
    name: 'Playwright Tests'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.50.0-noble
      options: --user 1001
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test

在部署時​

這將在 GitHub Deployment 進入成功狀態後啟動測試。Vercel 等服務使用此模式，因此您可以在其部署的環境上運行端對端測試。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  deployment_status:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

快速失敗​

大型測試套件可能需要很長時間才能執行。透過使用 --only-changed 標誌執行初步測試運行，您可以先運行可能失敗的測試檔案。這將在處理 Pull Requests 時為您提供更快的反饋迴圈，並稍微降低 CI 消耗。為了檢測受變更集影響的測試檔案，--only-changed 會分析套件的依賴關係圖。這是一種啟發式方法，可能會遺漏測試，因此在初步測試運行後，您務必始終運行完整的測試套件。

.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
      with:
        # Force a non-shallow checkout, so that we can reference $GITHUB_BASE_REF.
        # See https://github.com/actions/checkout for more details.
        fetch-depth: 0
    - 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 changed Playwright tests
      run: npx playwright test --only-changed=$GITHUB_BASE_REF
      if: github.event_name == 'pull_request'
    - 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

Docker​

我們有一個預先建置的 Docker 映像檔，可以直接使用，也可以作為參考來更新您現有的 Docker 定義。

建議設定

  1. 使用 Chromium 時，也建議使用 --ipc=host。如果沒有它，Chromium 可能會耗盡記憶體並崩潰。在Docker 文件中了解有關此選項的更多資訊。
  2. 啟動 Chromium 時看到其他奇怪的錯誤？在本地開發時，嘗試使用 docker run --cap-add=SYS_ADMIN 運行您的容器。
  3. 建議使用 --init Docker 標誌或 dumb-init，以避免對 PID=1 的進程進行特殊處理。這是殭屍進程的常見原因。

Azure Pipelines​

對於 Windows 或 macOS 代理程式，無需額外設定，只需安裝 Playwright 並執行您的測試即可。

對於 Linux 代理程式，您可以使用我們的 Docker 容器，Azure Pipelines 支援運行容器化作業。或者，您可以使用命令行工具安裝所有必要的依賴項。

為了運行 Playwright 測試，請使用此管道任務

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'
- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

使用 Azure Pipelines 上傳 playwright-report 資料夾​

如果任何 Playwright 測試失敗，這將使管道運行失敗。如果您還想將測試結果與 Azure DevOps 整合，請使用 PublishTestResults 任務，如下所示

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'
- task: PublishTestResults@2
  displayName: 'Publish test results'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: 'My End-To-End Tests'
  condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

注意：JUnit 報告器需要透過以下方式進行相應配置

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['junit', { outputFile: 'test-results/e2e-junit-results.xml' }]],
});

在 playwright.config.ts 中。

Azure Pipelines (分片)​

trigger:
- main

pool:
  vmImage: ubuntu-latest

strategy:
  matrix:
    chromium-1:
      project: chromium
      shard: 1/3
    chromium-2:
      project: chromium
      shard: 2/3
    chromium-3:
      project: chromium
      shard: 3/3
    firefox-1:
      project: firefox
      shard: 1/3
    firefox-2:
      project: firefox
      shard: 2/3
    firefox-3:
      project: firefox
      shard: 3/3
    webkit-1:
      project: webkit
      shard: 1/3
    webkit-2:
      project: webkit
      shard: 2/3
    webkit-3:
      project: webkit
      shard: 3/3
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test --project=$(project) --shard=$(shard)
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

Azure Pipelines (容器化)​

trigger:
- main

pool:
  vmImage: ubuntu-latest
container: mcr.microsoft.com/playwright:v1.50.0-noble

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

CircleCI​

在 CircleCI 上運行 Playwright 與在 GitHub Actions 上運行非常相似。為了指定預先建置的 Playwright Docker 映像檔，只需在您的設定中使用 docker: 修改代理程式定義，如下所示

executors:
  pw-noble-development:
    docker:
      - image: mcr.microsoft.com/playwright:v1.50.0-noble

注意：當使用 docker 代理程式定義時，您正在此處指定 Playwright 運行的資源類別為「medium」層級 here。Playwright 的預設行為是將工作人員數量設定為偵測到的核心計數（在 medium 層級的情況下為 2 個）。將工作人員數量覆寫為大於此數字將導致不必要的超時和失敗。

CircleCI 中的分片​

CircleCI 中的分片以 0 索引，這表示您需要覆寫預設的 parallelism ENV VARS。以下範例示範如何透過將 1 新增至 CIRCLE_NODE_INDEX 以傳遞到 --shard cli arg，以 4 的 CircleCI 平行度運行 Playwright。

  playwright-job-name:
    executor: pw-noble-development
    parallelism: 4
    steps:
      - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test -- --shard=${SHARD}/${CIRCLE_NODE_TOTAL}

Jenkins​

Jenkins 支援管道的 Docker 代理程式。使用 Playwright Docker 映像檔在 Jenkins 上運行測試。

pipeline {
   agent { docker { image 'mcr.microsoft.com/playwright:v1.50.0-noble' } }
   stages {
      stage('e2e-tests') {
         steps {
            sh 'npm ci'
            sh 'npx playwright test'
         }
      }
   }
}

Bitbucket Pipelines​

Bitbucket Pipelines 可以使用公共 Docker 映像檔作為建置環境。為了在 Bitbucket 上運行 Playwright 測試，請使用我們的公共 Docker 映像檔（請參閱 Dockerfile）。

image: mcr.microsoft.com/playwright:v1.50.0-noble

GitLab CI​

為了在 GitLab 上運行 Playwright 測試，請使用我們的公共 Docker 映像檔（請參閱 Dockerfile）。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.50.0-noble
  script:
  ...

分片​

GitLab CI 支援使用 parallel 關鍵字在多個作業之間分片測試。測試作業將被拆分為多個並行運行的小型作業。並行作業依序命名為 job_name 1/N 到 job_name N/N。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.50.0-noble
  parallel: 7
  script:
    - npm ci
    - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL

GitLab CI 也支援使用 parallel:matrix 選項在多個作業之間分片測試。測試作業將在單個管道中並行運行多次，但每個作業實例的變數值都不同。在下面的範例中，我們有 2 個 PROJECT 值和 10 個 SHARD 值，總共將運行 20 個作業。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.50.0-noble
  parallel:
    matrix:
      - PROJECT: ['chromium', 'webkit']
        SHARD: ['1/10', '2/10', '3/10', '4/10', '5/10', '6/10', '7/10', '8/10', '9/10', '10/10']
  script:
    - npm ci
    - npx playwright test --project=$PROJECT --shard=$SHARD

Google Cloud Build​

為了在 Google Cloud Build 上運行 Playwright 測試，請使用我們的公共 Docker 映像檔（請參閱 Dockerfile）。

steps:
- name: mcr.microsoft.com/playwright:v1.50.0-noble
  script: 
  ...
  env:
  - 'CI=true'

Drone​

為了在 Drone 上運行 Playwright 測試，請使用我們的公共 Docker 映像檔（請參閱 Dockerfile）。

kind: pipeline
name: default
type: docker

steps:
  - name: test
    image: mcr.microsoft.com/playwright:v1.50.0-noble
    commands:
      - npx playwright test

快取瀏覽器​

不建議快取瀏覽器二進制檔案，因為還原快取所需的時間與下載二進制檔案所需的時間相當。尤其是在 Linux 下，需要安裝作業系統依賴項，這些依賴項是不可快取的。

如果您仍然想在 CI 運行之間快取瀏覽器二進制檔案，請在 CI 設定中快取這些目錄，並針對 Playwright 版本的雜湊值進行快取。

偵錯瀏覽器啟動​

Playwright 支援 DEBUG 環境變數，以在執行期間輸出偵錯日誌。將其設定為 pw:browser 在偵錯「Error: Failed to launch browser」錯誤時很有幫助。

DEBUG=pw:browser npx playwright test

運行有頭模式​

預設情況下，Playwright 以無頭模式啟動瀏覽器。請參閱我們的「運行測試」指南，了解如何在有頭模式下運行測試。

在 Linux 代理程式上，有頭模式執行需要安裝 Xvfb。我們的 Docker 映像檔和 GitHub Action 已預先安裝 Xvfb。為了在有頭模式下使用 Xvfb 運行瀏覽器，請在實際命令之前新增 xvfb-run。

xvfb-run npx playwright test