本文へ移動
cccskills
無料GitHub で公開日本語紹介

replay-qa

MCPツールの操作をシナリオどおりに再生し、カードの表示やエラーを画面と記録で確認して、変更や不具合を検証します。

原文原文の説明を見る

Replay scripted MCP tool calls against an isolated DevSpace server and inspect the rendered cards in a real MCP Apps host with agent-browser. Use to verify a change, reproduce an issue, review a PR's UI or tool behavior, or QA any checkout without manual testing.

Waishnav/devspaceスター 5,308(GitHub 5,308 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 変更後のカード表示を確認したいとき
  • 報告された不具合を再現したいとき
  • プルリクエストの動作を確認したいとき
  • 別チェックアウトで同じQAをしたいとき

日本語での紹介

できること

pnpm qaでシナリオに記述したMCPツール呼び出しを、新しいDevSpaceサーバーに対して実行し、ローカルのMCP Appsホストでカードを表示します。各実行は設定やSQLite状態、作業ツリーなどを分けて行い、ステップごとの成否、カードの状態、スクリーンショット、ブラウザーの記録を保存します。シナリオを選んで実行したり、別のチェックアウトを指定したりでき、対話形式でカードを操作することもできます。レポートに加えてスクリーンショットを確認し、必要ならベース版と変更版で同じシナリオを実行して結果を比べます。

こんなときに便利

画面を手作業で確認する代わりに、決まった操作を繰り返して変更を検証したいときに使えます。不具合の再現や、プルリクエストでのUI・ツール動作の確認にも向いています。シナリオをJSONファイルにしておけば、確認手順を再利用できます。

使い方の例

  • 「すべてのQAシナリオを実行して、失敗したステップをまとめて」
  • 「このチェックアウトでcodex-edit-reviewを実行し、カードのスクリーンショットを確認して」
  • 「ベース版とプルリクエスト版で同じシナリオを実行して、再現するか比べて」

注意点

実行にはpnpm qaやagent-browserなど、記載されたローカル環境のコマンドを使います。ローカルホストはMCP Appsプロトコルに沿いますが、ChatGPTやClaudeそのものではありません。ホスト固有の挙動の確認には実際のホストが必要です。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(1)

  • SKILL.md4.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Replay QA

pnpm qa replays scenario tool calls against a fresh DevSpace server, renders every card in a local MCP Apps host, and captures evidence with agent-browser.

Each run is isolated: its own HOME, config, SQLite state, worktree root, allowed root, and Git fixture under .devspace-dev/qa/runs/<timestamp>/<scenario>/. Ports are allocated dynamically, so runs never replace an existing process.

Run

pnpm qa --list                       # scenarios and descriptions
pnpm qa                              # every scenario
pnpm qa codex-edit-review            # one scenario
pnpm qa --theme dark codex-edit-review
pnpm qa --bare-host codex-edit-review   # host sends a theme but no style variables
pnpm qa --checkout ../other-worktree    # QA another checkout with this harness
pnpm qa --no-build ...                  # skip `pnpm build:app` in the target checkout

The exit code is non-zero when a step fails its expectations, a card does not initialize or render, or the page reports errors.

Each run directory contains:

  • report.md: pass/fail per step, card state and height, failures, and screenshot paths. Read this first.
  • transcript.json: the tool list, every request and response, UI resources, and calls the cards made back to the server.
  • server.log: the DevSpace server's JSON log.
  • artifacts/: a full-page screenshot, one screenshot per card, an accessibility snapshot, the browser console, and errors.json.

Look at the screenshots before reporting UI behavior. A passing report means that cards rendered, not that they look right.

Interact with cards

pnpm qa --serve --no-browser codex-edit-review   # prints the host URL and keeps running
export AGENT_BROWSER_SESSION=devspace-qa
agent-browser open "<host url>"
agent-browser wait --fn "window.__devspaceQa?.settled === true"
agent-browser snapshot -i       # card iframes appear inline with their buttons
agent-browser click @e12        # e.g. expand a file in the show_changes card
agent-browser screenshot "#step-3" /tmp/after.png
agent-browser close

Stop the serve process when finished. Card-initiated tool calls go through the host's same-origin /api/call, and are appended to transcript.json and shown under the card.

Write a scenario

Add scripts/qa/scenarios/<name>.json:

{
  "description": "What this proves.",
  "config": { "tools": { "mode": "claude" } },
  "host": { "clientName": "ChatGPT", "userAgent": "openai-mcp/1.0.0" },
  "fixture": {
    "files": { "README.md": "committed\n" },
    "dirty": { "README.md": "uncommitted\n" }
  },
  "steps": [
    { "tool": "open_workspace", "arguments": { "path": "{{fixture}}" } },
    {
      "tool": "exec_command",
      "arguments": { "workspace_id": "{{workspace_id}}", "cmd": "git status --short" },
      "expect": { "text": ["README.md"] }
    }
  ]
}
  • config is deep-merged into the generated config.jsonc, and env adds server environment variables.
  • host sets the OAuth client_name and the HTTP User-Agent the simulated host presents.
  • {{workspace_id}} is the most recent workspace returned by a step.
  • Make each fixture change through tool calls whenever possible, so the scenario exercises the real path.

Comparing base and PR

Create a worktree for each revision, then run the same scenario with --checkout pointing at each one. Report reproduces on base, fixed on PR, or not reproduced. Do not infer this from the diff.

Limits

The local host follows the MCP Apps protocol: a separate sandbox origin, CSP taken from resource metadata, host context, and server tools. It is still not ChatGPT or Claude. Use the real host when a claim depends on host-specific behavior such as window.openai globals, connector caching, OAuth reconnects, or display modes the local host does not implement.

Attach evidence to a pull request

scripts/qa/publish-evidence.sh <pr-number> <run-dir>/artifacts/page.png <run-dir>/artifacts/step-3-show_changes.png

This pushes the images to the orphan branch qa-evidence/pr-<number> and prints Markdown image links. Paste them into the PR body or a comment with the scenario names and the pass/fail lines from report.md.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

setup-qa

無料概要あり

DevSpaceの変更をローカルで手動検証するため、設定や認証情報を作業用に複製し、専用環境の初期化から画面のビルド、起動、リセットまで案内します。

  • 作業ツリーでローカル検証したいとき
  • ChatGPTの画面変更を確認したいとき
  • 検証用の状態を作り直したいとき
Waishnav/devspace5,3082026年10月30日 更新

subagents

無料概要あり

コーディングや調査、レビュー、検証の一部をDevSpaceの別エージェントに任せます。依頼先の選択から結果の確認、同じ担当への追加依頼まで扱うスキルです。

  • 独立した視点で変更をレビューしたいとき
  • コードの一部分を調査したいとき
  • 条件が明確な修正を任せたいとき
Waishnav/devspace5,3082026年10月30日 更新

workflows

無料概要あり

繰り返し使う複数エージェントの作業手順を、プロジェクトの名前付き設定やスクリプトから実行し、進行状況や結果を確認します。

  • 定型の複数エージェント作業を実行したいとき
  • ワークフローの進み具合を確認したいとき
  • 中断した処理を履歴から再開したいとき
Waishnav/devspace5,3082026年10月30日 更新

Waishnav のスキルをすべて見る

このスキルの問題を報告する