Community画像github.com

wreck-it

アプリケーションをユーザーより先に破壊します。Playwright MCP によるブラウザ操作を駆使し、ペルソナテスト、ファジング、負荷テスト、発見・追跡までを自動化するCLIツールです。

wreck-it とは?

wreck-it は、開発中のWebアプリケーションを対象に、徹底的なテストとバグ発見を行うためのAIエージェントスキルです。ローカル環境のみで動作し、実際のユーザーより先に問題を見つけることを目的としています。セットアップ、ページ探索、スイープ(自動操作テスト)、ファジング(APIへのランダム入力テスト)、ページ速度・負荷テスト、バグの再現・追跡、スコアリング、レポート生成、回帰テストのコード生成までをパイプラインとして実行します。ブラウザ操作には Playwright MCP を使用し、テストアカウントと偽装データのみを使用するルールが徹底されています。機能を絞った集中実行モードも備えており、特定のフローだけを迅速にテストできます。Claude Code や Cursor などのAIエージェントプラットフォームで利用でき、見つかったバグはスクリーンショット付きで報告され、修正対象を明確に提示します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/miyannishar/wreck-it/tree/main/skills/wreck-it

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

プレビュー

スキル README より

WR-007: 数量3で小計が正しくない

ドキュメント

wreck-it: ユーザーより先にアプリを壊せ

WRECK は以下を意味します: npx @miyanishar/wreck-it。CLIは決定論的な作業(セットアップ、発見、スイープ、ファジング、ページ速度、負荷、発見、スコア、レポート、テスト)を行います。あなたはPlaywright MCPを通じてブラウザを操作し、ペルソナを演じ、何がバグかを判断し、それをコードまで追跡します。

レポートのみ。実行中はバグを修正しないでください。ユーザーがレポート後に依頼した場合のみ修正します。

ルール(常に守る)

  • ローカルのみ。 CLIは非ローカルターゲットを拒否します。ユーザーがリモートターゲットを所有していると言った場合のみ --i-own-this を渡します。
  • テストデータのみ。 テストアカウント、架空の名前、実際の個人情報や決済データは絶対に使用しません。作成するものには wreck-it … と名前を付け、記録します: WRECK run created "<何を>" --by <ペルソナ> (レポートにクリーンアップ用としてリストされます)。
  • 書き込む前に確認する。 プリフライトの safety.ask が質問をリストします: ホストされた(多くの場合本番)データベース、ライブのStripeキー、読み取り可能な受信トレイがないメール、有料のAI/SMS通話。これらすべてを通常ユーザーパスの前に一度のメッセージで質問し、各「はい」を .wreck-it/config.json に記録します(allowRemoteDb、testEmail、allowSideEffects)。データベースが本番環境の場合は、アプリを開発プロジェクトに向けるよう提案して停止することを申し出ます。
  • お金とメッセージ。 Stripeテストキー(カード 4242 4242 4242 4242)でのみ支払います。ライブキーの場合は決済ステップで停止します。AI/SMS/メールアクションは、許可されていない限りフローごとに最大2~3回のみトリガーします。fuzz と load はこれらのエンドポイントを自動的にスキップします。
  • メール。 WRECK email new からのアドレスでサインアップします。example.com は使用しません。ローカルの受信トレイがある場合は自分でリンクを読みます(WRECK email read --to <アドレス>)。それ以外の場合はユーザーにリンクを尋ねるか、「スキップ: 読み取り可能な受信トレイなし」とマークします。
  • 共有ログインを維持する。 他のステージが使用する保存済みセッションのアカウントからログアウトしたり、パスワードを削除・変更したりしないでください。Supabaseや多くのアプリでは、ログアウトするとそのユーザーのすべてのセッションが終了します。ログアウトと削除のテストは最後に、使い捨てアカウントで行います。

集中実行(1つの機能)

ユーザーが1つの機能やフローを指定した場合(「チェックアウトをテストして」「/wreck focus signup」)、その機能のみを数分でテストします:

  1. WRECK run init --focus "<機能>"、WRECK discover、WRECK setup --dry-run、WRECK preflight --wait 5 をステージ1と同様に実行します。ログイン(ステージ2)は、機能が必要な場合のみ行います。safety.ask の質問は、機能がデータを書き込む場合のみ行います。
  2. スコープを決める。 discovery.json とコードから、機能のページとAPIルートをリストします(例: /cart、/checkout、/api/cart、/api/orders)。ユーザーにスコープを1行で伝えます。
  3. テストする(該当しないペルソナやステージはスキップし、skipped とマーク):
    • その機能を通常ユーザーとして、次にスマートフォンを使う急いでいる初心者として(ダブルクリック、間違った形式、途中で戻るなど)ウォークスルーします。エクスプロアスキルのチェックリストの該当行(合計、永続性、削除、エラーメッセージ)を確認します。
    • WRECK sweep --record --only <ページ…> と WRECK fuzz --record --only <APIルート…> を実行します。
    • カオススキルの悪意のある入力、二重送信、ナビゲーションとネットワーク障害を、この機能のフォームのみに適用します。
    • 機能に独自のページがある場合は WRECK perf --record <ページ…> を実行します。
  4. すべての発見を再現して追跡し(ステージ9)、次に WRECK report && WRECK gen-tests を実行します。レポートは集中実行としてラベル付けされます: 「readiness」ではなく「feature score」と表示します。

パイプライン

ステージを WRECK run stage <ステージ> running|done|skipped|failed でマークします。発見は進むにつれて保存されます。

1. セットアップとプリフライト

WRECK run init               # --fresh で前回の実行の発見を破棄
WRECK discover
WRECK setup --dry-run        # 何がインストール済みで何が不足しているか
WRECK preflight --wait 5
  • setup --dry-run がインストールすべきものをリストした場合、それを表示して一度確認します。承諾があれば WRECK setup を実行します。MCPサーバーが追加された場合、ユーザーがエージェントを再起動するまでブラウザツールは表示されません: その旨を伝え、その間にCLIのみの実行を提案します。
  • ブラウザツールが「Browser … is not installed」と表示した場合: WRECK setup --skip playwright-mcp devtools-mcp を実行し、再試行します。
  • プリフライト終了コード4(アプリに到達不可): バックグラウンドで devScript を起動し、WRECK preflight --wait 60 を実行します。終了コード3(ターゲットが拒否): 停止して説明します。
  • .wreck-it/config.json がない場合: {"baseUrl": "http://localhost:3000"} を作成します(実際のポートを使用)。
  • CLIのみの実行(ブラウザツールなし): sweep --record、fuzz --record、perf --record、ステージ7とレポートを実行します。personas、normal、explore、chaos はスキップとマークし、理由を説明します。アプリをクリックして操作したふりをしないでください。

2. ログイン

  • Google、GitHub、SSO、ホスト型サインイン、マジックリンク、2要素認証(discovery.json の auth.sso が設定されているか、パスワードフィールドがない場合): ユーザーに「ブラウザウィンドウが開きます。テストユーザーとしてログインしてください。ログインすると自動的に閉じます。」と伝えます。WRECK login を実行します(最大10分間待機します。長いタイムアウトを使用します)。出力は check: valid となるはずです。2ユーザーチェックの場合は WRECK login --label second を依頼します。新規アカウントチェックの場合は --label fresh を依頼するか、スキップとマークします。
  • メールとパスワード: テストアカウントを作成するか(またはユーザーのものを使用)、設定に "accounts": [{"label": "main", "email": "…", "password": "…"}] を追加します。
  • 以降: sweep、fuzz、perf は自動的にログインします。ブラウザでは、ログインが必要なページにアクセスする前に browser_set_storage_state を {"filename": ".wreck-it/auth/<ラベル>.json"} で呼び出します。ログイン状態で記録された発見には "auth": "<ラベル>" が付与され、ログイン後のステップが記録されます。
  • プリフライトまたは WRECK login --check が expired と表示した場合、ユーザーに再度 login を実行するよう依頼します。

3. ペルソナ

wreck-personas スキルを使用します。

4–5. 通常ユーザー、次にペルソナ

wreck-explore スキルを使用します。Claude Codeとプラグインでは、最大3つのペルソナを wreck-persona サブエージェントとして並列実行します(各ブラウザ wreck-browser-1..3)。その間あなた自身はブラウザを使用せず、すべてのペルソナが終了するのを待ってからステージ6に進みます。他のエージェントでは、ペルソナを1つずつ実行します。

6. カオス

wreck-chaos スキルを使用します(スイープ、APIファジング、悪意のある入力、二重送信、ナビゲーション、ネットワーク障害、セッション改ざん、キーボード)。

7. ページ速度と負荷

wreck-load スキルを使用します。

8. セキュリティ

v1ではなし: WRECK run stage security skipped を実行します。

9. 再現、次に追跡

WRECK finding list: すべての ? の発見を新しいコンテキストで再生し、再度表示された場合は reproduced: true を設定します(再現されなかった発見はスコアになりません)。次に、source がないすべての再現された発見に対して wreck-trace スキルを使用します。

10. レポート

レポートを生成する前に、再現された各ブラウザ発見について、実際の障害を示すスクリーンショットがあるか確認します。CLIスイープの発見も再確認します。スクリーンショットのガイダンスは references/recording-findings.md に従います。保存された画像ファイルが存在することを確認し、スクリーンショット不足の警告を解決します。APIのみまたは負荷の発見には、代わりにリクエスト/メトリクス証拠を使用できます。スクリーンショットが該当しない場合やキャプチャできなかった場合はその旨を伝えます。

最後の発見更新後にレポートとテストを生成します。その後発見を変更した場合は、結果を提示する前に両方を再生成します。references/regression-tests.md を読みます:保存されたスペックの警告を検査し、それらのテストを更新された発見と調整します。再生成はエージェントの編集とフィクスチャを意図的に保持します。バグのあるアプリに対してサポートされているスペックを実行し、失敗が意図したアサーションに達することを確認します。スキップ、セットアップの失敗、タイムアウト、または未検証のテストはレポートで開示します。修正済みコピーが存在する場合は、同じスペックをそれに対しても確認します。

WRECK report && WRECK gen-tests && WRECK run stage report done

探索中(ステージ4~6)

  • references/recording-findings.md の通りにバグを正確に記録します: WRECK finding add、構造化されたステップ、ロール/ラベルターゲット、正しい動作を説明するアサーション。その後、新しいコンテキストで再生し、reproduced: true を設定します。
  • 各ナビゲーションの後、browser_evaluate を使用して奇妙さスクリプト(WRECK oddity-script、1回)を実行し、browser_console_messages と browser_network_requests(4xx/5xx)を確認します。また、スクリプトが判断できないもの(崩れたレイアウト、ガイダンスのない空の状態、無限スピナー、動作しないボタン、一貫性のない日付や価格)も探します。実際のものを oddity として記録します。
  • カバレッジを記録: WRECK run visit <ルート> --persona <名前>。

最終メッセージ

簡潔に: スコアとバンド、「最初にこれを修正」する発見とその file:line、重大度別の件数、未完了のステージ、パス .wreck-it/report.html、.wreck-it/report.md、tests/wreck-it/、および npx playwright test tests/wreck-it。トップの発見を修正することを提案し、承諾を待ちます。

バグを提示する際は、発見IDと説明の横に関連するスクリーンショットを添付します。チャットの画像添付機能または実際の保存ファイルパスを使用したMarkdown画像を使用します。レポートパスだけでは証拠を示せません。トップの発見をスクリーンショットとともにチャットに提示し、完全なセットはレポートに残します。画像が利用できない場合や該当しない場合は、その理由を説明し、代わりにリクエスト、トレース、またはメトリクスへのリンクを提供します。shots/... パスは .wreck-it/ からの相対パスで解決します。

チャットに含める各ブラウザ発見には次の形式を使用します(例を実際の発見と確認済みの絶対画像パスに置き換えてください):

**WR-007 — カートの小計が数量を無視** (`lib/cart.ts:19`)
79.99ドルの商品が3点で合計239.97ドルになるはずが、ページには79.99ドルと表示されています。
![WR-007: 数量3で小計が正しくない](/absolute/project/.wreck-it/shots/WR-007-cart.png)

送信する前に、提示しようとしている各画像を開き、実際に表示されている状態と値を説明します。提示する各ブラウザ発見に画像添付または画像埋め込みがあることを確認します。画像ファイル名のリストやスクリーンショットが保存されているという記述は添付ではありません。より少ない発見を証拠とともに提示し、完全なレポートへのリンクを添付して、残りのブラウザ発見はチャットにイラストなしリストを追加する代わりにそのレポートに残すことで、応答を簡潔に保ちます。

関連スキル