● コミュニティ
testdino-hq
⚡ 即起動
playwright-skill
作者 testdino-hq · testdino-hq/playwright-skill
Claude Codeスキルとして、Playwrightのベストプラクティス（ロケーター、ネットワークスタブ、トレースビューアー、並列実行）をTestDinoチームが提供します。
TestDino Playwright Skillは、Playwrightファーストのテストパターン（ロールベースのロケーター、ネットワークスタブ、フィクスチャー、トレースキャプチャ、並列実行、リトライ、認証状態の再利用）をClaude Codeに組み込みます。TestDinoのテストプラットフォーム経験に基づいて構築されており、Claudeのコード生成をメンテナンスしやすいE2Eテストへと導きます。
なぜ使うのか
主な機能
- ロールベース・アクセシブルなロケーターパターン（CSS/XPathの脆弱性を回避）
- ネットワークスタブとレスポンスモックのイディオム
- テスト間で認証状態を再利用するフィクスチャー
- トレースキャプチャ + トレースビューアーによるデバッグワークフロー
- 並列実行とシャーディングのガイダンス
- フレーキー対策：web-firstアサーション、リトライポリシー
ライブデモ
実際の動作
playwright-skill-2.replay
▶ 準備完了
ユースケース
実用的な使い方： playwright-skill
使うタイミング： ステージングURLとログインフローがあり、スケールする前にまず1つ確実なテストを作りたい場合。
フロー
-
フローを記述する
Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ コピーしました
→ getByRole、getByLabelを使用したテスト。.classやxpathは不使用
-
認証再利用フィクスチャーを追加する
Convert the login into a reusable auth fixture so other tests skip logging in.✓ コピーしました
→ storageStateベースのフィクスチャー + globalSetup
-
フレーキーでないことを確認する
Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ コピーしました
→ waitForSelectorではなくexpect(locator).toBeVisible()を使用
結果： 堅牢な最初のテストと、スイート全体が継承するフィクスチャーが完成します。
注意点
- Claudeが
page.waitForTimeoutを使おうとする — スキルに明示的に指示する：任意のウェイトは使わず、web-firstアサーションを使用すること
使うタイミング： 実際のバックエンドを各状態にするのが難しい場合。
フロー
-
エンドポイントをスタブする
Stub GET /api/orders to return empty array, then assert the empty state renders.✓ コピーしました
→ JSONボディを使ったroute.fulfill、空状態の要素に対するアサーション
-
テストごとにレスポンスを変える
Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ コピーしました
→ ヘルパーを共有する3つのテスト
結果： バックエンドに手を加えずにエッジケースのカバレッジを実現します。
注意点
- スタブがテスト間でリークする —
beforeEachまたはフィクスチャースコープで設定する。モジュールレベルのフックでは設定しないこと
使うタイミング： ローカルではパスするが、CIで5%の確率で失敗するテストがある場合。
フロー
-
リトライ時にトレースをキャプチャする
Configure trace: 'on-first-retry' in playwright.config.ts.✓ コピーしました
→ コンフィグの差分
-
トレースを分析する
Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ コピーしました
→ ネットワーク/DOMタイミングの具体的な差分
-
修正する
Based on the trace, propose the minimal change to de-flake.✓ コピーしました
→ 一律のsleepではなく、特定のロケーターまたはアサーションの変更
結果： 根本原因が文書化された、フレーキーが解消されたテストが完成します。
注意点
- タイムアウトを延ばしてフレーキーに対処する — ほとんどのフレーキーは隠れた競合状態です。トレースを確認すると、通常はawaitの漏れが原因です
組み合わせ
他のMCPと組み合わせて10倍の力を
Playwrightでページをキャプチャし、JSが多いアプリのレンダリング済みHTMLに対してSEO監査を実行する
Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ コピーしました
コストと制限
運用コスト
- APIクォータ
- なし
- 呼び出しあたりのトークン
- テスト生成：3〜8kトークン
- 金額
- 無料
- ヒント
- まず1つのテストを手動で作成してテンプレートとして保存し、Claudeに他のテストをそのテンプレートに沿って生成させてください。
セキュリティ
権限、シークレット、影響範囲
認証情報の保管： テスト用認証情報は.envに保存（dotenv経由）。本番認証情報を含むstorageState.jsonは絶対にコミットしないでください。
データ送信先： テストは対象URLにアクセスします。このスキルからサードパーティへの通信は発生しません。
storageState.jsonにはセッションCookieが含まれています。.gitignoreに追加し、CIアーティファクトとして公開アップロードしないでください。
トラブルシューティング
よくあるエラーと対処法
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 他との比較
| 代替案 | 代わりに使う場面 | トレードオフ |
|---|
| Cypress | CypressのDXとリアルブラウザーデバッグを好む場合 | ロケーターの考え方が異なり、並列実行の対応が弱い |