软件测试|web自动化测试神器playwright教程（三十六）

playwright Trace Viewer 追踪功能

前言

在我们日常执行自动化测试工作的过程中，经常会遇到一些偶发性的bug，但是因为bug是偶发性的，我们不一定每次执行都能复现，所以我们在测试执行的时候，追踪用例执行就变得非常重要了。playwright提供了一个Playwright Trace Viewer工具来追踪测试执行，这是一个GUI工具，我们可以通过它探索记录的 Playwright 测试跟踪，可以在测试的每个操作中前后移动，并直观地查看每个操作期间发生的情况。

Trace Viewer 追踪功能

可以使用browser_context.tracing API 记录跟踪，代码如下所示：

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://playwright.dev")
    context.tracing.stop(path="trace.zip")



with sync_playwright() as playwright:
    run(playwright)

我们可以看到，在文件夹中会多出一个名为trace.zip，我们可以使用playwright cli或者在浏览器中打开保存的跟踪trace.playwright.dev。命令如下：

playwright show-trace trace.zip

文件查看

运行上述命令后，我们可以查看生成的trace.zip内容，我们可以单击左侧的操作或者上方的时间轴来查看测试痕迹，并且查看操作前后页面的状态。在测试的每个步骤中检查日志、源和网络。跟踪查看器创建一个 DOM 快照，因此我们可以与其完全交互，打开 devtools 等。如下图：

使用示例

我们以在百度首页进行搜索的操作为例，记录我们的操作过程，代码如下：

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("playwright")
    page.locator("#kw").press("Enter")
    with page.expect_popup() as page1_info:
        page.get_by_role("link", name="microsoft/playwright - GitHub").click()
    page1 = page1_info.value

    context.tracing.stop(path="trace.zip")

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

查看文件

我们可以通过上面介绍的命令行方式可以打开trace.zip文件，这个方法我们现在不做赘述，我们来介绍另外一个方法，就是通过访问https://trace.playwright.dev/，选择我们录制好的trace.zip文件，将其拖拽到页面中，即可打开。

我们可以从trace中获得如下信息

• 页面展示

我们可以看到我们每一步操作的页面截图，查看页面展示是否完整，如下所示：

• 查看操作前后的页面变化，通过点击不同按钮，查看页面变化

• 展示操作完整信息，操作的时间点，耗时，元素定位等信息都会被展示

总结

本文主要介绍了playwright的追踪工具Trace Viewer的使用，Trace Viewer功能非常强大，提供的信息非常完整，便于我们去定位问题。