← 一覧へ
✅ テスト・チェックCC / Codex 両対応難易度: 中級
Playwrightコンポーネントテスト playwright-component-testing
シンプルに、コンポーネントをテストしよう！
これは何？
Playwrightコンポーネントテストは、ReactやVueのUIコンポーネントを独立してテストするための仕組みです。専用のテスト環境を作る必要がなく、既存の開発サーバーを使ってテストを実行できます。これにより、設定が簡単で、実際のアプリケーション環境に近い状態でテストを行えます。
これでできること
- ReactやVueのコンポーネントを独立してテストできます
- 既存の開発サーバーを使ってテストを実行できます
- 専用のテスト環境を作らずに済みます
- 簡単にテストシナリオを追加できます
こんな時に便利
新しいコンポーネントを開発しているとき
既存のコンポーネントをリファクタリングするとき
UIの動作確認をしたいとき
使い方
まず、Playwrightの設定ファイルにコンポーネントテスト用のプロジェクトを追加します。次に、テストしたいコンポーネント用のストーリーファイルを作成し、プレイライトのテストを書きます。最後に、コマンドを実行してテストを開始します。
使用例（こう頼んでみよう）
Playwrightを使ってReactのボタンコンポーネントをテストしたいVueのフォームコンポーネントの動作を確認するためのテストを作成したい必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/microsoft/playwright/tree/main/packages/playwright-core/src/tools/skills/playwright-component-testing手動で置く
Claude Code →
~/.claude/skills/playwright-component-testing/Codex →
~/.agents/skills/playwright-component-testing/使いこなしのコツ
- ストーリーファイルはコンポーネントと同居させるのがおすすめです
- テストを書くときは、DOMやURL、ネットワークの状態に注目しましょう