ブログ
PlaywrightでWebアプリを自動テスト！
こんにちは、T.Uです。
今回はPlaywrightでWebアプリを自動テストする流れを紹介します。
目次
Playwrightとは？
Playwrightは、Microsoftによって開発された、オープンソースのエンドツーエンド（E2E）テスト自動化ツールです。
Chromium、WebKit、Firefoxをサポートし、ヘッドレステストにも対応しています。
また、Python、Node.js、Java、.NETなどの複数の言語に対応しているため、慣れた言語で利用できるのも大きな利点です。
自動テストだけでなく、Webスクレイピングにも利用することができます。
本記事の前提
この記事では、以下の環境を使用しています。
- Python 3.9
- macOS Sequoia
- localhostでWebアプリが起動済み
セットアップ
まずは、Playwrightをセットアップします。
pip install pytest-playwright次に、必要なブラウザをインストールします。
playwright installインストールが完了したら、テストファイルを作成します。
ファイルは、 test_ で始まるようにすることで、pytestがテストファイルだと認識します。
今回は、test_top.py を作成します。
import re
from playwright.sync_api import Page, expect
def test_top(page: Page):
# localhostを開く
page.goto("http://localhost")
# ページタイトルに「Hello World」が含まれるかチェックする
expect(page).to_have_title(re.compile("Hello World"))以下のコマンドを実行します。--headed オプションを指定すると、実際にブラウザが起動して動作を確認できます。
pytest --headedテスト結果が表示され、成功件数が確認できます。
また、テストに失敗した場合は、どこで失敗したかが詳細に表示されます。
テスト対象のアプリ
今回は、以下のようなログインフォームをテストします。
<form id="login-form" method="post">
<input
type="text"
id="username"
class="username"
name="username"
placeholder="ユーザー名"
data-testid="input-username"
>
<input
type="password"
id="password"
class="password"
name="password"
placeholder="パスワード"
data-testid="input-password"
>
<button
type="submit"
id="login-button"
data-testid="button-login"
>
ログイン
</button>
</form>ログインが完了すると、以下のようなHTMLが表示されます。
<h1>こんにちは、テストユーザーさん。</h1>要素の指定方法
Playwrightでは、さまざまな方法でDOM要素を特定できます。
また、自動的に要素が表示可能な状態になるまで待機してくれるため、安定したテストが可能です。
詳細は公式ドキュメントをご参照ください。
locator()で要素を特定する
# IDで特定
page.locator("#username")
# classで特定
page.locator(".username")
# XPathで特定
page.locator("xpath=//*[@id='username']")テキストから要素を特定
page.get_by_text("ようこそ")data-testid属性から要素を特定
page.get_by_test_id("input-username")要素に入力
page.locator("#username").fill("user")要素をクリック
page.locator("#button").click()ログイン機能をテスト
次に、ログイン機能の自動テストを実装してみましょう。test_login.py を作成し、以下のように記述します。
from playwright.sync_api import Page, expect
def test_login(page: Page):
# ログインページにアクセス
page.goto("http://localhost/login")
# ユーザー名とパスワードを入力
page.locator("#username").fill("admin")
page.locator("#password").fill("password")
# ログインボタンをクリック
page.locator("#login-button").click()
# 「こんにちは、テストユーザーさん。」が表示されるかチェック
expect(page.get_by_text("こんにちは、テストユーザーさん。")).to_be_visible()実行すると、ブラウザが起動して自動でテストが行われます。
もちろん、ユーザー名やパスワードが間違っている場合は、テストに失敗します。
まとめ
今回は、Playwrightでログイン機能を自動テストする方法を紹介しました。
自動化テストを導入することで、開発の品質と効率が大きく向上します。
また、Playwrightには他にも以下のような便利な機能があります。
- スクリーンショットの撮影
- 操作を記録してコードを自動生成
- CI/CDとの統合（GitHub ActionsやGitLab CIなど）
株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！