e2e-qa-tester
Playwright MCPを用いてE2Eテストや手動QAを実行し、会話内で完了した最新タスクを検証するSkillで、新機能のテストやフォーム、認証フローなど、ユーザーインタラクションの動作確認に役立ち、実行前に確認を求めることで、より確実なテストを実施するSkill。
📜 元の英語説明(参考)
Ejecuta pruebas E2E y QA manual usando Playwright MCP para verificar la ultima tarea completada en la conversacion. Usar cuando se necesite: (1) Probar un flujo recien implementado, (2) Verificar que una funcionalidad funciona correctamente, (3) Hacer QA manual de una nueva feature, (4) Testear formularios, flujos de autenticacion, o cualquier interaccion de usuario. El skill busca credenciales en CREDENTIALS.md, intenta conectar al puerto 5173 por defecto, y pide confirmacion antes de ejecutar las pruebas.
🇯🇵 日本人クリエイター向け解説
Playwright MCPを用いてE2Eテストや手動QAを実行し、会話内で完了した最新タスクを検証するSkillで、新機能のテストやフォーム、認証フローなど、ユーザーインタラクションの動作確認に役立ち、実行前に確認を求めることで、より確実なテストを実施するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o e2e-qa-tester.zip https://jpskill.com/download/10600.zip && unzip -o e2e-qa-tester.zip && rm e2e-qa-tester.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10600.zip -OutFile "$d\e2e-qa-tester.zip"; Expand-Archive "$d\e2e-qa-tester.zip" -DestinationPath $d -Force; ri "$d\e2e-qa-tester.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
e2e-qa-tester.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
e2e-qa-testerフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
E2E QA Tester
新しく実装された機能を検証するために、Playwright MCP を使用してエンドツーエンドテストおよび手動 QA を実行します。
ワークフロー
1. テスト対象のタスクを特定する
テストを実行する前に、現在の会話履歴を確認して、最後に完了したタスクを特定します。
最近のメッセージを検索します。
- 「完了」または「done」とマークされたタスク
- 完了した実装
- 追加または変更された機能
- 適用されたバグ修正
タスクを明確に特定できない場合は、ユーザーに「どの機能またはフローをテストすればよいですか?」と質問してください。
2. テスト用クレデンシャルを探す
ログインを試みる前に常に、テスト用クレデンシャルを探してください。
# プロジェクト内のクレデンシャルファイルを検索します
Get-ChildItem -Path . -Filter "CREDENTIALS.md" -Recurse
一般的な場所:
CREDENTIALS.md(プロジェクトのルート)docs/CREDENTIALS.md.credentials/CREDENTIALS.mdtesting/CREDENTIALS.md
CREDENTIALS.md で期待される形式:
## ユーザー Admin
- Email: admin@test.com
- Password: admin123
## ユーザー Regular
- Email: user@test.com
- Password: user123
CREDENTIALS.md が見つからない場合:
- 停止して、ユーザーにクレデンシャルを尋ねます
- 推測したり、汎用的なクレデンシャルを使用したりしないでください
3. アプリケーションに接続する
デフォルトのポートへの接続を試みます。
# ポート 5173 が使用中かどうかを確認します
Test-NetConnection -ComputerName 127.0.0.1 -Port 5173 -InformationLevel Quiet
- ポート 5173 が使用中の場合: その接続を使用します
- ポート 5173 が使用中でない場合:
- 別の一般的なポート (3000, 4200, 8080) があるかどうかを確認します
- アクティブなポートがない場合は、ユーザーに質問します
4. 事前テストの確認 (必須)
テストを実行する前に、ユーザーに以下を提示します。
## テスト計画
**特定されたタスク**: [完了したタスクの説明]
**テストするフロー**:
1. [ステップ 1]
2. [ステップ 2]
3. [ステップ 3]
**使用するクレデンシャル**: [CREDENTIALS.md のロール/ユーザー]
**開始 URL**: http://127.0.0.1:[ポート]
このテストを実行しますか? (y/n)
ユーザーから明示的な確認を得るまで続行しないでください。
ユーザーが拒否した場合:
- 何を異なるようにする必要があるかを尋ねます
- 指示に従って計画を調整します
- 再度確認を求めます
5. テストの実行
確認されたら、Playwright MCP を使用してテストを実行します。
ブラウザの起動 (headless)
playwright_browser_navigate url http://127.0.0.1:[ポート]
ログインが必要な場合
- スナップショットを撮って現在の状態を確認します
- メール/ユーザーとパスワードのフィールドを特定します
- CREDENTIALS.md のクレデンシャルでフォームに入力します
- フォームを送信します
- ログインが成功したことを確認します (スナップショット、成功要素の検索)
テストフローの実行
- 目的の機能に移動します
- 特定されたフローに従って要素を操作します
- 主要なポイントでスナップショットを撮ります
- 期待される結果を確認します
便利な Playwright コマンド
| アクション | ツール |
|---|---|
| 現在の状態の確認 | playwright_browser_snapshot |
| ナビゲート | playwright_browser_navigate |
| クリック | playwright_browser_click |
| テキストの入力 | playwright_browser_type |
| ドロップダウンの選択 | playwright_browser_select_option |
| フォームの入力 | playwright_browser_fill_form |
| 待機 | playwright_browser_wait_for |
| スクリーンショット | playwright_browser_take_screenshot |
6. 結果の報告
完了したら、明確なレポートを提示します。
## E2E テストの結果
**ステータス**: [合格 / 失敗]
**テストされたタスク**: [説明]
**実行されたステップ**:
1. [ステップ 1] - [OK/失敗: 理由]
2. [ステップ 2] - [OK/失敗: 理由]
3. [ステップ 3] - [OK/失敗: 理由]
**最終結果**:
[何が起こったかの説明、エラーがあったかどうか、観察された動作]
**エビデンス**:
- [撮影されたスクリーンショットまたは検証されたステップ]
一般的なユースケース
新しいフォームのテスト
- フォームのフィールドを特定します
- 有効なテストデータで入力します
- 送信して成功応答を確認します
- バリデーションをテストします (空のフィールド、無効な形式)
認証フローのテスト
- ログイン画面を確認します
- CREDENTIALS.md のクレデンシャルを使用します
- ログイン後のリダイレクトを確認します
- 認証されたユーザーのみに表示される要素を確認します
CRUD のテスト
- Create: 新しいレコードを作成し、リストに表示されることを確認します
- Read: 表示されたデータが正しいことを確認します
- Update: レコードを編集し、変更が永続化されることを確認します
- Delete: レコードを削除し、リストから消えることを確認します
Feature Toggle のテスト
- 機能をアクティブにする前の状態を確認します
- 機能をアクティブ/トリガーします
- アクティブ後の状態を確認します (UI が表示される、動作が変更される)
エラー処理
アプリケーションがロードされない場合
- サーバーが実行されていることを確認します
- URL とポートが正しいことを確認します
- ユーザーに報告します
ログインに失敗した場合
- CREDENTIALS.md のクレデンシャルを確認します
- フォームに正しいフィールドがあることを確認します
- 特定のエラーをユーザーに報告します
要素が見つからない場合
- スナップショットを撮って現在の状態を確認します
- 代替セレクターを探します
- それでも解決しない場合は、エビデンスとともにユーザーに報告します
コンソールエラーがある場合
playwright_browser_console_messagesを使用してエラーを取得します- 結果レポートに含めます
重要な注意事項
- ユーザーの邪魔にならないように、常に headless モード (--headed=false) を使用してください
- クレデンシャルを要求する前に、常に CREDENTIALS.md を探してください
- テストを実行する前に、常に 確認を求めてください
- テストユーザーを作成、変更、または削除しないでください
- IPv6 を決して使用しないでください。常に 127.0.0.1 を使用してください
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
E2E QA Tester
Ejecuta pruebas end-to-end y QA manual usando Playwright MCP para verificar funcionalidades recien implementadas.
Flujo de Trabajo
1. Identificar la Tarea a Probar
Antes de ejecutar cualquier prueba, revisa el historial de la conversacion actual para identificar la ultima tarea completada:
Busca en los mensajes recientes:
- Tareas marcadas como "completadas" o "done"
- Implementaciones finalizadas
- Features agregadas o modificadas
- Bug fixes aplicados
Si no puedes identificar claramente la tarea, pregunta al usuario: "¿Que funcionalidad o flujo debo probar?"
2. Buscar Credenciales de Prueba
SIEMPRE antes de intentar login, busca credenciales de prueba:
# Buscar archivo de credenciales en el proyecto
Get-ChildItem -Path . -Filter "CREDENTIALS.md" -Recurse
Ubicaciones comunes:
CREDENTIALS.md(raiz del proyecto)docs/CREDENTIALS.md.credentials/CREDENTIALS.mdtesting/CREDENTIALS.md
Formato esperado en CREDENTIALS.md:
## Usuario Admin
- Email: admin@test.com
- Password: admin123
## Usuario Regular
- Email: user@test.com
- Password: user123
Si NO encuentras CREDENTIALS.md:
- Detente y pregunta al usuario por las credenciales
- NO intentes adivinar ni usar credenciales genericas
3. Conectar a la Aplicacion
Intenta conectar al puerto por defecto:
# Verificar si puerto 5173 esta en uso
Test-NetConnection -ComputerName 127.0.0.1 -Port 5173 -InformationLevel Quiet
- Si el puerto 5173 esta ocupado: Usar esa conexion
- Si el puerto 5173 NO esta en uso:
- Verificar si hay otro puerto comun (3000, 4200, 8080)
- Si no hay ningun puerto activo, preguntar al usuario
4. Confirmacion Pre-Prueba (OBLIGATORIO)
Antes de ejecutar cualquier prueba, presenta al usuario:
## Plan de Prueba
**Tarea identificada**: [descripcion de la tarea completada]
**Flujo a probar**:
1. [Paso 1]
2. [Paso 2]
3. [Paso 3]
**Credenciales a usar**: [rol/usuario del CREDENTIALS.md]
**URL de inicio**: http://127.0.0.1:[puerto]
¿Procedo con esta prueba? (s/n)
NO proceder hasta recibir confirmacion explicita del usuario.
Si el usuario rechaza:
- Pregunta que debe hacer diferente
- Ajusta el plan segun sus indicaciones
- Vuelve a pedir confirmacion
5. Ejecutar la Prueba
Una vez confirmado, usa Playwright MCP para ejecutar la prueba:
Iniciar Navegador (headless)
playwright_browser_navigate con url http://127.0.0.1:[puerto]
Si hay Login requerido
- Tomar snapshot para ver estado actual
- Identificar campos de email/usuario y password
- Completar formulario con credenciales del CREDENTIALS.md
- Enviar formulario
- Verificar login exitoso (snapshot, buscar elemento de exito)
Ejecutar Flujo de Prueba
- Navegar a la funcionalidad objetivo
- Interactuar con elementos segun el flujo identificado
- Tomar snapshots en puntos clave
- Verificar resultados esperados
Comandos Playwright Utiles
| Accion | Herramienta |
|---|---|
| Ver estado actual | playwright_browser_snapshot |
| Navegar | playwright_browser_navigate |
| Click | playwright_browser_click |
| Escribir texto | playwright_browser_type |
| Seleccionar dropdown | playwright_browser_select_option |
| Llenar formulario | playwright_browser_fill_form |
| Esperar | playwright_browser_wait_for |
| Screenshot | playwright_browser_take_screenshot |
6. Reportar Resultados
Al finalizar, presenta un reporte claro:
## Resultado de Prueba E2E
**Estado**: [PASO / FALLO]
**Tarea probada**: [descripcion]
**Pasos ejecutados**:
1. [Paso 1] - [OK/FALLO: razon]
2. [Paso 2] - [OK/FALLO: razon]
3. [Paso 3] - [OK/FALLO: razon]
**Resultado final**:
[Descripcion de que paso, si hubo errores, comportamiento observado]
**Evidencia**:
- [Screenshots tomados o pasos verificados]
Casos de Uso Comunes
Probar Formulario Nuevo
- Identificar campos del formulario
- Completar con datos de prueba validos
- Enviar y verificar respuesta exitosa
- Probar validaciones (campos vacios, formatos invalidos)
Probar Flujo de Autenticacion
- Verificar pantalla de login
- Usar credenciales de CREDENTIALS.md
- Verificar redireccion post-login
- Verificar elementos visibles solo para usuarios autenticados
Probar CRUD
- Create: Crear nuevo registro, verificar aparicion en lista
- Read: Verificar datos mostrados correctamente
- Update: Editar registro, verificar cambios persistidos
- Delete: Eliminar registro, verificar desaparece de lista
Probar Feature Toggle
- Verificar estado antes de activar feature
- Activar/trigger la feature
- Verificar estado despues (UI visible, comportamiento cambiado)
Manejo de Errores
Si la aplicacion no carga
- Verificar que el servidor este corriendo
- Verificar URL y puerto correctos
- Reportar al usuario
Si el login falla
- Verificar credenciales en CREDENTIALS.md
- Verificar que el formulario tenga los campos correctos
- Reportar error especifico al usuario
Si un elemento no se encuentra
- Tomar snapshot para ver estado actual
- Buscar selectores alternativos
- Si persiste, reportar al usuario con evidencia
Si hay errores de consola
- Usar
playwright_browser_console_messagespara obtener errores - Incluir en reporte de resultados
Notas Importantes
- SIEMPRE usar modo headless (--headed=false) para no interferir con el usuario
- SIEMPRE buscar CREDENTIALS.md antes de pedir credenciales
- SIEMPRE pedir confirmacion antes de ejecutar pruebas
- NUNCA crear, modificar o eliminar usuarios de prueba
- NUNCA usar IPv6, siempre 127.0.0.1