なぜ「Recorder」を単なるレコーダーとして使うのか？——真のDevOps視点で紐解くE2E自動化の深淵
多くのエンジニアが Chrome DevTools の「Recorder」パネルを「操作を記録して再生するだけの便利ツール」と誤解しています。しかし、真のアーキテクトにとって、これは「QAエンジニアと開発者の間の『言語の壁』を破壊するインターフェース」です。
手動テストの再現手順をチケットに書く時代は終わりました。本稿では、Recorderを単なる記録ツールではなく、Playwright/Puppeteerエコシステムへ直結する「E2Eのインフラ」として使い倒すための、現場の知見を共有します。
—
1. Recorderを「ただの記録」で終わらせない：拡張機能の活用
標準のRecorderでも十分強力ですが、チーム開発の効率を一段階引き上げるために、以下の拡張機能を導入してください。
- [Playwright Test Recorder](https://playwright.dev/docs/inspector#record-scripts): 標準のJSON形式から、即座にPlaywrightのTypeScriptコードへ変換して出力します。
- [Selectors Hub](https://selectorshub.com/): Recorderが自動生成した脆い（Fragile）セレクタを、堅牢なCSS/XPathに変換するための必須ツール。これがないと、UI改修のたびにテストが落ちる「テストの維持地獄」に陥ります。
現場の鉄則：セレクタの「命名戦略」
Recorderで生成されたコードが壊れる最大の原因は、`div > div > button` のような構造依存のセレクタです。これを防ぐため、開発チーム内で「テスト専用のデータ属性」を付与するルールを徹底してください。
—
2. チーム開発を加速させる「設定共有化」のアーキテクチャ
Recorderで記録したスクリプトを個人のPCに閉じ込めてはいけません。JSON形式（Puppeteerスクリプト）をリポジトリで管理し、チーム全体で共有する仕組みを構築しましょう。
推奨構成：`e2e/recordings/` 構造
各機能ごとにディレクトリを切り、CI/CDで実行可能な形式で保存します。
/project-root
/e2e
/recordings
/auth
login-success.json # ログイン成功の操作ログ
token-expired.json # セッション切れの異常系テスト
/config
playwright.config.ts # E2E実行環境設定
JSONエクスポートのベストプラクティス
RecorderからエクスポートしたJSONには、特定の環境に依存する `url` や `timeout` が含まれています。これを環境変数化する工夫が必要です。
`playwright.config.ts` での環境分離設定例:
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
// 開発環境とステージング環境を切り替え可能にする
use: {
baseURL: process.env.BASE_URL || ‘http://localhost:3000’,
browserName: ‘chromium’,
// ネットワークの不安定さを考慮し、自動リトライを設定
actionTimeout: 5000,
},
});
—
3. 生産性を極限まで高めるキーボードショートカット
マウスでポチポチ操作している時間は、プロにとっては損失です。以下のショートカットでDevToolsを「IDE化」してください。
- `Cmd + Shift + P` (Mac) / `Ctrl + Shift + P`: コマンドメニューの起動。ここから「Recorder」と入力すれば一瞬でパネルに遷移できます。
- `Cmd + Option + I`: DevToolsの起動。
- `F8`: 再生中のデバッグ停止（ブレークポイント代わり）。Recorderで再生中に「このDOM状態はどうなっている？」と確認したいときに必須です。
—
4. 現場で震えるほど役立つ「テスト設計」の極意
Recorderで記録したスクリプトは、「最初の10%」に過ぎません。ここからが腕の見せ所です。
ステップ1：非同期処理の待機を「明示」する
Recorderは自動で待機しますが、複雑なSPA（React/Vue）では、DOM描画前に操作が走ることがあります。生成されたスクリプトには必ず `waitForSelector` や `waitForLoadState` を追記してください。
ステップ2：アサーション（期待値）を組み込む
Recorderは「操作」しか記録しません。必ず「結果」を検証するコードを追記します。
// 生成されたコードに追記するアサーション
const title = await page.locator(‘[data-testid=”header-title”]’);
// 状態が期待通りかを確認（これがないテストはテストではない）
await expect(title).toHaveText(‘ようこそ、管理画面へ’);
—
まとめ：Recorderは「テスト自動化の入り口」に過ぎない
Recorderで操作をコード化し、それをPlaywrightで堅牢にブラッシュアップする——このサイクルを確立したチームは、リリース速度が劇的に向上します。
1. Recorderで素早く操作の型を作る。
2. `data-testid` でセレクタを抽象化する。
3. Playwrightでアサーションを組み込み、CI/CDで自動実行する。
このプロセスを回すだけで、QAの工数は半分になり、開発者の生産性は倍になります。「面倒な繰り返し作業」をツールに押し付け、我々エンジニアは、より創造的な課題解決にリソースを集中させましょう。
明日から、あなたのチームの全機能にこの「自動化フロー」を適用してください。結果は、数週間後のリリースサイクルの短縮という形で如実に現れるはずです。