web-corders-vrt 0.1.4 → 0.1.7

package/src/schemas.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const cliOptionsSchema = z.object({
-  before: z.string().url("--before must be a valid URL"),
+  reference: z.string().url("--reference must be a valid URL"),
   after: z.string().url("--after must be a valid URL"),
   paths: z.string().transform((val) => val.split(",").map((p) => p.trim())),
   threshold: z.coerce.number().min(0).max(100).default(0.1),
@@ -9,8 +9,6 @@ export const cliOptionsSchema = z.object({
     .string()
     .optional()
     .transform((val) => (val ? val.split(",").map((s) => s.trim()) : [])),
-  html: z.boolean().default(true),
-  open: z.boolean().default(true),
 });
 
 export type CliOptions = z.input<typeof cliOptionsSchema>;

package/src/templates/SKILL-TEMPLATE.md

@@ -0,0 +1,34 @@
+---
+name: web-corders-vrt
+description: WEB用VRT(Visual Regression Test)ツール。本番ドメインとローカル開発またはプレビュードメインの間で、特定パスのビジュアル差分を検出する。
+---
+
+## 使い方
+
+```bash
+npx web-corders-vrt run \
+  --reference ${referenceDomain} \
+  --after <開発環境のドメイン|ユーザーから指示がない場合はhttp://localhost:3000> \
+  --paths <テスト対象のパス（カンマ区切り）> \
+```
+
+## 手順
+
+1. ユーザーから比較対象のドメインを指定された場合、それに従う。指示がない場合、afterは開発サーバーとし、起動していなければ `npm run dev` で起動して待機する。ここで起動したドメインとプロトコルをafterのドメインとする。
+2. 上記のコマンドでVRTを実行する（`--paths` はタスクに応じて設定する）
+3. `./vrt-results/` 内の最新ディレクトリにある `report.json` を読む
+4. `status: "fail"` のテスト結果に注目する
+5. 該当するdiff画像（`*--diff.png`）をReadツールで視覚的に確認する
+6. diff画像から修正すべきCSSやHTMLの場所を特定できるなら修正にはいる。再度VRTを実行して修正が反映されたことを確認する
+7. 修正が不可能ならユーザーにその旨を伝え、レポートが出来たことを伝える
+
+## オプション
+
+| オプション           | 説明                                        |
+| -------------------- | ------------------------------------------- |
+| `--reference <url>`  | リファレンスプロトコル+ドメイン（本番環境） |
+| `--after <url>`      | 比較先Uプロトコル+ドメイン（開発環境）      |
+| `--paths <paths>`    | テスト対象のページパス（カンマ区切り）      |
+| `--threshold <n>`    | 差分許容率（%）。デフォルト: 0.1            |
+| `--hide <selectors>` | 非表示にするCSSセレクタ（カンマ区切り）     |
+| `--no-open`          | HTMLレポートをブラウザで開かない            |

package/src/templates/report.html

@@ -13,7 +13,7 @@
       <h1>web-corders-vrt</h1>
       <div class="meta">
         {{TIMESTAMP}} | Duration: {{DURATION}}s<br />
-        Before: {{BEFORE_URL}} → After: {{AFTER_URL}}
+        Reference: {{REFERENCE_URL}} → After: {{AFTER_URL}}
       </div>
     </div>
     <div class="summary">

package/src/templates/types.d.ts

@@ -6,3 +6,7 @@ declare module "*.css" {
   const content: string;
   export default content;
 }
+declare module "*.md" {
+  const content: string;
+  export default content;
+}

package/src/types.ts

@@ -3,7 +3,7 @@ export interface VrtReport {
   version: "1.0";
   meta: {
     timestamp: string;
-    beforeUrl: string;
+    referenceUrl: string;
     afterUrl: string;
     duration: number;
     command: string;
@@ -24,7 +24,7 @@ export interface VrtTestResult {
     path: string;
     name: string;
     url: {
-      before: string;
+      reference: string;
       after: string;
     };
   };
@@ -42,12 +42,12 @@ export interface VrtTestResult {
     dimensions: {
       width: number;
       height: number;
-      beforeHeight: number;
+      referenceHeight: number;
       afterHeight: number;
     };
   };
   screenshots: {
-    before: string;
+    reference: string;
     after: string;
     diff: string;
   };
@@ -59,13 +59,11 @@ export type TestStatus = "pass" | "fail" | "error";
 
 /** CLI実行時の解決済みオプション */
 export interface ResolvedOptions {
-  beforeUrl: string;
+  referenceUrl: string;
   afterUrl: string;
   paths: string[];
   threshold: number;
   hideSelectors: string[];
-  html: boolean;
-  open: boolean;
 }
 
 /** スクリーンショット結果 */
@@ -88,7 +86,7 @@ export interface ComparisonResult {
   dimensions: {
     width: number;
     height: number;
-    beforeHeight: number;
+    referenceHeight: number;
     afterHeight: number;
   };
 }

package/test/comparator.test.ts

@@ -85,7 +85,7 @@ describe("compareImages", () => {
   });
 
   it("一部だけ異なる画像の場合、差分率が正しく計算される", () => {
-    const before = createSolidPng(100, 100, 255, 255, 255);
+    const reference = createSolidPng(100, 100, 255, 255, 255);
     // 右下10x10だけ赤にする
     const after = createPngWithRegion(100, 100, 255, 255, 255, {
       x: 90,
@@ -97,7 +97,7 @@ describe("compareImages", () => {
       b: 0,
     });
 
-    const result = compareImages(before, after);
+    const result = compareImages(reference, after);
 
     expect(result.diffCount).toBeGreaterThan(0);
     // 10*10=100 / 100*100=10000 = 1%
@@ -112,14 +112,14 @@ describe("compareImages", () => {
 
     expect(result.dimensions.width).toBe(100);
     expect(result.dimensions.height).toBe(100);
-    expect(result.dimensions.beforeHeight).toBe(50);
+    expect(result.dimensions.referenceHeight).toBe(50);
     expect(result.dimensions.afterHeight).toBe(100);
     // 白でパディングされるので一部は同じ、拡張部分も白=白で差分なし
     expect(result.diffCount).toBe(0);
   });
 
   it("threshold以下の差分はpassになる", () => {
-    const before = createSolidPng(100, 100, 255, 255, 255);
+    const reference = createSolidPng(100, 100, 255, 255, 255);
     // 1ピクセルだけ微妙に違う
     const afterPng = new PNG({ width: 100, height: 100 });
     for (let i = 0; i < afterPng.data.length; i += 4) {
@@ -132,7 +132,7 @@ describe("compareImages", () => {
     afterPng.data[0] = 200;
     const after = PNG.sync.write(afterPng);
 
-    const result = compareImages(before, after, 1.0); // threshold 1%
+    const result = compareImages(reference, after, 1.0); // threshold 1%
     // 1px / 10000px = 0.01% < 1%
     expect(result.passed).toBe(true);
   });

package/tsup.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   loader: {
     ".html": "text",
     ".css": "text",
+    ".md": "text",
   },
   banner: {
     js: "#!/usr/bin/env node",