kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Playwright for Python: ブラウザ操作のデバッグが捗る Trace Viewer

Playwright for PythonTrace Viewer を使うと,ブラウザ操作中に「何が起きていたのか❓」を詳細に探索できる.スクリーンショットや録画だけでは判断できないようなエラーをデバッグするときに使える.また pytest と連携させると自動テスト実行中にトレース情報を取得することもできて便利❗️今回は Trace Viewer を試す.

Trace Viewer を使う

ドキュメントに載っているサンプルコードを参考にしつつ,過去記事でも使ったコード(kakakakakku blog を開いて,キーワード kubernetes で記事を検索する)に Trace Viewer を組み込む.実装自体はとても簡単で,context オブジェクトで tracing.start()tracing.stop() を実行する.たった2行❗️簡単〜

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context()

    context.tracing.start(screenshots=True, snapshots=True, sources=True)

    page = context.new_page()
    page.goto('https://kakakakakku.hatenablog.com/')

    page.get_by_placeholder('記事を検索').click()
    page.get_by_placeholder('記事を検索').fill('kubernetes')
    page.get_by_role('button', name='検索').click()
    page.wait_for_url('https://kakakakakku.hatenablog.com/search?q=kubernetes')

    context.tracing.stop(path = 'traces/trace.zip')

    context.close()
    browser.close()

コードを実行すると traces/trace.zip を取得できる.そして,playwright show-trace コマンドを実行するとトレースを確認するウィンドウが立ち上がる.もしくは「Trace Viewer ウェブサイト」に直接 ZIP ファイルをドラッグアンドドロップすることもできちゃう!

$ playwright show-trace traces/trace.zip

すると,Playwright for Python のアクションごとに「スクリーンショット」「クリック位置」「ネットワークリクエスト情報」を確認できる.時系列になっていて,デバッグが捗るぅ〜😁便利すぎる!

なお context.tracing.start(screenshots=True, snapshots=True, sources=True) のように実装した引数は大きく3種類ある.基本的には全部 True にしておけば良さそう.

  • screenshots: True or False(スクリーンショットを取得するかどうか)
  • snapshots: True or False(Playwright にクリックさせた位置などを取得するかどうか / Network を取得するかどうか)
  • sources: True or False(トレースとコードを紐付けるかどうか)

playwright.dev

しかし screenshotssnapshots を有効化すると ZIP ファイルのサイズがそこそこ大きくなってしまう.今回のシンプルな Playwright コードでも 4.3 MB だった.最終的にはデバッグをするときの情報量とのトレードオフになりそう.

screenshots snapshots sources ZIP size
True True True 4.3 MB
False True True 2.8 MB
False True False 2.8 MB
True False True 1.6 MB
True False False 1.6 MB
False False True 79 KB
False False False 78 KB

pytest 連携

Playwright for Python の pytest 連携を使うと,自動テスト実行中にトレース情報を取得できる.コマンドだと pytest --tracing を使う.引数は以下の3種類から選べるけど,エラー時にトレースを残す retain-on-failure を使うのが良さそう.Node.js だと再試行時にトレースを取得する on-first-retry も選べるけど,Python (pytest) だと選べなかった.

  • on
  • off
  • retain-on-failure

playwright.dev

実際に pytest --tracing retain-on-failure を実行してテストを落としたら,test-results/test-playwright-py-test-playwright-chromium/trace.zip を取得できるようになっていた.特に E2E テストは "Flaky(不安定になりがち)" だったりもするため,トレースを使って原因調査ができるのは便利!

$ pytest --tracing retain-on-failure
test_playwright.py
F                                                                                          [100%]

Playwright for Python 関連記事

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com