Playwrightの完全ガイド: テストからCI/CD統合まで

E2Eテスト

高度なテスト技術

APIテスト

JAVASCRIPT
const { test, expect } = require('@playwright/test');

test('API test', async ({ request }) => {
  const response = await request.get('https://api.example.com/users');
  expect(response.ok()).toBeTruthy();

  const users = await response.json();
  expect(users.length).toBeGreaterThan(0);
});
コードをコピー

パフォーマンステスト

JAVASCRIPT
test('page load performance', async ({ page }) => {
  const startTime = Date.now();
  await page.goto('https://example.com');
  const loadTime = Date.now() - startTime;
  console.log(`Page load time: ${loadTime}ms`);
  expect(loadTime).toBeLessThan(3000); // ページロードが3秒未満
});
コードをコピー

視覚的回帰テスト

JAVASCRIPT
test('visual regression test', async ({ page }) => {
  await page.goto('https://example.com');
  const screenshot = await page.screenshot();
  await expect(screenshot).toMatchSnapshot('homepage.png');
});
コードをコピー

デバッグ手法

Playwright Inspector

Playwright Inspectorによる対話的デバッグ

ログの解析とトレースビューア

JS
// playwright.config.js の一部
use: {
  logger: {
    isEnabled: (name, severity) => name === 'browser',
    log: (name, severity, message) => console.log(`${name} ${message}`)
  }
}
コードをコピー

エラーハンドリングと再実行戦略

CI/CDへの統合

Jenkins

GROOVY
pipeline {
   agent { 
       docker { image 'mcr.microsoft.com/playwright:v1.51.0-noble' } 
   }
   stages {
      stage('e2e-tests') {
         steps {
            sh 'npm ci'
            sh 'npx playwright test'
         }
      }
   }
}
コードをコピー

• アプリケーションのビルド・起動をワークフロー内で自動化し、本番に近い環境を毎回再現してテストを実行できる
• Dockerによる隔離環境でテストを行うため、ローカル環境の違いに左右されず安定した結果が得られる
• Dockerネットワークを利用することで、テストコードからアプリケーションコンテナやDBコンテナへの接続設定が簡素化される

実際のプロジェクト事例

• CIパイプラインにE2Eテストを組み込み、プルリクエストごとに自動でリグレッションテストを実行
• コードレビュー時に開発者自身がテスト結果を確認できるようになり、動作確認の効率化
• テストコードが生きたドキュメントとなり、新メンバーへの仕様共有や認識合わせに寄与

拡張機能やプラグイン

VS Code公式拡張機能

VS codeのPlaywright拡張機能

Playwright Extraによるプラグイン拡張

その他のエコシステム活用

まとめ