mcpField
Q
qa-web-test

qa-web-test

github.com/delexwテスト・品質243 回インストール31 週間前に更新
リポジトリ

qa-web-test について

PinchTab を使って対象 URL をブラウザー上で検査する Web QA スキルです。スクリーンショットを撮影し、レスポンシブレイアウトや CSS を確認して、合否を含むレポートを作成します。

主な機能

  1. 01対象 URL への移動
  2. 02選択したビューポート幅のテスト
  3. 03スクリーンショットの撮影
  4. 04CSS とレイアウトの検査
  5. 05QA レポートの作成

活用シーン

  1. 01異なるビューポート幅でのサイト確認
  2. 02レイアウトのはみ出しやスタイルの調査
  3. 03ビジュアル QA 結果の記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/delexw/claude-code-misc --skill qa-web-test

インストール後、Claude Code で/qa-web-testを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
breakpoints.md
css-inspection.md
steps/
step-01-connect.md
step-02-breakpoints.md
step-03-emulate-and-capture.md
step-04-css-inspection.md
step-04b-visual-inspection.md
step-05-report.md

詳細

PinchTab による QA Web テスト

すべてのブラウザー操作（ナビゲーション、スクリーンショット、ビューポートのエミュレーション、DOM の検査）に Skill("pinchtab") を使用します。必要な内容を説明すれば、pinchtab が詳細を処理します。

入力

生の引数：$ARGUMENTS

引数から以下を推測します：

  • TARGET_URL：テストする URL
  • OUT_DIR：QA レポートとスクリーンショットの出力ディレクトリ。指定がない場合は ./qa-reports

出力先

  • OUT_DIR/qa-report-{timestamp}.md を作成または更新します
  • スクリーンショットは OUT_DIR/screenshots/ に保存します
  • ディレクトリが存在することを確認するため、書き込み前に mkdir -p OUT_DIR/screenshots を実行します。

ワークフロー

以下の手順を順番に実行します。詳細な手順については、各ステップのファイルを読んでください。

  1. 接続して移動 — 対象 URL に移動します（認証の確認と、必要に応じたログインを含みます）
  2. ブレークポイントを決定 — テストするビューポート幅を選択します
  3. エミュレートしてキャプチャ — ビューポートを設定し、スクリーンショットを撮影して寸法を検査します
  4. CSS の検査 — 計算済みスタイルとコンテナークエリを検査します
  5. ビジュアルデザインの検査 — タイポグラフィ、色、間隔、境界線、表示状態を確認します
  6. 結果をレポート — 合否テーブルで所見をまとめます

参照ファイル

参照先読み込むタイミング
references/breakpoints.md一般的なブレークポイント値、コンテナークエリとメディアクエリの注意点
references/css-inspection.mdオーバーフロー検出、グリッド／フレックスの検査、DOM の走査に使う JS スニペット

コメント

Markdown 対応