【python】playwrightでE2E評価環境を作る

1.やりたいこと

PlaywrightでWebブラウザの操作を行い、操作結果をpytestで管理できるよう環境構築します。
自動操作対象のWebサイトは、UI Test Automation Playgroundを利用します。

用語の説明

フレームワーク	説明
Playwright	マイクロソフト社が作っているブラウザを自動で操作する
pytest	Pythonで書いたプログラムをテストする

2.環境

macOSでPlaywrightの環境を構築します。
　・macOS 12.4(monterey)
　・Python 3.7.6
　・pip 22.1

3.環境設定

ターミナルを起動させ以下コマンドを実行します。
pip listでplaywrightとpytestがあればインストール成功です。

ターミナル

pip install playwright
pip install pytest-playwright

rootフォルダの直下に実行ファイルを作成します。
※ 実行ファイルのファイル名は、pytestの仕様上「test_xxx.py」としてください。

root
┣ test_sample.py

4.コード

実行ファイルに下記のようなプログラムを書きます。
test_click1(page)は成功ケースでtest_click２(page)は失敗するようなコードを作成しました。
※ 実行ファイルのテスト関数は、pytestの仕様上「def test_xxx（）：」としてください。

test_sample.py

from playwright.sync_api import Playwright, sync_playwright
def test_click1(page):
    #対象のURLに遷移する
    page.goto("http://www.uitestingplayground.com/") 
    #テキストと一致した名称の要素を押す
    page.click("text = Click")
    #イベント発生後出現する要素の値がClickであるか確認する。
    assert page.inner_text("xpath = /html/body/section/div/h3") == "Click" 

def test_click2(page):
    #対象のURLに遷移する
    page.goto("http://www.uitestingplayground.com/") 
    #テキストと一致した名称の要素を押す
    page.click("text = Click")
    #イベント発生後出現しない要素を設定する。（test_click2が失敗するようにする）
    assert page.inner_text("xpath = /html/body/section/div/h3") == "Click!" 

5. 実行

ターミナルを起動後rootフォルダーに移動し、「pytest」を実行します。

./root

pytest

実行結果

「pytest」を実行することで、test_sample.pyが実行し結果が返されます。 １件成功、１件失敗というメッセージが出力しました。

6. 複数のテストファイルの実行

rootフォルダの直下に実行ファイルを複数作成し、「pytest」を実行します。

root
┣ test_sample.py
┣ test_sample2.py
┣ test_sample3.py

実行結果

rootフォルダの直下の「test_xxx.py」すべて実行します。

7. 設定ファイルの活用

playwrightには、pytestのCLIを持っています。このCLIをINIファイルで管理できます。
例えば下記sample1.py、sample2.pyでpage.gotoのURLの値に共通部分があります。
この値をbase_urlとしてINIファイルで管理することができます。

test_sample１.py

from playwright.sync_api import Playwright, sync_playwright
def test_click(page):
    page.goto("http://www.uitestingplayground.com/") 
    page.click("text = Click")                                               

test_sample2.py

from playwright.sync_api import Playwright, sync_playwright
def test_click(page):
    page.goto("http://www.uitestingplayground.com/click") 
    page.click("#badButton")                                              

実行ファイルと同階層にpytest.iniを作成します。

root
┣ test_sample1.py
┣ test_sample2.py
┣ pytest.ini

pytest.iniに共通値を記載します。

pytest.ini

[pytest]
addopts = --base_url http://www.uitestingplayground.com/                                             

実行ファイルは、下記のように修正します。

test_sample１.py

from playwright.sync_api import Playwright, sync_playwright
def test_click(page):
    page.goto("/") #設定した値を書かなくて良い
    page.click("text = Click")                                               

test_sample2.py

from playwright.sync_api import Playwright, sync_playwright
def test_click(page):
    page.goto("/click")  #設定した値以降を記載
    page.click("#badButton")                                                

実行結果

「pytest」を実行すると、共通部分を省略した実行ファイルが問題なく動作できます。

pytest.iniで管理できるCLIは、[pytest -h]コマンドで確認できます。

root

pytest -h
〜〜〜〜〜〜結果〜〜〜〜〜〜
Playwright:
  --browser={chromium,firefox,webkit}　Browser engine which should be used
  --headed              Run tests in headed mode.
  --browser-channel=BROWSER_CHANNEL　　Browser channel to be used.
  --slowmo=SLOWMO       Run tests with slow mo
  --device=DEVICE       Device to be emulated.
  --output=OUTPUT       Directory for artifacts produced by tests, defaults to test-results.
  --tracing={on,off,retain-on-failure} Whether to record a trace for each test.
  --video={on,off,retain-on-failure} Whether to record video for each test.
  --screenshot={on,off,only-on-failure}　Whether to automatically capture a screenshot after each test.

8. 関連記事

・【python】playwrightの実行中の操作を録画する方法
・【python】playwrightでパラメータテストする方法
・【python】playwrightでログイン処理省略する方法