Autify上のE2EテストをPlaywrightに移行しました

# 前提
- テストの実行は以下のコマンドを実行してください
```
pnpm test <path>
```
- フォーマットの実行するのは以下のコマンドを実行してください
```
pnpm lint:fix <path>
```
- エラーと修正を5回繰り返したら、一旦作業を中断して、どこでなぜ詰まっているのか報告してください
- 大きいタスクは分割して、それぞれの分割した範囲で以下に書いている「シナリオの実装手順」を実行してください

# Playwrightのコーディングガイドライン
- セレクターの選択では、以下の優先順位で実装する：
  **ロケーター優先**: `getByRole()`, `getByText()`, `getByLabel()`などのロケーターを最優先で使用
- **待機処理**: `waitForTimeout()`は使用せず、Web ファーストアサーションを使ってDOM要素の表示を待つ
- **最小限の実装**: 最小限で実装できたらまずテストを実行して確認することを徹底してください（動くようになったら次にいくようにしてください）
- **実証的アプローチ**: セレクターが動作するかわからない場合は、一時的にデバッグ用のコンソールログを追加して確認する
  - デバック用のコードは最終的に削除すること
- **UIモードの活用**: セレクターで困った場合はPlaywright UIモードを活用する
  - `pnpm exec playwright test --ui`でUIモードを起動
  - Pick Locatorで正確なセレクターを生成
  - 実際のDOM構造と要素のroleを確認
  - 推測ではなく実際の構造に基づいてセレクターを作成
  - testIdが存在する場合は複雑なロジックよりもtestIdを優先
- 複数のセレクターの組み合わせ（`.or()`）は、実際に必要性が証明されてから使用する
- 過度に冗長なフォールバック実装は避け、シンプルで読みやすいコードを心がける

# シナリオの実装手順
1. シナリオを確認する（シナリオが提示されていなかったらユーザーに尋ねる）
2. シナリオに対応するテストファイルがなければ作成する（どのテストファイルを使って良いかわからなければユーザーに尋ねる）
3. テストに対応するPOMファイルがもし存在しなければ新規にPOMファイルを作成する（どのPOMを使って良いかわからなければユーザーに尋ねる）
4. シナリオを実行するために必要なブラウザ操作をPOMに追加していく
5. テストファイルでPOMで定義した操作を呼び出し、アサーションについてはPOMに書かずにテストファイルに直で書く
6. テストファイルにPOMを呼び出したりアサーションするときは、対応するシナリオをコメントで書く
7. playwrightを実装できたらテストを必ず実行すること
8. シナリオ通りのテストがpassすることを確認する
9. 最後に、フォーマットエラーを解消し、作業完了とする

# release-check.yaml

name: E2Eテストを実行する
on:
  schedule:
    - cron: "0 12 * * 1-5" # 日本時間で21:00
jobs:
  e2e-test:
    steps:
      - name: Run E2E tests
        # E2Eテストを実行する
        run: pnpm exec playwright test --project=default

# release-check-reserved.yaml

name: 予約配信が時刻通り配信されることを確認するE2Eテストを実行する
on:
  schedule:
    - cron: "0 13 * * 1-5" # 日本時間で22:00(1時間ずらす)
jobs:
  e2e-test:
    steps:
      - name: Run E2E tests
        # 予約配信を確認するE2Eテストを実行する
        run: pnpm exec playwright test --project=reserved

const xoConfig: FlatXoConfig = {
  rules: {
    'custom-rules/no-playwright-tohavescreenshot': 'error',
    'custom-rules/no-playwright-route-fulfill': 'error',
  },
  plugins: {
    'custom-rules': {
      rules: {
        'no-playwright-tohavescreenshot': {
          meta: {
            type: 'problem',
            docs: {
              description: 'VRTテストを禁止するルール',
              category: 'Best Practices',
            },
            messages: {
              prohibited:
                'patrolではVRTテストを禁止しています。理由はE2EテストがFlakyになってしまうためです。',
            },
          },
          create(context) {
            return {
              CallExpression(node) {
                if (
                  node.callee.type === 'MemberExpression' &&
                  node.callee.property.type === 'Identifier' &&
                  node.callee.property.name === 'toHaveScreenshot'
                ) {
                  context.report({
                    node,
                    messageId: 'prohibited',
                  });
                }
              },
            };
          },
        },
        'no-playwright-route-fulfill': {
          meta: {
            type: 'problem',
            docs: {
              description: 'APIのmockを禁止するルール',
              category: 'Best Practices',
            },
            messages: {
              prohibited:
                'patrolではAPIのmockを禁止しています。理由はAPIをmockしてしまうとE2Eテストではなくなってしまうためです。',
            },
          },
          create(context) {
            return {
              CallExpression(node) {
                if (
                  node.callee.type === 'MemberExpression' &&
                  node.callee.property.type === 'Identifier' &&
                  node.callee.property.name === 'fulfill' &&
                  node.callee.object.type === 'Identifier' &&
                  node.callee.object.name === 'route'
                ) {
                  context.report({
                    node,
                    messageId: 'prohibited',
                  });
                }
              },
            };
          },
        },
      },
    },
  },
};

export default xoConfig;

- name: Run E2E tests
  run: pnpm exec playwright test --project=default # E2Eテストを実行する
  env:
    # パスワードをGitHub secretsから渡す
    PATROL_ACCOUNT_PASSWORD: ${{ secrets.PATROL_ACCOUNT_PASSWORD }}

# .env.local.example
PATROL_ACCOUNT_PASSWORD="op://foo/bar/password"

#!/bin/bash

set -euo pipefail

ENV_LOCAL_FILE='.env.local'
ENV_EXAMPLE_FILE='.env.local.example'

# .env.localが既に存在するかチェック
if [[ -f "$ENV_LOCAL_FILE" ]]; then
  echo '.env.localは作成済みです。'
  exit 0
fi

# op injectでopを展開して.env.localを作成
echo '1Password CLIを使用して環境変数を展開しています...'
op inject -i "$ENV_EXAMPLE_FILE" -o "$ENV_LOCAL_FILE"

echo 'セットアップが正常に完了しました！'

# .env.local（スクリプトによる自動生成）
PATROL_ACCOUNT_PASSWORD="<<実際のパスワード>>"

// package.json
{
  "scripts": {
    "postinstall": "bash ./setup-env.sh",
}

- name: Install deps
  run: pnpm install --ignore-scripts # postinstallを実行しないようにする