前回の記事では、Playwrightのインストールから動作確認までを行いました。E2Eテスト環境は整いましたが、いざテストを書こうとすると「要素のセレクタを調べるのが面倒」「テストコードを一行一行書くのが大変」と感じるかもしれません。
Playwrightは、その課題を解決する強力なツール「Codegen（コードジェネレーター）」を提供しています。この記事では、ブラウザを操作するだけでテストコードが自動生成される、魔法のような体験をステップバイステップで解説します。
1. Codegenとは？
Codegenは、Playwrightに標準搭載されているテストコード自動生成ツールです。以下の特徴があります。
Codegenの主な機能
- 操作の記録 (Recording): ブラウザ上で行ったクリックや文字入力などの操作をリアルタイムで記録します。
- コードの自動生成: 記録した操作を、Playwrightのテストコード（TypeScript, JavaScript, Python, Java, C#）に変換します。
- セレクタの自動特定:
getByRoleやgetByTextなど、Playwrightが推奨する堅牢なセレクタを自動で選択します。 - アサーション（検証）の追加: 「要素が見えること」「テキストが正しいこと」といった検証コードもGUIから追加できます。
Codegenを使えば、テスト作成の初期段階（たたき台の作成）にかかる時間を劇的に短縮できます。
2. Codegenの起動方法
Codegenの起動は非常に簡単です。前回の記事で作成したプロジェクトディレクトリ（playwright-demo）で、ターミナルから以下のコマンドを実行します。
[テスト対象のURL]を指定すると、そのページを開いた状態でCodegenが起動します。指定しない場合は、空のブラウザが起動します。
今回は、Playwrightの公式サイトを対象にしてみましょう。
このコマンドを実行すると、2つのウィンドウが起動します。
- 操作用ブラウザ: 実際に操作を行うブラウザウィンドウです。
- Playwright Inspector: 操作が記録され、コードが生成されるウィンドウです。
3. 実践！Codegenを使ってみよう
それでは、実際にブラウザを操作してテストコードを生成してみましょう。「Playwright公式サイトにアクセスし、検索機能を使って『Assertions（アサーション）』のページに移動し、見出しが表示されていることを確認する」というテストを作成します。
ステップ1: Codegenの起動
ターミナルで以下のコマンドを実行します。
ステップ2: ブラウザの操作（レコーディング）
操作用ブラウザ（https://playwright.dev/が開いているウィンドウ）で、以下の操作を行ってください。
- ページ上部にある「Search」ボックスをクリックします。
- 「Assertions」と入力します。
- 検索結果に表示された「Assertions」のリンクをクリックします。
この時点で、Playwright Inspectorのウィンドウを見てみましょう。あなたの操作が既にコードに変換されているはずです。
// 自動生成されたコードの例
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('button', { name: 'Search' }).click();
await page.getByPlaceholder('Search docs').fill('Assertions');
await page.getByRole('link', { name: 'Assertions', exact: true }).click();
});ステップ3: アサーション（検証）の追加
次に、「Assertions」という見出しが正しく表示されているかを確認（アサート）するコードを追加します。
- Playwright Inspector のウィンドウ上部にある 「Assert」 ボタンをクリックします。
- カーソルが変化したら、操作用ブラウザに戻り、ページメインの「Assertions」という見出しをクリックします。
- Inspectorは、これが「visibility（表示されていること）」のアサーションであると自動で判断します。
Inspectorのコードが更新され、expectを使った検証コードが追加されたことを確認してください。
// アサーションが追加されたコード
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('button', { name: 'Search' }).click();
await page.getByPlaceholder('Search docs').fill('Assertions');
await page.getByRole('link', { name: 'Assertions', exact: true }).click();
// ▼ この行が追加された ▼
await expect(page.getByRole('heading', { name: 'Assertions' })).toBeVisible();
});ステップ4: コードのコピーと保存
これでテストコードは完成です。
- Playwright Inspectorの上部にある「Target」ドロップダウンが「Playwright Test」になっていることを確認します。
- その隣にある「Copy」ボタンをクリックして、生成されたコードをクリップボードにコピーします。
- VS Codeなどのエディタで、
tests/codegen-test.spec.tsという新しいファイルを作成し、コピーしたコードを貼り付けて保存します。
ステップ5: 生成されたテストの実行
Codegenのウィンドウは閉じて構いません。ターミナルに戻り、作成したテストファイルを実行してみましょう。
ヘッドレスモードでブラウザが起動し、今しがた記録した操作が実行されます。
✅ 実行結果
Running 3 tests using 3 workers
✓ [chromium] › tests/codegen-test.spec.ts:3:1 › test (2s)
✓ [firefox] › tests/codegen-test.spec.ts:3:1 › test (2s)
✓ [webkit] › tests/codegen-test.spec.ts:3:1 › test (2s)
3 passed (3s)3つのブラウザすべてでテストが成功しました！ これで、ブラウザ操作だけでE2Eテストを1本作れたことになります。
4. Codegenの便利なTips
Codegenには、コード生成以外にも便利な機能があります。
Tips 1: セレクタの探索（Pick locator）
「この要素のセレクタだけ知りたい」という場面はよくあります。Codegenはその手助けもしてくれます。
- Codegenを起動します。（
npx playwright codegen） - Playwright Inspectorの上部にある「Pick locator」（カーソルのアイコン）をクリックします。
- 操作用ブラウザに戻り、調べたい要素（例: ボタンやリンク）にマウスカーソルを合わせます。
Inspectorの画面に、Playwrightが推奨するセレクタ（例: page.getByRole('button', { name: 'Submit' })）がハイライト表示されます。もうChromeのDevToolsで複雑なCSSセレクタやXPathをコピーする必要はありません。
Tips 2: 生成言語の変更
Inspectorの上部にある「Target」ドロップダウンを変更することで、TypeScriptだけでなく、JavaScript、Python、Java、C#用のコードも生成できます。他の言語でPlaywrightを使っているチームメンバーとも簡単にコードを共有できます。
5. Codegenを使う上での注意点
Codegenは非常に強力ですが、万能ではありません。利用する上での注意点も理解しておきましょう。
⚠️ 注意点
- あくまで「たたき台」: 生成されたコードが常に最適とは限りません。特に複雑な操作や動的な待機処理は、手動での調整が必要になる場合があります。
- 保守性: 自動生成に頼りすぎると、UIのわずかな変更で壊れやすいテストになる可能性があります。Codegenが生成したセレクタ（特に
getByTextなど）が、本当に意図した要素を指しているか確認する癖をつけましょう。 - 「何を」検証するかは人間次第: Codegenは操作を記録しますが、「その結果、何を検証すべきか」というテストの「意図」は人間が考える必要があります。「ボタンを押せる」ことだけでなく、「ボタンを押した結果、期待した動作になる」ことを
expectで検証することが重要です。
まとめ
今回は、Playwrightの強力な機能「Codegen」を使って、ブラウザ操作からテストコードを自動生成する体験をしました。
Codegenを活用することで、以下のメリットが得られます。
- 生産性の向上: テスト作成にかかる時間を大幅に短縮できます。
- 学習コストの低減: PlaywrightのAPIや推奨セレクタ（
getByRoleなど）を、操作しながら自然に学べます。 - セレクタ探しのストレス軽減: DevToolsと格闘する時間が減ります。
次のステップ
Playwrightの基本と便利なコード生成をマスターした今、次はより実践的なテスト作成に進みましょう。
- ログイン処理など、複数のページをまたぐテストを作成してみる。
- APIリクエストをモックして、フロントエンドの動作だけをテストする。
- 作成したテストをCI/CD（GitHub Actionsなど）で自動実行する。
Playwrightは、テスト作成の「面倒」を解消し、開発者が本来集中すべき「品質の担保」に時間を使えるようにしてくれます。ぜひCodegenを使いこなし、開発サイクルを高速化させましょう！
＜過去の記事＞
【入門】Playwrightインストール完全ガイド｜Windows/Macの導入手順と動作確認まとめ
単体テスト完全ガイド｜基礎から設計・実装までソフトウェア品質を支えるやり方
アジャイル開発のテスト戦略｜品質を落とさないテスト自動化とベンダー活用の実践例
はじめてのテストアウトソーシング入門｜開発会社が失敗しない外部委託の進め方
内部結合テストと外部結合テストの違いとは？目的・観点・設計ポイントを整理
