🤖

Playwrightで可能なWEBブラウザ操作

2024/10/03に公開

Python

はじめに

Playwrightを使うと、基本的なブラウザ操作だけでなく、さまざまなユーザーインターフェース（UI）の操作が可能です。codegenを利用することで、以下のようなインターフェース操作が記録・スクリプト化可能です。

Playwrightの導入がまだの方はこちらのページをご参考ください。

基本の Playwright のコード

以下は簡単な Playwrightのコードです。URLに指定したページに移動し、タイトルを取得し、プロンプトに表示するだけのプログラムです。

from playwright.sync_api import sync_playwright

URL = 'https://google.com'
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto(URL)
    print(page.title())
    browser.close()

上記のコードの中の「page」が、操作するWEBのオブジェクトです。pageに対してクリックしたり、マウス操作したり、htmlソースからラベルを探したりすることでブラウザを操作します。

1. クリック操作

Webページ上のボタンやリンク、その他のクリック可能な要素に対するクリック操作を記録できます。クリックイベントがトリガーされると、それに対応するスクリプトが自動生成されます。

page.click('button#submit')  # 例: "送信"ボタンをクリック

2. テキスト入力

フォームの入力フィールドにテキストを入力する操作も記録可能です。ユーザーがフォームに入力した内容をそのままスクリプトに反映します。

page.fill('input[name="username"]', 'sample_user')  # ユーザー名の入力

3. セレクトボックス（ドロップダウン）操作

セレクトボックス（ドロップダウンメニュー）から項目を選択する操作も記録可能です。

page.select_option('select#country', 'Japan')  # ドロップダウンから「Japan」を選択

4. チェックボックスの操作

チェックボックスをクリックして、オンまたはオフにする操作も記録できます。

page.check('input[type="checkbox"]')  # チェックボックスをオンにする
page.uncheck('input[type="checkbox"]')  # チェックボックスをオフにする

5. ラジオボタンの選択

ラジオボタンの選択操作も記録でき、特定のオプションを選択する操作をスクリプト化します。

page.click('input[type="radio"][value="option1"]')  # ラジオボタンのオプション1を選択

6. ファイルのアップロード

ファイル選択フィールドを使ったファイルのアップロードもスクリプト化できます。ファイルを選択した操作を記録し、指定されたファイルをアップロードする処理がスクリプトに追加されます。

page.set_input_files('input[type="file"]', 'path/to/file.pdf')  # ファイルをアップロード

7. マウス操作

マウスを使った操作（ドラッグ＆ドロップ、ホバーなど）も記録可能です。

ホバー（マウスオーバー）: 要素にマウスをホバーさせる操作を記録。

page.hover('button#menu')  # メニュー上にマウスをホバー

ドラッグ＆ドロップ: 要素をドラッグして別の場所にドロップする操作。

page.drag_and_drop('div#source', 'div#target')  # 要素をドラッグして別の要素にドロップ

8. キーボード操作

キーボードでの操作も記録可能です。特定のキーを押す、テキストフィールドに値を入力するなどの操作をスクリプト化できます。

page.keyboard.press('Enter')  # Enterキーを押す

9. ページのナビゲーション

ページの遷移やリンクのクリックによるナビゲーションも記録されます。指定されたURLへの移動や、新しいページのロードが行われた場合、その操作がスクリプトに追加されます。

page.goto('https://zenn.dev/')  # 新しいページにナビゲート

10. 要素の待機

特定の要素がページ上に現れるまで待機する操作も自動的に記録され、スクリプトに反映されます。これにより、ページの読み込み完了や要素が表示されるまでの待機時間を自動で考慮できます。

page.wait_for_selector('div#content')  # 要素が表示されるまで待機

11. スクリーンショットの撮影

ページや特定の要素のスクリーンショットを撮る操作も記録されます。スクリーンショットはテスト中の状態を可視化するために有効です。

page.screenshot(path='screenshot.png')  # ページ全体のスクリーンショットを撮影

12. フレームの操作

iframeや他のフレームに切り替えて操作することも記録されます。Webページに埋め込まれたiframeの内部要素に対して操作を行う場合、その操作もスクリプト化可能です。

frame = page.frame(name='myFrame')  # iframeに切り替え
frame.click('button#insideFrame')  # iframe内のボタンをクリック

13. ネットワークリクエストのインターセプト

Playwrightでは、ネットワークリクエストをインターセプトして、リクエストの内容を操作することもできます。これにより、APIのモックやリクエストのレスポンスを変更するシナリオもスクリプト化可能です（codegenで直接記録はできませんが、手動で追加可能）。

page.route('**/api/v1/data', lambda route: route.fulfill(status=200, body='mocked data'))  # APIリクエストをモック

14. アラートやポップアップの操作

アラートや確認ダイアログの表示も記録され、それに対する操作（例えば「OK」をクリックするなど）もスクリプトに含まれます。

page.on('dialog', lambda dialog: dialog.accept())  # アラートを自動的に承認

codegen を使ったコーディング

また、Playwrightに付属する codegenというツールを活用すると、WEBブラウザを操作しながらリアルタイムかつ自動的にスクリプト化が可能です。「この動作ってどうコードで書けばいいのか…！」
という場合、操作したいWEBページを開いて直接操作の軌跡をコード化することができてとても便利ですよ。codegen の情報がもっと欲しい！という方は次のページをご参照いただけたら幸いです。

まとめ

Playwrightのcodegenでは、ブラウザで行われるさまざまな操作（クリック、入力、ナビゲーション、フォームの操作、マウスやキーボードの操作、ファイルアップロードなど）を記録して自動的にスクリプト化できます。記録されたスクリプトは、エンドツーエンドテストの作成やウェブスクレイピングの自動化に非常に役立ちます。

また、生成されたスクリプトは、カスタマイズや編集がしやすく、手動で追加することでさらに強力なテストや自動化を実現できます。Playwrightは、UIテストや自動化を効率的に進めるための強力なツールであり、特に複雑なインターフェースを操作する場合にも便利です。