jpskill.com
🛠️ 開発・MCP コミュニティ

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本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して e2e-qa-tester.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → e2e-qa-tester フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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.md
  • testing/CREDENTIALS.md

CREDENTIALS.md で期待される形式:

## ユーザー Admin
- Email: admin@test.com
- Password: admin123

## ユーザー Regular
- Email: user@test.com
- Password: user123

CREDENTIALS.md が見つからない場合:

  1. 停止して、ユーザーにクレデンシャルを尋ねます
  2. 推測したり、汎用的なクレデンシャルを使用したりしないでください

3. アプリケーションに接続する

デフォルトのポートへの接続を試みます。

# ポート 5173 が使用中かどうかを確認します
Test-NetConnection -ComputerName 127.0.0.1 -Port 5173 -InformationLevel Quiet
  • ポート 5173 が使用中の場合: その接続を使用します
  • ポート 5173 が使用中でない場合:
    1. 別の一般的なポート (3000, 4200, 8080) があるかどうかを確認します
    2. アクティブなポートがない場合は、ユーザーに質問します

4. 事前テストの確認 (必須)

テストを実行する前に、ユーザーに以下を提示します。

## テスト計画

**特定されたタスク**: [完了したタスクの説明]

**テストするフロー**:
1. [ステップ 1]
2. [ステップ 2]
3. [ステップ 3]

**使用するクレデンシャル**: [CREDENTIALS.md のロール/ユーザー]

**開始 URL**: http://127.0.0.1:[ポート]

このテストを実行しますか? (y/n)

ユーザーから明示的な確認を得るまで続行しないでください。

ユーザーが拒否した場合:

  1. 何を異なるようにする必要があるかを尋ねます
  2. 指示に従って計画を調整します
  3. 再度確認を求めます

5. テストの実行

確認されたら、Playwright MCP を使用してテストを実行します。

ブラウザの起動 (headless)

playwright_browser_navigate url http://127.0.0.1:[ポート]

ログインが必要な場合

  1. スナップショットを撮って現在の状態を確認します
  2. メール/ユーザーとパスワードのフィールドを特定します
  3. CREDENTIALS.md のクレデンシャルでフォームに入力します
  4. フォームを送信します
  5. ログインが成功したことを確認します (スナップショット、成功要素の検索)

テストフローの実行

  1. 目的の機能に移動します
  2. 特定されたフローに従って要素を操作します
  3. 主要なポイントでスナップショットを撮ります
  4. 期待される結果を確認します

便利な 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/失敗: 理由]

**最終結果**:
[何が起こったかの説明、エラーがあったかどうか、観察された動作]

**エビデンス**:
- [撮影されたスクリーンショットまたは検証されたステップ]

一般的なユースケース

新しいフォームのテスト

  1. フォームのフィールドを特定します
  2. 有効なテストデータで入力します
  3. 送信して成功応答を確認します
  4. バリデーションをテストします (空のフィールド、無効な形式)

認証フローのテスト

  1. ログイン画面を確認します
  2. CREDENTIALS.md のクレデンシャルを使用します
  3. ログイン後のリダイレクトを確認します
  4. 認証されたユーザーのみに表示される要素を確認します

CRUD のテスト

  1. Create: 新しいレコードを作成し、リストに表示されることを確認します
  2. Read: 表示されたデータが正しいことを確認します
  3. Update: レコードを編集し、変更が永続化されることを確認します
  4. Delete: レコードを削除し、リストから消えることを確認します

Feature Toggle のテスト

  1. 機能をアクティブにする前の状態を確認します
  2. 機能をアクティブ/トリガーします
  3. アクティブ後の状態を確認します (UI が表示される、動作が変更される)

エラー処理

アプリケーションがロードされない場合

  1. サーバーが実行されていることを確認します
  2. URL とポートが正しいことを確認します
  3. ユーザーに報告します

ログインに失敗した場合

  1. CREDENTIALS.md のクレデンシャルを確認します
  2. フォームに正しいフィールドがあることを確認します
  3. 特定のエラーをユーザーに報告します

要素が見つからない場合

  1. スナップショットを撮って現在の状態を確認します
  2. 代替セレクターを探します
  3. それでも解決しない場合は、エビデンスとともにユーザーに報告します

コンソールエラーがある場合

  1. playwright_browser_console_messages を使用してエラーを取得します
  2. 結果レポートに含めます

重要な注意事項

  • ユーザーの邪魔にならないように、常に 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.md
  • testing/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:

  1. Detente y pregunta al usuario por las credenciales
  2. 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:
    1. Verificar si hay otro puerto comun (3000, 4200, 8080)
    2. 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:

  1. Pregunta que debe hacer diferente
  2. Ajusta el plan segun sus indicaciones
  3. 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

  1. Tomar snapshot para ver estado actual
  2. Identificar campos de email/usuario y password
  3. Completar formulario con credenciales del CREDENTIALS.md
  4. Enviar formulario
  5. Verificar login exitoso (snapshot, buscar elemento de exito)

Ejecutar Flujo de Prueba

  1. Navegar a la funcionalidad objetivo
  2. Interactuar con elementos segun el flujo identificado
  3. Tomar snapshots en puntos clave
  4. 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

  1. Identificar campos del formulario
  2. Completar con datos de prueba validos
  3. Enviar y verificar respuesta exitosa
  4. Probar validaciones (campos vacios, formatos invalidos)

Probar Flujo de Autenticacion

  1. Verificar pantalla de login
  2. Usar credenciales de CREDENTIALS.md
  3. Verificar redireccion post-login
  4. Verificar elementos visibles solo para usuarios autenticados

Probar CRUD

  1. Create: Crear nuevo registro, verificar aparicion en lista
  2. Read: Verificar datos mostrados correctamente
  3. Update: Editar registro, verificar cambios persistidos
  4. Delete: Eliminar registro, verificar desaparece de lista

Probar Feature Toggle

  1. Verificar estado antes de activar feature
  2. Activar/trigger la feature
  3. Verificar estado despues (UI visible, comportamiento cambiado)

Manejo de Errores

Si la aplicacion no carga

  1. Verificar que el servidor este corriendo
  2. Verificar URL y puerto correctos
  3. Reportar al usuario

Si el login falla

  1. Verificar credenciales en CREDENTIALS.md
  2. Verificar que el formulario tenga los campos correctos
  3. Reportar error especifico al usuario

Si un elemento no se encuentra

  1. Tomar snapshot para ver estado actual
  2. Buscar selectores alternativos
  3. Si persiste, reportar al usuario con evidencia

Si hay errores de consola

  1. Usar playwright_browser_console_messages para obtener errores
  2. 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