Playwright マルチプロジェクト設定（Projects）

この章では、Projects 設定を使用して複数のブラウザやデバイスでテストを実行する方法と、プロジェクト依存関係の使い方を紹介します。

Project とは

Playwright では、Project は一連の特定のブラウザとデバイス設定で実行されるテストを表します。

複数の Project を設定することで、同じテストコードを Chromium、Firefox、WebKit、およびモバイル端末上で実行できます。

基本のマルチブラウザ設定

例

// ファイルパス：playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

特定のブラウザのテストを実行する：

# 仅在 Chromium 上运行
npx playwright test --project=chromium

# 在 Chromium 和 Firefox 上运行
npx playwright test --project=chromium --project=firefox

devices デバイスプリセット

Playwright には多数のデバイスプリセットが組み込まれています（@playwright/testのdevices）、実機のビューポート、User-Agent、ピクセル比などをシミュレートします。

例

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

export default defineConfig({
  projects: [
    // デスクトップ
    {
      name: 'desktop-chrome',
      use: { ...devices['Desktop Chrome'] },
    },

    // モバイル
    {
      name: 'mobile-iphone',
      use: { ...devices['iPhone 15'] },
    },
    {
      name: 'mobile-pixel',
      use: { ...devices['Pixel 7'] },
    },

    // タブレット
    {
      name: 'tablet-ipad',
      use: { ...devices['iPad Pro'] },
    },
  ],
});

よく使われるデバイスプリセット：

プリセット名デバイスタイプビューポートサイズ
Desktop Chromeデスクトップ1280×720
Desktop Firefoxデスクトップ1280×720
Desktop Safariデスクトップ1280×720
iPhone 15スマートフォン393×852
Pixel 7スマートフォン412×915
iPad Proタブレット1024×1366

カスタムプロジェクト設定

Project のuseでグローバル設定を上書きできます：

例

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',
    locale: 'zh-CN',
    timezone: 'Asia/Shanghai',
  },

  projects: [
    {
      name: 'chromium-desktop',
      use: {
        ...devices['Desktop Chrome'],
        // グローバルの locale と timezone を継承
      },
    },
    {
      name: 'chromium-mobile',
      use: {
        ...devices['Pixel 7'],
        // 英語環境に上書き
        locale: 'en-US',
        timezone: 'America/New_York',
      },
    },
    // ダークモードをテスト
    {
      name: 'chromium-dark',
      use: {
        ...devices['Desktop Chrome'],
        colorScheme: 'dark',
      },
    },
    // ライトモードをテスト
    {
      name: 'chromium-light',
      use: {
        ...devices['Desktop Chrome'],
        colorScheme: 'light',
      },
    },
  ],
});

プロジェクト依存関係（dependencies）

あるプロジェクトは別のプロジェクトに依存でき、依存先のプロジェクトが先に実行されることを保証します。

最も一般的な使い方は、Setup プロジェクト（認証）を先に実行し、他のプロジェクトがそれに依存することです。

例

export default defineConfig({
  projects: [
    // Setup プロジェクト —— 認証状態を生成
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },

    // テストプロジェクトは setup に依存し、認証状態が先に生成されることを保証
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
  ],
});

setupプロジェクトは一度だけ実行され、それに依存するすべてのプロジェクトは、その完了を待ってから起動します。

testProject による設定の共有

複数のプロジェクトで設定を重複せずに共有したい場合は、基本プロジェクトを抽出できます：

例

// ファイルパス：playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

const desktopProject = {
  use: {
    ...devices['Desktop Chrome'],
    viewport: { width: 1920, height: 1080 },
    locale: 'zh-CN',
  },
} as const;

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      ...desktopProject,  // desktopProject の設定を継承
      use: {
        ...desktopProject.use,  // まず継承
        browserName: 'chromium', // 次に上書き
      },
    },
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        // viewport と locale を上書き
        viewport: { width: 1920, height: 1080 },
        locale: 'zh-CN',
      },
    },
  ],
});
その他の拡張