Playwright for Python の Trace 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

しかし screenshots と snapshots を有効化すると 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%]