🎭 playwright-test-kit

20デバイス構成を含む包括的なPlaywrightテストツールキット

✨ 特徴

• 📱 20デバイス構成 - モバイルからデスクトップまで包括的にカバー
• 🎨 ビジュアルリグレッションテスト - アニメーション制御による安定したスクリーンショット
• 🐳 Docker対応 - Playwright環境が事前設定済み
• 🛠️ ヘルパー関数 - 再利用可能なテストユーティリティ
• 📋 テンプレート - すぐに使えるサンプルテストファイル
• 🔧 柔軟な設定 - どんなプロジェクトにも簡単にカスタマイズ可能

📦 含まれているもの

playwright-test-kit/
├── configs/
│   └── playwright.base.config.ts           # 20デバイス構成
├── docker/
│   ├── Dockerfile                          # Playwrightテスト環境
│   └── docker-compose.template.yml         # Docker Composeテンプレート
├── helpers/
│   └── test-helpers.ts                     # 再利用可能なヘルパー関数
└── templates/
    ├── visual-regression.example.spec.ts   # ビジュアルリグレッションテスト例
    └── responsive-functional.example.spec.ts # レスポンシブ機能テスト例

🚀 クイックスタート

方法1: プロジェクトにファイルをコピー

# このリポジトリをクローン
git clone https://github.com/worldscandy/playwright-test-kit.git

# 設定ファイルをコピー
cp playwright-test-kit/configs/playwright.base.config.ts your-project/playwright.config.ts

# ヘルパー関数をコピー
cp playwright-test-kit/helpers/test-helpers.ts your-project/tests/test-helpers.ts

# Dockerファイルをコピー（オプション）
cp playwright-test-kit/docker/Dockerfile your-project/docker/playwright.Dockerfile
cp playwright-test-kit/docker/docker-compose.template.yml your-project/docker-compose.yml

方法2: Gitサブモジュールとして使用

# サブモジュールとして追加
git submodule add https://github.com/worldscandy/playwright-test-kit.git

# playwright.config.tsでインポート
import { defineConfig } from '@playwright/test';
import baseConfig from './playwright-test-kit/configs/playwright.base.config';

📱 デバイス構成

境界値分析に基づいて厳選された20デバイス構成を含みます:

モバイルデバイス（10構成）

• 📏 Small Mobile (320px) - 最小境界値
• 📱 iPhone 12 mini (360px)
• 📱 Galaxy S24 (360px)
• 📱 iPhone SE (375px)
• 📱 iPhone 13 (390px) ⭐ 基準サイズ
• 📱 iPhone 15 Pro (393px)
• 📱 Pixel 5 (393px)
• 📱 Galaxy S23 Ultra (412px)
• 📱 iPhone XR (414px)
• 📱 iPhone 14 Pro Max (430px) - 大型スマホ境界

タブレットデバイス（4構成）

• 📲 iPad Mini (768px) - タブレット境界
• 📲 iPad 10.2" (810px)
• 📲 iPad Pro 11" (834px)
• 📲 iPad landscape (1024px)

デスクトップ/ノートPC（6構成）

• 💻 Browser Half (960px) - FHD半分幅
• 💻 Laptop (1280px) - 小型ノートPC（MacBook Air 13"）
• 💻 Browser Half 2K (1280px) - 2K半分幅
• 💻 Laptop (1440px) - 標準ノートPC（MacBook Pro 14"）
• 🖥️ Desktop (1920px) - Full HD
• 🖥️ Desktop 2K (2560px) - 2K/QHD

🛠️ ヘルパー関数

スクリーンショットヘルパー

import { prepareForStableScreenshot, captureAndAttachScreenshot } from './helpers/test-helpers';

test('ビジュアルリグレッション', async ({ page }, testInfo) => {
  await page.goto('/');

  // アニメーションを無効化して安定したスクリーンショット
  await prepareForStableScreenshot(page);

  // スクリーンショットを撮影してHTMLレポートに添付
  await captureAndAttachScreenshot(page, testInfo);
});

デバイス情報

import { getViewportSize, getLogicalSizeString, sanitizeDeviceName } from './helpers/test-helpers';

test('ビューポート確認', async ({ page }) => {
  const size = getViewportSize(page);
  console.log(`テスト中のサイズ: ${size.width}x${size.height}`);

  const sizeString = getLogicalSizeString(page); // "390×844"
});

🐳 Docker使用方法

Dockerでテストを実行

# テスト環境をビルド
docker-compose build playwright-test

# 全テストを実行
docker-compose run --rm playwright-test

# テストレポートを表示
docker-compose up playwright-report
# ブラウザで http://localhost:9323 を開く

Docker設定のカスタマイズ

1. テンプレートをコピー:

cp docker/docker-compose.template.yml docker-compose.yml

2. サービス名とパスをカスタマイズ:

services:
  your-app:  # アプリのサービス名を変更（例: sales-frontend）
    volumes:
      - ./your-app:/app  # パスを変更

  playwright-test:  # テストサービス（このまま使用可能）
    depends_on:
      - your-app  # アプリのサービス名に合わせる

📝 カスタマイズ

ベースURLのカスタマイズ

// playwright.config.tsで
export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

デバイスのフィルタリング

// モバイルデバイスのみ使用
export default defineConfig({
  projects: baseConfig.projects.filter(p =>
    p.use?.isMobile === true
  ),
});

カスタムデバイスの追加

export default defineConfig({
  projects: [
    ...baseConfig.projects,
    {
      name: 'カスタムデバイス',
      use: {
        viewport: { width: 1366, height: 768 },
        deviceScaleFactor: 1,
      },
    },
  ],
});

📚 テンプレートテスト

ビジュアルリグレッションテスト

import { test } from '@playwright/test';
import { prepareForStableScreenshot, captureAndAttachScreenshot } from './test-helpers';

test('ビジュアルリグレッションテスト', async ({ page }, testInfo) => {
  await page.goto('/');
  await prepareForStableScreenshot(page);
  await captureAndAttachScreenshot(page, testInfo);
});

レスポンシブ機能テスト

import { test, expect } from '@playwright/test';
import { getViewportSize } from './test-helpers';

test('レスポンシブナビゲーション', async ({ page }) => {
  await page.goto('/');
  const { width } = getViewportSize(page);

  if (width < 768) {
    // モバイル: ハンバーガーメニュー
    await expect(page.getByRole('button', { name: 'Menu' })).toBeVisible();
  } else {
    // デスクトップ: フルナビゲーション
    await expect(page.getByRole('navigation')).toBeVisible();
  }
});

🎯 ユースケース

• ✅ レスポンシブデザインテスト
• ✅ ビジュアルリグレッションテスト
• ✅ クロスデバイス互換性テスト
• ✅ モバイルファースト開発
• ✅ プログレッシブウェブアプリ（PWA）テスト
• ✅ デバイス横断アクセシビリティテスト

📋 必要要件

• Node.js >= 18.0.0
• @playwright/test >= 1.56.0

🤝 コントリビューション

プルリクエストを歓迎します！お気軽にご投稿ください。

📄 ライセンス

MIT License - 詳細はLICENSEファイルを参照してください。

🔗 リンク

• Playwright ドキュメント
• GitHubリポジトリ
• Issue報告

🙏 謝辞

このツールキットは実プロジェクトから抽出され、複数のアプリケーションでの再利用のために最適化されました。

---

Made with ❤️ by worldscandy