<p>Gemini CLIにPlaywrightを使ったリダイレクトチェッカーを生成させるために作成したGEMINI.mdの指示書記録です。</p><p>実装コードではなくGEMINI.mdにどんな指示を書き、どのような流れで完成させたかをまとめています。</p><h2 id="h31fc5cbc4a">事前準備</h2><ul><li><strong>GEMINI.md</strong>：実装に必要な指示をまとめる</li><li><strong>CSVデータ</strong>：リダイレクト元とリダイレクト先のURL一覧</li><li><strong>.env</strong>：リダイレクト元ドメインとリダイレクト先ドメインの設定</li><li><strong>要件整理</strong>：<ul><li>一度にテスト可能な実行ファイル</li><li>成功・失敗をログとして出力</li><li>ドメインが変わっても使い回し可能</li></ul></li></ul><h2 id="heb08db12e3">期待する成果物</h2><ul><li>一気にテストできる実行ファイル</li><li>成功・失敗のログ</li><li>ドメインが変わっても使いまわし可能</li></ul><h2 id="h7921b37509">試した流れ</h2><ol><li>Gemini CLIにGEMINI.mdを読み込ませ、実装を依頼</li><li>出来上がったコードをテスト実行</li><li>わざと失敗するデータを入れて再実行</li><li>失敗が検出されなかったため、失敗時の処理を追加指示</li><li>再テストし、失敗も正しく判定されることを確認</li><li>追加・変更した内容をGEMINI.mdに反映するよう指示</li><li>完成</li></ol>

# Basic rule
- デフォルトの言語を日本語とする。

# 301リダイレクトチェッカー

## 1. プロジェクト概要

このプロジェクトは、`list/redirect.csv` に定義されたURLリストに基づき、Webサイトの301リダイレクトが正しく設定されているかを自動で検証します。

Playwrightを利用して実際にブラウザで各URLにアクセスし、リダイレクト先が期待通りであるかを確認します。

## 2. 必要な設定

テストを実行する前に、以下の2つのファイルを設定する必要があります。

### a. `.env` ファイル (環境変数)

リダイレクト元とリダイレクト先のドメインを指定します。このファイルが存在しない場合、またはドメインが設定されていない場合は、テストは実行されません。

**例:**
```
SOURCE_DOMAIN=https://example.com
TARGET_DOMAIN=https://new-example.com
```

### b. `list/redirect.csv` ファイル (チェック対象リスト)

チェックしたいURLのパスをCSV形式で記述します。

- **1列目:** リダイレクト元のパス
- **2列目:** 期待されるリダイレクト先のパス

**例:**
```csv
/old-page-1,/new-page-1/
/old-page-2,/new-page-2/
```

## 3. 実行方法

プロジェクトのルートディレクトリで以下のコマンドを実行すると、リダイレクトチェックが開始されます。

```bash
node check-redirects.js
```

## 4. 処理の流れ

1.  `npm install` で `playwright` と `dotenv` パッケージをインストールします。(初回のみ)
2.  `.env` ファイルから `SOURCE_DOMAIN` と `TARGET_DOMAIN` を読み込みます。
3.  `list/redirect.csv` からリダイレクトのリストを1行ずつ読み取ります。
4.  各行について、以下の処理を順に実行します。
    - **リダイレクト元URL:** `${SOURCE_DOMAIN}` + `(CSVの1列目のパス)`
    - **期待されるリダイレクト先URL:** `${TARGET_DOMAIN}` + `(CSVの2列目のパス)`
5.  Playwrightを使い、ヘッドレスブラウザでリダイレクト元URLにアクセスします。
6.  実際に遷移した先のURLと、期待されるリダイレクト先URLを比較し、成否を判定します。

## 5. 結果の確認

実行結果は、コンソールに出力されると同時に `result.txt` ファイルに保存されます。

- **[成功]**: リダイレクトが期待通りに機能した場合。
- **[失敗]**: リダイレクト先が期待と異なった場合。
- **[エラー]**: URLへのアクセス中に問題が発生した場合。

### 停止条件

テスト中に **3件連続で** `[失敗]` または `[エラー]` が発生した場合、サーバー側の設定に問題がある可能性が高いと判断し、テストは自動的に中断されます。

<h2 id="ha214098e44">まとめ</h2><ul><li>GEMINI.mdに要件をまとめておくと、再生成や修正時に同じ指示を使い回せる</li><li>成功例だけでなく、失敗例を含めた検証が品質向上に役立つ</li><li>指示書と修正履歴を残しておくと、次回同様の実装をするときに時間短縮できる</li></ul>

GEMINI.md指示書 × Gemini CLI × Playwrightで作るリダイレクトチェッカー

<p>自動テストについて調べてみたなかで手始めに「<a href="https://playwright.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Playwright</u></a>」を触ってみることに。</p><p>まずは簡単なところから、<strong>URLのリストをもとにスクリーンショットを取得する</strong>処理を試しました。</p><h2 id="h9f510f3156">やりたいこと</h2><ul><li>複数のURLに対して、順番にアクセスしながらスクリーンショットを取得</li><li>URLリストはJSONファイルで管理</li></ul><h3 id="h009dfaed07">番外</h3><ul><li>Basic認証がある場合も対応</li><li>特定の要素を非表示にしてからキャプチャを取得</li><li>モバイルサイズ・PCサイズなど、デバイスごとにサイズ指定</li><li>JPEGで保存する場合は画質を調整</li></ul>

npm init -y
npm install -D @playwright/test
npx playwright install

import { test } from "@playwright/test";
import fs from "fs";

const urls: string[] = JSON.parse(fs.readFileSync("./pages.json", "utf-8"));

for (const url of urls) {
  test(`screenshot for ${url}`, async ({ page }) => {
    await page.setViewportSize({
      width: 1280,
      height: 800,
    });
    await page.goto(url, { waitUntil: "networkidle" });

    // 特定の要素を非表示にする
    await page.locator(".クラス名").evaluateAll((els) => {
      els.forEach((el) => (el.style.display = "none"));
    });

    const u = new URL(url);

    // パス末尾の / を削除し、先頭の / を除き、/ を _ に変換
    const cleanPath = u.pathname
      .replace(/\/$/, "")
      .slice(1)
      .replace(/\//g, "_");

    // ホスト名（localhost や example.com）とパスを組み合わせてファイル名を生成
    const pathname = `${u.hostname}${cleanPath ? `_${cleanPath}` : ""}`;

    // 最終的なファイル名（screenshots/example.com_about_team.jpg など）
    const filename = `screenshots/${pathname}.jpg`;

    // 保存先ディレクトリ作成
    fs.mkdirSync("screenshots", { recursive: true });

    // スクリーンショット取得
    await page.screenshot({ path: filename, fullPage: true, quality: 80 });
  });
}


[
  "ページURL１",
  "ページURL２",
  "ページURL３"
]

<h3 id="h251ac368fd">実行して取得したスクリーンショット</h3><p>Chrome拡張機能などで取得したスクリーンショットほどスッキリ・クリアな感じの画像ではないけど、確認程度なら十分な画質。</p><p>qualityを100にしても変わらずでした。</p>

<h2 id="h5ca22457fd">特定の要素を非表示にする</h2>

await page.locator(".クラス名").evaluateAll((els) => {
  els.forEach((el) => (el.style.display = "none"));
});

<p>クラス名を指定して<code>display:none</code>にしています。</p><p>↓は、左側がもとの状態で右側がクラス名を指定してサイドバーを非表示にして取得したスクショです。</p>

<h2 id="h92d2633638">Basic認証を事前設定する</h2><p><code>httpCredentials</code>を指定するだけなので簡単に設定できます。</p>

const config = {
  use: {
    trace: 'on-first-retry',
    httpCredentials: {
      username: 'Basic認証ユーザ名',
      password: 'Basic認証パスワード',
    },
  },
};
export default config;

<h2 id="h4ae7f02243">今後やりたいこと</h2><p>今回は静的なページを対象にしたスクショ取得を試しましたが、次は<strong>フォームのテストや動的操作の自動化</strong>も試してみたいと思っています。</p><p>Playwright、おもしろい。</p>

<p>📝参考</p><ul><li><a href="https://testomat.io/blog/how-to-capture-screenshots-videos-playwright-js-tutorial/" target="_blank" rel="noopener noreferrer nofollow">How To Capture Screenshots &amp; Videos — Playwright JS Tutorial</a></li><li><a href="https://zenn.dev/frontendflat/articles/b2c98a68ff9687" target="_blank" rel="noopener noreferrer nofollow">Playwrightでサイトマップに記載されたページのスクリーンショットを保存する</a></li><li><a href="https://scrapeops.io/playwright-web-scraping-playbook/nodejs-playwright-take-screenshots/" target="_blank" rel="noopener noreferrer nofollow">Playwright Guide: How To Take Screenshots</a></li></ul>

841-biborokuWebフロントエンドの備忘録

E2E