【python】playwrightの実行中の操作を録画する方法

1. やりたいこと

Webブラウザのテストはしばしばテストの実行操作を後々見返したい時があります。
これを実現するためにplaywrightのtracing機能を活用し、実行中の操作を録画します。

2.　環境

playwrighとpytestが入っている環境を用意します。環境構築方法は、別記事に記載しています。
　・macOS 12.4(monterey)
　・Python 3.7.6
　・pip 22.1
　・pytest 6.2.5
　・playwright 1.16.2

フレームワーク	コンテンツ
playwright	マイクロソフト社が実行ブラウザを自動化する
pytest	Pythonで、このプログラムをする

3. 環境設定

rootフォルダの直下に実行ファイルとエビデンスを保管するためのフォルダを作成します。
※ 実行ファイルのファイル名は、pytestの仕様上「test_xxx.py」としてください。

root
|- evidence
|- test_sample.py

4. コード

実行ファイルに下記のようなプログラムを書きます。
自動操作対象のWebサイトは、UI Test Automation Playgroundを利用します。

test_sample.py

from playwright.sync_api import Page, Playwright

def test_click(context,page):
    # 操作記録の開始
    context.tracing.start(screenshots=True, snapshots=True)
    # テスト操作
    page.goto("http://www.uitestingplayground.com/") 
    page.click("text = Click")
    assert page.inner_text("xpath = /html/body/section/div/h3") == "Click" 
    # 操作記録の完了 
    context.tracing.stop(path = "./evidence/evi_test_click.zip")

5. 実行

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

./root

pytest

実行後、evidenceフォルダーにevi_test_click.zipが生成されます。このzipファイルが録画データです。

root
|- evidence
| |- evi_test_click.zip
|- test_sample.py

ターミナルで、「evi_test_click.zip」に対して「playwright show-trace」を実行します。

./root

playwright show-trace ./evidence/evi_test_click.zip

実行結果

test_sample.pyの操作記録が表示されました。

6. 関連記事

・【python】playwrightでE2E評価環境を作る
・【python】playwrightの実行中の操作を録画する方法
・【python】playwrightでログイン処理省略する方法（作成中）