【ITニュース解説】Stop Writing Boilerplate: How Playwright Codegen Will Change Your Test Automation Workflow

システムエンジニアを目指す上で、Webアプリケーションの品質保証、特にテスト自動化は非常に重要なスキルの一つだ。しかし、テスト自動化には多くの手間がかかる。例えば、新しいテストケースを作成しようとすると、まずWebブラウザを開き、開発者ツールを使ってテストしたい要素（ボタンや入力欄など）を一つ一つ探し出し、その要素を特定するための「セレクタ」と呼ばれる目印を手作業で記述する必要がある。さらに、クリックや文字入力といった基本的な操作を行うためのコード（「ボイラープレートコード」と呼ぶような、毎回繰り返し書くお決まりの初期設定や操作の骨格部分）も自分で書かなければならない。これは時間がかかり、面倒な作業であり、テストの肝となる「アサーション」（期待通りの結果になっているかを確認する部分）を書く前に、すでに疲れてしまうことも少なくない。

しかし、もしこれらの手間を大幅に削減できるツールがあるとしたらどうだろうか。まるで実際のユーザーのようにアプリケーションを操作するだけで、きれいで質の高いテストコードが自動的に生成されるとしたら、作業効率は劇的に向上するはずだ。それを可能にするのが、「Playwright Codegen（プレイライト コードジェン）」というツールだ。

Playwright Codegenは、Webブラウザの操作を記録し、その操作を高機能なPlaywrightテストコードに自動的に変換してくれる対話型ツールだ。このツールを起動すると、Webアプリケーションが表示されるブラウザウィンドウと、操作に応じてリアルタイムでコードが生成されていく「Inspector（インスペクター）」ウィンドウの二つが開く。これは単なる操作記録ツールではなく、より良い、より壊れにくいテストコードを書くための賢いアシスタントと考えてよい。

Playwright Codegenの最大の魅力は、その手軽さだ。複雑なプロジェクト設定や、一行のコードすら書くことなく、すぐにテストの記録を開始できる。まず、Playwrightがシステムにインストールされていることを確認する。もしインストールされていなければ、ターミナル（コマンドプロンプト）を開き、npm install @playwright/testと入力してPlaywrightのテストライブラリをインストールし、続けてnpx playwright installと入力して必要なブラウザ環境を整える。

準備ができたら、たった一つのコマンドでCodegenを起動できる。ターミナルにnpx playwright codegen https://www.saucedemo.com/（https://www.saucedemo.com/の部分はテストしたいWebサイトのURLに置き換える）と入力して実行するだけだ。すると、新しいブラウザウィンドウとInspectorウィンドウが自動的に開く。

開かれたブラウザウィンドウで、実際にテストしたい操作を行ってみよう。例えば、ログインフローを記録する場合、ユーザー名入力欄に「standard_user」と入力し、パスワード入力欄に「secret_sauce」と入力し、そして「Login」ボタンをクリックする。これらの操作をブラウザで行うと、Inspectorウィンドウに瞬時に、以下のようなPlaywrightテストコードが生成されるのが確認できるだろう。

Copy
1import { test, expect } from '@playwright/test';
2
3test('test', async ({ page }) => {
4  await page.goto('https://www.saucedemo.com/');
5  await page.locator('[data-test="username"]').click();
6  await page.locator('[data-test="username"]').fill('standard_user');
7  await page.locator('[data-test="password"]').click();
8  await page.locator('[data-test="password"]').fill('secret_sauce');
9  await page.locator('[data-test="login-button"]').click();
10});

このコードは、指定されたURLにアクセスし、ユーザー名とパスワードを入力してログインボタンをクリックするという一連の操作をPlaywrightの形式で記述したものだ。page.locator(...)の部分がWebページの要素を特定する「セレクタ」であり、fill(...)がテキスト入力、click()がクリック操作をそれぞれ表している。このように生成されたスクリプトは、そのままテストファイルにコピーして利用できる。

このPlaywright Codegenは、テスト自動化のワークフローを大きく変革する可能性を秘めている。

第一に、ロケーターのベストプラクティスを教えてくれる点だ。Codegenは、ただ単に最初にみつけたCSSクラスやIDをセレクタとして使うのではない。要素を分析し、ユーザーが最も意識しやすい、そして将来的なWebサイトの変更にも強い、最適なロケーターを生成してくれる。例えば、要素の役割（ボタンやテキストボックスなど）、表示されているテキスト、入力欄のプレースホルダー（入力例の表示）などを優先してセレクタを作成するため、結果としてより高品質で安定したテストコードの書き方を自然と学ぶことができる。これは、テストの信頼性を高める上で非常に重要だ。

第二に、テスト作成のスピードが劇的に向上する点だ。ユーザーがWebサイト上で行う一連の操作であれば、テストスクリプトの大部分（約80%）をわずか数秒で生成できる。これにより、手作業でのセレクタ特定やボイラープレートコードの記述に費やしていた時間を大幅に節約できる。その結果、システムエンジニアは、テストにおける最も重要な部分である「アサーションの追加」（例えば、「ログイン後、特定の商品ページが表示されているか」といった確認処理）や、動的なデータを使ったテストの設計、テストコード全体の構造化といった、より本質的で創造的な作業に集中できるようになる。

第三に、認証されたセッションを記録できるという高度な機能も持っている。Webアプリケーションのテストでは、多くの場合、まずログインが必要となる。しかし、テストのたびに毎回ログイン操作を記録したり、手動でコードを書いたりするのは非常に手間だ。Codegenは、一度ログインした状態（クッキーやローカルストレージに保存されている情報）をファイルに保存し、その保存された状態を読み込んでテストを開始する機能がある。具体的には、ログイン後にnpx playwright codegen --save-storage=auth.json https://www.saucedemo.com/といったコマンドで認証状態を保存し、次回からはnpx playwright codegen --load-storage=auth.json https://www.saucedemo.com/inventory.htmlのようにコマンドを実行することで、すでにログイン済みの状態でテストの記録を始められる。これは、繰り返し行うログイン処理の記録を省略し、作業をさらに効率化する強力な機能だ。

もちろん、Playwright Codegenは、テストコードを完全に自動生成してくれる魔法のツールではない。生成されたスクリプトをそのまま使うだけでなく、後でより頑強なアサーションを追加したり、適切なテストスイート（テストのまとまり）の中に組み込んだりするなど、手作業での修正や洗練が必要になる場面は必ずある。

しかし、テストの初期作成を加速させ、ロケーターのベストプラクティスを学び、セレクタのデバッグを素早く行うためのツールとしては、他に類を見ないほど強力だ。ユーザーインターフェース（UI）の自動化における最も退屈な部分を取り除き、テストの品質確保という本当に重要な作業に集中できるようになる。Playwrightを使ってテスト自動化に取り組んでいるチームにとって、Codegenを日々のワークフローに組み込むことは、きわめて理にかなった選択肢となるだろう。