Playwright基礎篇（六）：基本配置選項

2025年2月27日 testing

瀏覽器選擇與配置

在 Playwright 中，選擇瀏覽器是測試自動化的第一步。Playwright 支援三種主要瀏覽器引擎：

Chromium（Google Chrome/Microsoft Edge）、Firefox 和 WebKit（Safari）。

// playwright.config.js 基本配置
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  // 設定預設使用的瀏覽器
  use: {
    browserName: 'chromium', // 可選值: 'chromium', 'firefox', 'webkit'
    headless: false, // 設為 false 可看到瀏覽器運行過程
    channel: 'chrome', // 可選用已安裝的 chrome，不用預設的 chromium
  },
});

新手提示：初次使用時，建議從 Chromium 開始，它是最穩定且功能最完整的選項。

超時設置

超時設置對於避免測試卡住或執行太久非常重要，特別是當網頁載入緩慢時：

// 超時設置範例
module.exports = defineConfig({
  timeout: 30000, // 整個測試的超時時間（毫秒）
  use: {
    actionTimeout: 10000, // 單一操作的超時時間（如點擊、填寫表單）
    navigationTimeout: 15000, // 頁面導航的超時時間
  },
});

小型企業提示：根據您的網站實際加載速度和測試環境調整這些值。從較寬鬆的超時開始，然後逐步調整。

視窗大小設定

網頁在不同屏幕尺寸下表現不同，設定視窗大小確保測試在固定環境下運行：

module.exports = defineConfig({
  use: {
    viewport: { width: 1280, height: 720 }, // 設定瀏覽器視窗大小
  },
});

提示：可以測試常見的尺寸，如桌面（1280x720）、平板（768x1024）和手機（375x667）。

多瀏覽器測試設置

同時支援 Chromium、Firefox 和 WebKit

確保您的網站在所有瀏覽器上都能正常運行：

// 多瀏覽器測試配置
module.exports = defineConfig({
  projects: [
    {
      name: 'Chrome',
      use: { browserName: 'chromium', channel: 'chrome' },
    },
    {
      name: 'Firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'Safari',
      use: { browserName: 'webkit' },
    },
  ],
});

執行多瀏覽器測試：

npx playwright test

小企業建議：先確保單一瀏覽器的測試穩定可靠，再擴展到多瀏覽器測試。

瀏覽器特定配置

有時不同瀏覽器需要不同的配置：

module.exports = defineConfig({
  projects: [
    {
      name: 'Chrome',
      use: {
        browserName: 'chromium',
        // Chrome 特定配置
        launchOptions: {
          args: ['--disable-gpu', '--no-sandbox'],
        },
      },
    },
    {
      name: 'Firefox',
      use: {
        browserName: 'firefox',
        // Firefox 特定配置
        firefoxUserPrefs: {
          'media.autoplay.default': 0,
        },
      },
    },
  ],
});

提示：只在確實需要時使用瀏覽器特定配置，這樣可以保持測試代碼的簡潔性。

環境變數與參數化測試

管理測試環境

使用環境變數區分不同的測試環境（開發、測試、生產）：

// playwright.config.js
const config = {
  use: {
    // 根據環境變數選擇不同的基礎 URL
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
};

module.exports = defineConfig(config);

執行時可以指定環境：

// 使用測試環境
BASE_URL=https://test.example.com npx playwright test

// 使用生產環境
BASE_URL=https://example.com npx playwright test

使用 dotenv 管理配置

dotenv 是一個流行的 Node.js 模組，它可以將環境變數從 .env 文件加載到 process.env 中。這對於管理不同環境（如開發、測試、生產）的配置非常有用，使開發者能夠安全地存儲和訪問敏感信息，而不必將這些信息硬編碼在應用程序中。

對於更複雜的配置，使用 .env 文件會更方便：

首先安裝 dotenv：

npm install dotenv --save-dev

創建 .env 文件：

# .env.test
BASE_URL=https://test.example.com
API_KEY=test_api_key

在配置文件中使用：

// playwright.config.js
require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` });

module.exports = defineConfig({
  use: {
    baseURL: process.env.BASE_URL,
    extraHTTPHeaders: {
      'Api-Key': process.env.API_KEY,
    },
  },
});

執行時指定環境：

NODE_ENV=test npx playwright test

小企業提示：.env 文件應該加入 .gitignore 中，避免敏感信息被提交到代碼庫。

全局配置 vs. 測試特定配置

何時使用全局配置

全局配置適用於大多數測試共用的設置：

// playwright.config.js 全局配置
module.exports = defineConfig({
  timeout: 30000,
  use: {
    baseURL: 'http://example.com',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

適合全局配置的項目：

基礎 URL
截圖與視頻設置
基本的超時設置
身份驗證處理

何時覆寫特定測試的配置

在測試文件或測試用例中覆寫全局配置：

// 在測試文件中覆寫配置
import { test } from '@playwright/test';

// 為整個文件覆寫配置
test.use({
  viewport: { width: 375, height: 667 }, // 手機視圖測試
  actionTimeout: 5000, // 特定測試使用更短的超時
});

// 也可以為單個測試覆寫
test('在手機視圖測試導航', async ({ page }) => {
  test.slow(); // 增加這個測試的超時時間
  // 測試代碼...
});