playwriter

Playwriter

Playwriter を使って、ユーザーが現在開いている Chrome タブを操作します。

ドキュメント全文はこちらです：https://playwriter.dev/

クイックスタート

1. 対象のタブで Playwriter 拡張機能が有効（緑色）になっていることを確認します。
2. CLI が利用可能であることを確認します。

playwriter --version || npx -y playwriter --version

3. セッションを作成または接続します。

playwriter session new

4. そのセッションに対してコマンドを実行します。

playwriter -s 1 -e "console.log(await page.url())"

基本的なワークフロー

1. 接続と対象のタブが正しいことを確認します。

playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"

2. 必要に応じて、ページの構造を収集します。

playwriter -s <session> -e "console.log(await accessibilitySnapshot({ page }))"

3. 対象を絞った操作（クリック／入力／ホバー／フェッチ／評価）を実行します。
4. page.evaluate でログと構造化された状態を取得します。
5. 正確な ID、タイムスタンプ、観測された状態遷移を示して、調査結果を要約します。

便利なコマンド

現在のアプリ UI からリストの行やオプションを取得します。

playwriter -s <session> -e "const rows = await page.getByRole('option').all(); console.log(rows.length);"

ポップアップやホバー時の内容を読み取ります。

playwriter -s <session> -e "const row = page.getByRole('option').nth(0); await row.hover(); await page.waitForTimeout(700); console.log(await page.locator('[data-side]').first().innerText());"

ページ内で任意のデバッグコードを実行します。

playwriter -s <session> -e "const out = await page.evaluate(() => ({ href: location.href })); console.log(out);"

トラブルシューティング

• セッションが誤ったタブに接続された場合は、対象のタブで拡張機能のアイコンをクリックしてから、playwriter session new を再実行します。
• playwriter コマンドが見つからない場合は、npx -y playwriter ... を使用するか、グローバルにインストールします。
• 実行エラーが接続の古さを示している場合は、新しいセッションを作成します。

安全策

• タスクで変更が必要な場合を除き、読み取り専用の調査を優先します。
• 破壊的な UI 操作を実行する前に、その旨を伝えます。
• ログを取得する際は、要約から機密性の高いトークンやユーザーデータを削除します。