移行後の検証、Playwrightで「旧サイトと同じか」を確かめる──転送・画面・フォーム・計測タグの4つの確認、公式で確かめた機能、目視と自動の分け方と計算例

画面の比較（toHaveScreenshot）
・初回の実行で基準の画像を作り、2回目以降はそれと比べる
・ページを変えたときは --update-snapshots で基準を作り直す
・maxDiffPixels（違ってよい画素数）、threshold（色の違いの許容、初期値0.2）を指定できる
・mask で変わる部分を隠せる。animations は初期値で止める設定
・表示はOS・版・設定・機器で変わるため、基準を作った環境と同じ環境で実行するよう案内されている

通信の確認
・page.on('request') で、ページが出した通信を記録できる
・page.waitForResponse で、特定の通信の応答を待てる
・page.route で、通信を差し替えたり止めたりできる

転送の確認
・request の get などで maxRedirects に 0 を渡すと、転送を追わない
・応答の status() で状態コード、headers() で応答ヘッダーを読める

私はWeb制作会社のディレクターです。サイト移行後の検証の一覧を作ってください。
（顧客名や個人情報は入力しません）

【材料】
・旧サイトのURL一覧とURL対応表：〔貼り付け〕
・フォーム、検索、外部サービス、計測タグの一覧：〔記載〕
・公開の予定日と、検証環境の有無：〔記載〕

1. 確認項目を「転送」「画面」「フォーム」「計測タグ」に分ける。
2. 各項目を「Playwrightで自動にする」「人が目で見る」に分け、理由を書く。
3. フォームは、本番で実際に送ってよいか、検証環境で確かめるかを質問の形で挙げる。
4. 公開前・公開当日・公開の翌週のどの時点で実行するかを表にする。

import { test, expect } from '@playwright/test';

const map = [
  { from: '/old/about.html', to: '/about' },
  // URL対応表から貼り付ける
];

test('旧URLの転送', async ({ request }) => {
  for (const r of map) {
    const res = await request.get(r.from, { maxRedirects: 0 });
    expect([301, 308]).toContain(res.status());
    expect(res.headers()['location']).toContain(r.to);
  }
});

test('トップの見た目', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('top.png', {
    fullPage: true,
    mask: [page.locator('〔お知らせの日付など、変わる部分〕')],
    maxDiffPixels: 〔許容する画素数〕,
  });
});

・検証環境：テスト用の宛先に実際に送り、届いた内容と自動返信を人が確かめる
・本番：送信は人が1回だけ行い、届いたことをお客様と確かめる
・入力チェック（必須・形式）の表示は、自動テストで確かめる

test('計測タグの送信', async ({ page }) => {
  const sent = page.waitForResponse(res => res.url().includes('〔送信先のURLの一部〕'));
  await page.goto('/');
  await sent;
});

手作業：画面30 × 旧新2回 × 5分 ＝ 300分 ＝ 5時間
　　　　転送120URL × 1分 ＝ 120分 ＝ 2時間
　　　　1回の検証：5 ＋ 2 ＝ 7時間 × 3回（公開前・当日・翌週）＝ 21時間
自動化：構築10時間 ＋ 結果の確認1時間 × 3回 ＝ 13時間
構築の費用：10時間 × 7,645円（例）＝ 76,450円