/ ディレクトリ / プレイグラウンド / playwright-skill
● コミュニティ testdino-hq ⚡ 即起動

playwright-skill

作者 testdino-hq · testdino-hq/playwright-skill

Claude Codeスキルとして、Playwrightのベストプラクティス(ロケーター、ネットワークスタブ、トレースビューアー、並列実行)をTestDinoチームが提供します。

TestDino Playwright Skillは、Playwrightファーストのテストパターン(ロールベースのロケーター、ネットワークスタブ、フィクスチャー、トレースキャプチャ、並列実行、リトライ、認証状態の再利用)をClaude Codeに組み込みます。TestDinoのテストプラットフォーム経験に基づいて構築されており、Claudeのコード生成をメンテナンスしやすいE2Eテストへと導きます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

playwright-skill-2.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright-skill-2",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright-skill-2": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/testdino-hq/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add playwright-skill-2 -- git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: playwright-skill

メンテナンスしやすい初めてのE2Eテストの書き方

👤 プロジェクトに初めてPlaywrightを導入する開発者 ⏱ ~30 min beginner

使うタイミング: ステージングURLとログインフローがあり、スケールする前にまず1つ確実なテストを作りたい場合。

前提条件
  • スキルのインストール — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
  • @playwright/test のインストール — npm init playwright@latest
フロー
  1. フローを記述する
    Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ コピーしました
    getByRolegetByLabelを使用したテスト。.classやxpathは不使用
  2. 認証再利用フィクスチャーを追加する
    Convert the login into a reusable auth fixture so other tests skip logging in.✓ コピーしました
    storageStateベースのフィクスチャー + globalSetup
  3. フレーキーでないことを確認する
    Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ コピーしました
    waitForSelectorではなくexpect(locator).toBeVisible()を使用

結果: 堅牢な最初のテストと、スイート全体が継承するフィクスチャーが完成します。

注意点
  • Claudeがpage.waitForTimeoutを使おうとする — スキルに明示的に指示する:任意のウェイトは使わず、web-firstアサーションを使用すること

バックエンドAPIをスタブしてフロントエンドのエッジケースをテストする

👤 空状態・エラー状態・ローディング状態をテストするフロントエンドエンジニア ⏱ ~25 min intermediate

使うタイミング: 実際のバックエンドを各状態にするのが難しい場合。

フロー
  1. エンドポイントをスタブする
    Stub GET /api/orders to return empty array, then assert the empty state renders.✓ コピーしました
    → JSONボディを使ったroute.fulfill、空状態の要素に対するアサーション
  2. テストごとにレスポンスを変える
    Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ コピーしました
    → ヘルパーを共有する3つのテスト

結果: バックエンドに手を加えずにエッジケースのカバレッジを実現します。

注意点
  • スタブがテスト間でリークするbeforeEachまたはフィクスチャースコープで設定する。モジュールレベルのフックでは設定しないこと

トレースビューアーを使ってフレーキーテストをデバッグする

👤 CIでフレーキーなスイートをトリアージするエンジニア ⏱ ~45 min intermediate

使うタイミング: ローカルではパスするが、CIで5%の確率で失敗するテストがある場合。

フロー
  1. リトライ時にトレースをキャプチャする
    Configure trace: 'on-first-retry' in playwright.config.ts.✓ コピーしました
    → コンフィグの差分
  2. トレースを分析する
    Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ コピーしました
    → ネットワーク/DOMタイミングの具体的な差分
  3. 修正する
    Based on the trace, propose the minimal change to de-flake.✓ コピーしました
    → 一律のsleepではなく、特定のロケーターまたはアサーションの変更

結果: 根本原因が文書化された、フレーキーが解消されたテストが完成します。

注意点
  • タイムアウトを延ばしてフレーキーに対処する — ほとんどのフレーキーは隠れた競合状態です。トレースを確認すると、通常はawaitの漏れが原因です

組み合わせ

他のMCPと組み合わせて10倍の力を

playwright-skill-2 + seo-audit-skill

Playwrightでページをキャプチャし、JSが多いアプリのレンダリング済みHTMLに対してSEO監査を実行する

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
Locator patterns - 新しいセレクターを記述するとき 0
Network stubbing - フロントエンドのエッジケースをテストするとき 0
Fixtures & auth reuse - スイートが5テストを超えてスケールするとき 0
Trace analysis trace.zip フレーキーテストをデバッグするとき 0
Parallelism & sharding - CIでスイートの実行が5分以上かかるとき 0

コストと制限

運用コスト

APIクォータ
なし
呼び出しあたりのトークン
テスト生成:3〜8kトークン
金額
無料
ヒント
まず1つのテストを手動で作成してテンプレートとして保存し、Claudeに他のテストをそのテンプレートに沿って生成させてください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: テスト用認証情報は.envに保存(dotenv経由)。本番認証情報を含むstorageState.jsonは絶対にコミットしないでください。
データ送信先: テストは対象URLにアクセスします。このスキルからサードパーティへの通信は発生しません。

トラブルシューティング

よくあるエラーと対処法

Test is flaky on CI only(CIでのみフレーキーになる)

trace: 'on-first-retry'を有効にして、失敗した実行のトレースを分析してください。

確認: npx playwright show-trace trace.zip
getByRole doesn't find an element that's clearly there(明らかに存在する要素を`getByRole`が見つけられない)

要素にアクセシブルネームがない可能性があります。Playwright Inspectorで計算されたロール/ネームを確認してください。

確認: npx playwright test --ui
Login fixture works locally, fails in CI(ログインフィクスチャーがローカルでは動作するがCIで失敗する)

CIでは--headed=falseと明示的なブラウザーインストールが必要な場合があります。CIでnpx playwright install --with-depsを実行してください。

代替案

playwright-skill 他との比較

代替案代わりに使う場面トレードオフ
CypressCypressのDXとリアルブラウザーデバッグを好む場合ロケーターの考え方が異なり、並列実行の対応が弱い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る