《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

1.簡介

在我們日常執行自動化測試工作的過程中，經常會遇到一些偶發性的bug，但是因爲bug是偶發性的，我們不一定每次執行都能復現，所以我們在測試執行的時候，追蹤用例執行就變得非常重要了。playwright提供了一個Playwright Trace Viewer工具來追蹤測試執行，這是一個GUI工具，我們可以通過它探索記錄的 Playwright 測試跟蹤，可以在測試的每個操作中前後移動，並直觀地查看每個操作期間發生的情況。

2.API

Trace View介紹官方API的文檔地址：https://playwright.dev/python/docs/trace-viewer 

3.Trace Viewer 追蹤功能

可以使用browser_context.tracing API 記錄跟蹤。

3.1同步

browser = chromium.launch()
context = browser.new_context()

# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")

3.2異步

browser = await chromium.launch()
context = await browser.new_context()

# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)

await page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")

如果screenshot選項爲True，每個跟蹤都會記錄一個截屏視頻並將其呈現爲膠片，可以將鼠標懸停在膠片上以查看每個操作和狀態的放大圖像，有助於輕鬆找到要檢查的操作。

運行代碼：將記錄跟蹤並將其放入名爲trace.zip.

4.打開跟蹤

運行代碼後，我們可以看到，在文件夾中會多出一個名爲trace.zip，我們可以使用playwright cli或者在瀏覽器中打開保存的跟蹤trace.playwright.dev。命令如下：

playwright show-trace trace.zip

5.查看文件（軌跡）

運行上述命令後，我們可以查看生成的trace.zip內容，我們可以單擊左側的操作或者上方的時間軸來查看測試痕跡，並且查看操作前後頁面的狀態。在測試的每個步驟中檢查日誌、源和網絡。跟蹤查看器創建一個 DOM 快照，因此我們可以與其完全交互，打開 devtools 等。有2種方法可以查看文件（軌跡）。

5.1方法一

通過命令行查看操作過程追蹤。

playwright show-trace trace.zip

5.2方法二

方法2.訪問 https://trace.playwright.dev/ 選擇錄製好的trace.zip文件即可打開。

6.項目實戰

還是以度娘查詢“北京-宏哥”，然後點擊“百度一下”爲例進行演示。

6.1代碼設計

6.2參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-12-06
@author: 北京-宏哥
公衆號：北京宏哥
Project: 《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer
'''

# 3.導入模塊
from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    context.tracing.start(screenshots=True, snapshots=True, sources=True)
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.locator("#kw").click()
    page.locator("#kw").fill("北京-宏哥")
    page.locator("#su").click()
    context.tracing.stop(path="trace.zip")

    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

6.3運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.運行代碼後與代碼同一目錄下看到trace.zip文件。如下圖所示：

6.4查看文件（軌跡）

1.按照前邊講解的方法查看宏哥這裏使用第二種。訪問https://trace.playwright.dev/，選擇我們錄製好的trace.zip文件，將其拖拽到頁面中，即可打開。如下圖所示：

2.我們可以看到我們每一步操作的頁面截圖，查看頁面展示是否完整，如下圖所示：

3.查看操作前後的頁面變化，通過點擊不同按鈕，查看頁面變化，如下圖所示：

4.展示操作完整信息，操作的時間點，耗時，元素定位等信息都會被展示，如下圖所示：

7.創建多個追蹤文件

上邊宏哥講解的是創建一個追蹤文件。那麼如果想使用同一個瀏覽器上下文創建多個跟蹤文件，我們可以先用tracing.start()。然後再使用tracing.start_chunk創建多個跟蹤文件。語法示例如下：

context.tracing.start(name="trace", screenshots=True, snapshots=True)
page = context.new_page()
page.goto("https://playwright.dev")
 
context.tracing.start_chunk()
page.get_by_text("Get Started").click()
# Everything between start_chunk and stop_chunk will be recorded in the trace.
context.tracing.stop_chunk(path = "trace1.zip")
 
context.tracing.start_chunk()
page.goto("http://example.com")
# Save a second trace file with different actions.
context.tracing.stop_chunk(path = "trace2.zip")

有興趣的小夥伴或者童鞋們可以自己實現一下，宏哥這裏由於時間的關係，不在這裏給大家進行演示了。

8.小結

本文主要介紹了playwright的可視化追蹤工具Trace Viewer的使用，Trace Viewer功能非常強大，提供的信息非常完整，便於我們去快速定位問題。 好了，今天時間不早了，關於playwright的可視化追蹤工具Trace Viewer就先介紹講解到這裏。感謝您耐心的閱讀！！！