Zenn
🤖

Playwrightのcodegenでブラウザ操作スクリプトを自動生成する

2024/10/03に公開
Python
自動化
Playwright
ブラウザ操作
codegen
tech

Playwrightには codegen というツールが実装されています。codegenを使うと、selenium IDEと同じく、ブラウザ操作を記録してテストスクリプトを自動生成できます。複雑な操作には向いていませんが、簡単なブラウザ操作の自動化をしたい人にとって、とても便利ツールです。

概要

Playwrightのcodegenは、ブラウザでの操作を自動的に記録し、それに基づいてテストスクリプトや自動化スクリプトを自動生成するための強力なツールです。この機能を使うことで、複雑な操作を簡単にスクリプト化でき、テストやウェブスクレイピングの自動化を迅速に開始できます。

codegenを使うと、次のことが可能になります：

  • ブラウザ操作を記録：Webページでのクリック、入力、ナビゲーションなどの操作を記録し、それをスクリプトに変換します。
  • 自動生成されたスクリプトを編集：生成されたコードをベースに、自分の用途に合わせてコードを編集することができます。
  • テストスクリプトの作成：エンドツーエンドのテストスクリプトを手動で書く代わりに、自動生成されたコードを利用することで、迅速にテストを作成可能です。

codegenを使う手順

1. Playwrightのインストール

まず、Playwrightをインストールしていない場合は、以下のコマンドでインストールします。

pip install playwright

その後、Playwrightのブラウザバイナリをインストールします。

playwright install

2. codegenの起動

Playwrightのcodegenは、ターミナルやコマンドプロンプトで以下のコマンドを使って起動できます。

playwright codegen <URL>

<URL>には、記録を開始したいWebページのURLを指定します（例：https://yahoo.co.jp）。
このコマンドを実行すると、指定したURLでブラウザが開き、操作が記録されます。

3. 記録を開始

codegenを実行すると、ブラウザとスクリプトエディタ（codegen）が表示されます。ユーザーはブラウザを通常のように操作します。codegenは、以下のような操作を記録します。

クリック
テキストの入力
リンクのクリック
ページの遷移
その他のユーザーインターフェース操作（右クリックやコンテンツのダウンロードなど）

4. コードの自動生成

操作が記録されると、対応するPlaywrightのコード（Python、JavaScriptなどのスクリプト）がリアルタイムで生成されます。このコードは、バイナリブラウザでの操作をスクリプト化したものです。

5. 記録が完了したら

記録が完了したら、操作を終了し、ターミナルに生成されたコードが表示されます。このコードはテストスクリプトや自動化スクリプトとしてそのまま利用することができます。

6. 生成されたコードのサンプル

例えば、https://yahoo.co.jp で「天気・災害」のニュースをクリックした後、トップページに戻り、検索フォームフォームに「Python」と入力する操作を記録した場合、生成されるコードは以下のようになります。

from playwright.sync_api import sync_playwright
import time # こちらは手動で付与

def run(playwright):
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://yahoo.co.jp")
    page.get_by_label("天気・災害へ遷移する").click()
    page.get_by_role("link", name="Yahoo! JAPAN").click()
    page.get_by_label("検索したいキーワードを入力してください").click()
    page.get_by_label("検索したいキーワードを入力してください").fill("python")
    page.get_by_label("検索したいキーワードを入力してください").press("Enter")
    time.sleep(5)　# こちらは手動で付与

    # ---------------------
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

このスクリプトは、記録した通りに以下の操作を行います：

  • https://yahoo.co.jp　にアクセスする
  • 「天気・災害」というテキストを含むリンクをクリックする
  • ページの中から「Yahoo! JAPAN」というnameタグをもつリンクをクリックする
  • 「検索したいキーワードを入力してください」というラベルが紐づいた要素をクリックする
  • 「検索したいキーワードを入力してください」というラベルが紐づいた要素に「python」と入力する
  • 「検索したいキーワードを入力してください」というラベルが紐づいた要素でEnterキーを押す
  • 5秒待機し結果を見る（結果を確認するため手動で付与）

codegenのオプション

codegenにはいくつかのオプションがあります。例えば、生成するスクリプトのプログラミング言語を指定したり、記録を開始するブラウザを選択したりできます。

生成する言語の指定: デフォルトでは、PlaywrightはJavaScriptでコードを生成しますが、Pythonや他の言語も指定可能です。Pythonでコードを生成する場合は、以下のように指定します。

playwright codegen --target python <URL>

ブラウザを指定: どのブラウザで記録するかを指定できます。例えば、firefoxやwebkit（Safariのエンジン）を使って記録する場合、以下のように実行します。

playwright codegen --browser firefox <URL>

これにより、Firefoxでの操作が記録されます。

生成されたコードを利用するシナリオ

テストの作成： codegenを使って自動生成されたコードをベースに、エンドツーエンドテストを簡単に作成できます。手動でコードを書く手間を大幅に省くことができます。

ウェブスクレイピング： スクレイピングの際に複雑なページナビゲーションやフォーム入力が必要な場合、codegenを使って自動生成されたスクリプトを元にして、スクレイピングコードを作成できます。

リプレイ機能： 生成されたスクリプトを実行すると、記録された操作がリプレイされます。これにより、Webアプリケーションの動作確認やデバッグを効率化できます。

codegenのメリットとデメリット

  • メリット
    高速なスクリプト生成：手動でコードを書く手間を大幅に削減できるため、効率的にテストや自動化のコードを作成できます。
    簡単に操作を記録：複雑な操作をGUIで記録し、その操作に対応するコードを自動生成するので、初心者でも簡単にスクリプトが作成できます。
    リアルタイムのコード生成：操作と同時にリアルタイムでコードが生成されるため、記録中に確認できます。

  • デメリット
    コードの最適化が必要：自動生成されたコードは、必ずしも最適化されているわけではないため、実際に使用する場合には、コードを手動で調整することが求められることがあります。
    複雑なシナリオには向かないことも：高度なロジックや条件分岐を含むスクリプトは、codegenだけでは生成できないため、手動での追加が必要です。

おわりに

Playwrightの codegen は手動でブラウザを操作すると、対応するコードをリアルタイムで生成する便利なツールです。直接ブラウザを操作することで対応するコードを確認したり、生成されたコードをたたき台としてブラッシュアップしたり、使い道はさまざまですね。

codegen のブラウザ操作は、マウスカーソルのあるところがハイライトしたり、コード記録のためのサブメニューがあったりと、最初戸惑うかもしれませんが、使いこなすには慣れるのが一番です（Chromeの開発者ツールやExcelのマクロ記録に慣れている人であれば馴染むのも早いはず…）。ご要望があれば簡単な操作方法もご紹介しますので、気軽にコメントいただけたら幸いです！

Discussion