1.はじめに
フロントエンド担当をすることもあるのですが、画面操作のテストはアナログ的にポチポチやっているのでこのような知識もあってもいいかなと思い、すこし触ってみました。
2.今回使うもの
今回はMicrosoftが公開しているplaywrightを用いていきます。
こちらはタイトルにもあるようなブラウザテスト自動化ツールであり、テストフレームワークとして設計されているようです。
3.ハンズオン
※uvを用います
環境作成
$ uv init
$ uv add playwright
$ uv run playwright install chromium
実践
プロジェクトルートに移動し、以下を作成してください
main.py
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://playwright.dev/")
page.get_by_role("link", name="Get started").click()
page.screenshot(path="installation.png")
browser.close()
以下のコマンドを実行してください(ブラウザが立ち上がりますが、問題ないです)。
$ uv run main.py
installation.pngが作成されていれば成功です。
4.解説
コマンドを実行すると、ブラウザが立ち上がり、ページが切り替わり、ブラウザが閉じたと思います。
これはそれぞれ、コードの以下の部分が対応しています。
PlaywrightとChromiumの起動
※headless=Falseを入れているとブラウザが表示されます。視覚情報として分かりやすいようにいれてます
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
ページを開く
page = browser.new_page()
サイトにアクセス
page.goto("サイトURL")
#### 要素の探索と動作
今回はget_by_roleで指定されたリンクを検索し、click()でクリックの指示をしています。
page.get_by_role("link", name="Get started").click()
スクリーンショット
page.screenshot(path="installation.png")
ブラウザを閉じる
browser.close()
5.まとめ
今回はブラウザテストの自動化ツールについて触ってみました。
簡単にスクリーンショットまでの手順をハンズオンとして残しましたが、実際は入力、セレクト、ページ遷移など通常のブラウザ操作と同等のことができるので、テストで活用できるなと感じました。テストファイルではデータのやり取りなどしかわかりにくいので、ブラウザ上でどのような挙動かを確認するにはいいなーという印象です