web-corders-vrt 0.1.3 → 0.1.5

package/.claude/settings.local.json

@@ -11,7 +11,12 @@
       "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/ppd_contents_h --no-open)",
       "Bash(open vrt-results/2026-03-02T05-02-45/report.html)",
       "Bash(open vrt-results/2026-03-02T06-41-44/report.html)",
-      "Bash(open vrt-results/2026-03-02T06-49-09/report.html)"
+      "Bash(open vrt-results/2026-03-02T06-49-09/report.html)",
+      "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/unext_mobile_a263 --no-open)",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''before:'', t.comparison.dimensions.beforeHeight, ''after:'', t.comparison.dimensions.afterHeight, ''aligned:'', t.comparison.alignmentUsed ?? false, ''shifted:'', t.comparison.shiftedRows ?? 0, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%''\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''width:'', t.comparison.dimensions.width, ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''aligned:'', t.comparison.alignmentUsed, ''shifted:'', t.comparison.shiftedRows, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%'', ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(open vrt-results/2026-03-02T07-22-33/report.html)"
     ]
   }
 }

package/README.md

@@ -2,27 +2,34 @@
 
 Webページのビジュアルリグレッションテスト (VRT) を行うCLIツール。
 
-本番環境と開発環境のスクリーンショットをピクセル単位で比較し、差分を検出する。テスト結果は人間向け（HTMLレポート）とLLM/Claude向け（JSONレポート + diff画像）の両方で出力される。
+本番環境と開発/プレビュー環境のスクリーンショットの差分を検出する。
+テスト結果は人間向け（HTMLレポート + diff画像）とLLM/Claude向け（JSONレポート）の両方で出力される。
 
 ## セットアップ
 
-インストール不要。`npx` で直接実行できる。初回のみ Playwright のブラウザが必要:
+初回のみ Playwright のブラウザが必要:
 
 ```bash
 npx playwright install chromium
 ```
 
+`init` コマンドで、Claude Codeのスキルファイル (`.claude/skills/web-corders-vrt/SKILL.md`) を自動生成できる。
+
+```bash
+npx web-corders-vrt init --refDomain https://example.com
+```
+
 ## 基本的な使い方
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://production.com \
   --after http://localhost:3000 \
   --paths /,/about,/pricing
 ```
 
-- `--before` — 比較元URL（本番環境）
-- `--after` — 比較先URL（開発環境 / ステージング）
+- `--reference` — リファレンスのプロトコル+ドメイン（本番環境）
+- `--after` — 比較するプロトコル+ドメイン（開発 / プレビュー環境）
 - `--paths` — テスト対象のページパス（カンマ区切り）
 
 実行すると `./vrt-results/` 以下にタイムスタンプ付きのディレクトリが生成され、スクリーンショット・diff画像・レポートが保存される。
@@ -34,10 +41,10 @@ vrt-results/2026-02-28T10-00-00/
 ├── report.json          # JSON レポート（Claude/LLM向け）
 ├── report.html          # HTML レポート（人間向け・ブラウザで開く）
 └── screenshots/
-    ├── top--sp--before.png
+    ├── top--sp--reference.png
     ├── top--sp--after.png
     ├── top--sp--diff.png
-    ├── top--pc--before.png
+    ├── top--pc--reference.png
     ├── top--pc--after.png
     └── top--pc--diff.png
 ```
@@ -62,30 +69,16 @@ vrt-results/2026-02-28T10-00-00/
         "diffPercentage": 2.35,
         "diffPixelCount": 12040,
       },
-      "diffRegions": [
-        {
-          "id": 1,
-          "boundingBox": { "x": 0, "y": 480, "width": 750, "height": 200 },
-          "locationHint": {
-            "verticalPosition": "upper",
-            "horizontalPosition": "full-width",
-            "fromTopPx": 480,
-            "estimatedElement": "Likely a hero section or banner",
-          },
-        },
-      ],
     },
   ],
 }
 ```
 
-`diffRegions` の `locationHint` は、差分がページのどの位置にあるかを示す。Claudeがこれを読むことで、修正すべきCSS/HTMLの場所を推定できる。
-
 ## オプション一覧
 
 | オプション           | デフォルト | 説明                                                                    |
 | -------------------- | ---------- | ----------------------------------------------------------------------- |
-| `--before <url>`     | （必須）   | 比較元URL（本番環境）                                                   |
+| `--reference <url>`  | （必須）   | リファレンスURL（本番環境）                                             |
 | `--after <url>`      | （必須）   | 比較先URL（開発環境 / ステージング）                                    |
 | `--paths <paths>`    | （必須）   | テスト対象のページパス（カンマ区切り）                                  |
 | `--threshold <n>`    | `0.1`      | 差分許容率（%）。これ以下の差分はPASS扱い                               |
@@ -95,57 +88,50 @@ vrt-results/2026-02-28T10-00-00/
 
 ビューポートはSP（375x812）とPC（1440x900）の2種類で固定。フルページスクリーンショットを取得し、結果は `./vrt-results/` に出力される。
 
+## Claude Code連携
+
+### スキルファイルの仕組み
+
+`init`で生成される `.claude/skills/web-corders-vrt/SKILL.md` には以下の手順が記述される:
+
+1. 開発サーバーを起動
+2. VRTコマンドを実行
+3. `report.json` を読んで差分を確認
+4. diff画像を視覚的に確認
+5. diff画像からCSS/HTMLの修正箇所を特定
+6. コードを修正
+7. 再度VRTを実行して確認
+
+以降はCaludeに「VRTして」とか言うだけで使ってくれる　はず。
+
 ## 実用的な例
 
 ### 動的要素を隠してテスト
 
-広告バナーやクッキー同意バーなど、毎回変わる要素を非表示にする:
+テスト対象外にしたい要素を非表示にする。
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --hide ".cookie-banner,.ad-slot,[data-testid='live-chat']"
 ```
 
+Next.jsツールバーはデフォルトで非表示。
+
 ### 差分許容率を緩めに設定
 
 フォントレンダリング差異などを無視したい場合:
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --threshold 1
 ```
 
-## Claude Code連携
-
-`vrt init` コマンドで、Claude Codeのスキルファイル (`.claude/commands/vrt.md`) を自動生成できる。
-
-```bash
-npx web-corders-vrt init \
-  --before https://example.com \
-  --after http://localhost:3000 \
-  --paths /,/about,/pricing
-```
-
-生成されたファイルをリポジトリにコミットすると、Claude Code上で `/vrt` コマンドを実行するだけで、VRTの実行 → 結果の読み取り → 差分箇所の特定 → コード修正 → 再テストまでを自律的に行えるようになる。
-
-### スキルファイルの仕組み
-
-生成される `.claude/commands/vrt.md` には以下の手順が記述される:
-
-1. 開発サーバーを起動
-2. VRTコマンドを実行
-3. `report.json` を読んで差分を確認
-4. diff画像を視覚的に確認
-5. `locationHint` からCSS/HTMLの修正箇所を特定
-6. コードを修正
-7. 再度VRTを実行して確認
-
 ## 広告・計測系スクリプトのブロック
 
 以下のドメインへのリクエストは自動的にブロックされる。見た目のテストに不要であり、ページ読み込み速度を改善するため。

package/bin/vrt.ts

@@ -14,7 +14,7 @@ program
 program
   .command("run")
   .description("Run visual regression tests")
-  .requiredOption("--before <url>", "Baseline URL (production)")
+  .requiredOption("--reference <url>", "Reference URL (production)")
   .requiredOption("--after <url>", "Comparison URL (local/staging)")
   .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
   .option("--threshold <n>", "Diff tolerance percentage", "0.1")
@@ -26,7 +26,7 @@ program
       const parsed = cliOptionsSchema.parse(rawOptions);
 
       const options: ResolvedOptions = {
-        beforeUrl: parsed.before,
+        referenceUrl: parsed.reference,
         afterUrl: parsed.after,
         paths: parsed.paths,
         threshold: parsed.threshold,
@@ -50,22 +50,12 @@ program
 program
   .command("init")
   .description(
-    "Generate .claude/commands/vrt.md skill file for this repository",
+    "Generate .claude/skills/web-corders-vrt/SKILL.md for this repository",
   )
-  .requiredOption("--before <url>", "Baseline URL (production)")
-  .requiredOption("--after <url>", "Comparison URL (local/staging)")
-  .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
-  .option("--threshold <n>", "Diff tolerance percentage", "0.1")
-  .option("--hide <selectors>", "CSS selectors to hide (comma-separated)")
+  .requiredOption("--refDomain <domain>", "Reference domain URL (production)")
   .action(async (options) => {
     try {
-      await runInit({
-        before: options.before,
-        after: options.after,
-        paths: options.paths,
-        threshold: parseFloat(options.threshold),
-        hide: options.hide,
-      });
+      await runInit({ refDomain: options.refDomain });
     } catch (error) {
       if (error instanceof Error) {
         console.error(`Error: ${error.message}`);