ブラウザ操作を「資産」に変える。Chrome DevTools「Recorder」で始めるE2E自動化の深淵
こんにちは。日々の開発で「また同じ画面をポチポチ確認しているのか…」と虚しさを感じたことはありませんか？
もし、あなたが手動で行っているその「操作」を、ブラウザ自身に記憶させ、ワンクリックで再現可能な「テスト資産」に変換できるとしたらどうでしょう。今回紹介する Chrome DevToolsの「Recorder」パネル は、単なるレコーダーではありません。これは、あなたの手作業を、世界標準のE2Eテストフレームワーク（PlaywrightやPuppeteer）で動く「コード」へと昇華させるための強力な入り口です。
今日は、ただの「操作の記録」を超えて、「なぜRecorderから始めることが最強のE2E戦略なのか」、その本質を紐解いていきましょう。
—
1. なぜ「Recorder」を使うことが、プロの近道なのか
多くの初心者がE2Eテスト（End-to-End Test）で挫折する理由は、「最初からコードをバリバリ書こうとするから」です。セレクタの指定、非同期処理の待機、DOMの動的な変化……これらをゼロから記述するのは苦行です。
Recorderの真の価値は、「ブラウザが実際に解釈した操作シーケンス」を、エラーの起きにくい最適解として出力してくれる点にあります。
- DOM構造の最適化: 人間が書くと不安定になりがちなCSSセレクタを、DevToolsは「テストに耐えうる堅牢なパス」として自動生成します。
- Playwright/Puppeteerへの接続: 録画したスクリプトは、Node.jsベースのテストコードとしてエクスポート可能です。つまり、「録画→修正→本番環境へデプロイ」という、極めて高速なフィードバックループが手に入ります。
—
2. 最初のセットアップ：無駄を削ぎ落とす
RecorderはChromeに標準搭載されているため、追加インストールは不要です。しかし、「どう準備するか」で精度が劇的に変わります。
ステップ1：Recorderパネルの起動
1. Chromeで `F12` キーを押し、DevToolsを開きます。
2. 右上の「…（3点リーダー）」アイコンをクリックし、`More tools` > `Recorder` を選択してください。パネルが下部に現れます。
ステップ2：クリーンな環境の作成（重要）
テストの再現性を担保する鉄則は「環境の汚染を防ぐこと」です。
- 録画時は必ず「シークレットウィンドウ」を使用するか、Chromeの「ゲストモード」で起動してください。
- 拡張機能（AdBlockなど）がDOMを書き換えると、テストが予期せぬ場所で落ちる原因になります。常にまっさらな状態で記録しましょう。
—
3. HelloWorld：操作を資産化する実戦
ここでは、簡単な検索画面での操作を録画し、それをコードとしてエクスポートする流れを体験します。
操作ログの録画
1. Recorderパネルの「Create a new recording」をクリック。
2. 名前を「SearchTest」とし、`Start recording` を押します。
3. 実際にブラウザで検索を実行します。
- `https://www.google.com` にアクセス
- 検索窓に「DevOps Architecture」と入力
- Enterキーを押す
4. 最後に、右上の「End recording」を押します。
ここがプロの視点：アサーション（検証）の追加
ただ操作するだけではテストになりません。録画中のメニューから 「Add assertion」 を選択し、検索結果のタイトル部分をクリックしてください。「Wait for element」という項目が自動で挿入されたはずです。
この「待機」こそが、E2Eテストの成否を分ける生命線です。 通信遅延で画面が描画される前に操作しようとするバグを、この一行が防いでくれます。
—
4. Playwrightへのエクスポートと、その先にある世界
録画が終わったら、パネル内の「Export」ボタンをクリックし、`Playwright (test)` を選択してください。すると、以下のようなコードが手に入ります。
// エクスポートされたPlaywrightのテストコード例
import { test, expect } from ‘@playwright/test’;
test(‘test’, async ({ page }) => {
// 指定URLへ移動
await page.goto(‘https://www.google.com/’);
// 検索窓のセレクタを特定し入力
await page.locator(‘[name=”q”]’).fill(‘DevOps Architecture’);
// Enterキーのシミュレーション
await page.keyboard.press(‘Enter’);
// 検索結果が出るまで最大5秒待機（ここが重要！）
await page.waitForSelector(‘#search’);
});
このコードを眺めてみてください。あなたがブラウザ上で行った「直感的な操作」が、堅牢な「プログラム」に変換されています。
—
5. 最後に：エンジニアとしてのマインドセット
Recorderを使って自動化を始めると、最初は「録画したのに動かない」という壁にぶつかるはずです。しかし、その「なぜ動かないのか」をDevToolsのコンソールで追いかけることこそが、フロントエンド・アーキテクトへの第一歩です。
- なぜセレクタが見つからないのか？（DOMのIDが動的に変わっているのか？）
- なぜ待機が必要なのか？（非同期通信のボトルネックはどこか？）
これらを一つずつ解き明かしていくプロセスは、あなたのコーディング品質を底上げする最高のトレーニングになります。
さあ、今日の作業から、少しずつ「記録」を始めてみませんか？その小さな一歩が、数ヶ月後のあなたの開発工数を劇的に減らす大きな資産となるはずです。
何か詰まったら、いつでもコンソールを開いてください。ブラウザは常に、あなたの最大の味方ですよ。