playwright

目的

Playwrightを使用した包括的なブラウザ自動化を実現。Webサイトテスト、フォーム入力、スクリーンショット、レスポンシブデザイン検証、ログインフロー、リンクチェックに対応。

トリガー語

• 「ブラウザ自動化」
• 「Webテストを実行」
• 「スクリーンショットを撮る」
• 「フォームを自動入力」
• 「Playwrightでテスト」

コア機能

• カスタム自動化コード生成（事前スクリプトに限定されない）
• 可視ブラウザモード（headless: false）でリアルタイム確認
• モジュール解決エラー防止
• 一時ファイルの安全な管理

重要ワークフロー

3ステッププロセス

1. 開発サーバー自動検出: 検出ヘルパーを最初に使用
2. /tmpにスクリプト記述: スキルディレクトリには書き込まない
3. run.jsラッパーで実行: スキルディレクトリから実行

使用パターン

マルチビューポートレスポンシブテスト

const viewports = [
  { width: 375, height: 667, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1920, height: 1080, name: 'desktop' }
];

for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.screenshot({ path: `/tmp/screenshot-${vp.name}.png` });
}

ログインフロー検証

フォーム送信自動化

リンク切れ検出

デフォルト設定

設定オプション

環境変数でカスタムHTTPヘッダーを設定：

• PW_HEADER_NAME
• PW_HEADER_VALUE
• PW_EXTRA_HEADERS

セットアップ

npm run setup  # Playwright + Chromiumインストール（初回のみ）

重要原則

• URLはパラメータ化して環境間で柔軟に
• テストファイルは/tmpに書き込み、プロジェクトを汚さない
• ユーザーが明示的に要求しない限りheadless: false

ライセンス

MIT License