ソフトウェアテストブログ

Playwrightのレコーディング&コード生成機能「Playwright codegen」を試してみた!

Playwrightのレコーディング&コード生成機能「Playwright codegen」を試してみた!

2025年07月01日 14:38

はじめに

テスト自動化の現場で強力なツールとして注目されているPlaywright。Playwrightには便利なコード生成機能「Playwright codegen」があります。この機能を使うと、ブラウザ操作を記録してコードを自動生成できるため、テスト作成の効率を大幅に向上させることができます。本記事では、その実践方法や感想を交えて紹介します。


1. Playwright Codegenとは?


「Playwright codegen」は、ブラウザ上での操作をリアルタイムで記録し、それをPlaywrightのテストコードとして出力する機能です。手動操作をスクリプト化できるため、初心者でも簡単にテストコードを作成できます。


【主な特徴】

  • GUIで簡単に操作を記録

    実際の操作をそのまま記録できる。

  • 対応するテストコードを自動生成

    JavaScript、TypeScript、Pythonなどのコードを出力可能。

  • リアルタイムでコードを確認可能

    操作と同時にスクリプトが出力される。


これらの機能を使うことで、手作業でのコード記述を大幅に省略でき、テストの作成が容易になります。


2. 実際に試してみる

2.1 「Playwright codegen」を試してみる

※Playwrightの環境が既に構築されている場合、「npx playwright codegen」コマンドを使うだけでコード生成を開始できます。今回はPlaywrightの環境構築の部分は省きます。

以下のコマンドを実行すると、コード生成ツールが起動します。
npx playwright codegen

この状態でブラウザが立ち上がり、操作を行うと、リアルタイムでPlaywrightのコードが出力されます。

2.2 特定のURLを指定して開始することも可能

特定のサイトのテストを作成したい場合は、URLを指定して起動できます。
npx playwright codegen https://example.com


この状態でサイトを操作すると、その操作がテストコードとして自動記録されます。

2.3 出力されたコードの確認

試しに、以下のような操作を行ってみました。

  1. https://example.com を開く。

  2. 検索ボックスに「Playwright」と入力。

  3. 検索ボタンをクリック。

これらの操作を行った結果、以下のようなコードが生成されました。

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
 await page.goto('https://example.com');

 await page.getByPlaceholder('Search').fill('Playwright');
 await page.getByRole('button', { name: 'Search' }).click();
});


3. 実際に使ってみた感想

この機能を実際に試してみたところ、以下のようなメリットと気になる点がありました。

3.1 良かった点

  • コードの自動生成が便利
    手作業でスクリプトを書くよりも、すぐにPlaywrightのコードを得られるので、テストスクリプトの作成が簡単になる。

  • シンプルなUIで直感的に操作できる
    記録した操作が即座にコード化されるので、どのようにスクリプトが作られるのか分かりやすい。

  • locators(要素の取得方法)が最適化されている
    Playwrightの推奨する適切なセレクタが自動で選択されるため、手動で選ぶ手間が省ける

3.2 気になった点

  • すべての操作が完全に再現されるわけではない
    一部の動作(ドラッグ&ドロップなど)は記録されないことがあるため、手動で補完が必要。

  • コードの整理が必要
    自動生成されたコードはそのままでは可読性が低い場合があるため、整理や修正が必要になる


4. まとめ

「Playwright codegen」は、テストスクリプトの作成を効率化する強力なツールですが、生成されたコードをそのまま使うのではなく最適化することが重要です。細かい動作の修正やメンテナンスを考慮すると、記録機能を補助的に活用しつつ、最終的なコードは手動で調整するのがベストだと感じました。特に、初心者がPlaywrightを学習する際や、手作業のテストを効率的にコード化する場合に役立ちます。


これを活用して、より効率的なテスト自動化を進めてみましょう!