Playwright进阶：录制视频与追踪功能，让自动化过程“看得见、可分析”

在浏览器自动化中，"过程可视化"和"问题溯源"是两大痛点：测试脚本失败时，你是否希望看到完整的操作录像？页面加载缓慢时，你是否需要详细的性能日志？Playwright的**视频录制**和**追踪（Trace）** 功能完美解决了这些问题------前者能记录浏览器操作的全过程，后者能捕捉网络请求、性能指标、DOM变化等底层数据，让自动化过程从"黑盒"变为"透明"。

本文将深入解析Playwright的视频录制与追踪功能，通过实战示例演示如何配置录制参数、生成追踪文件、分析调试数据，让你的自动化脚本不仅能"自动运行"，还能"清晰回溯"和"精准优化"。

一、视频录制：把浏览器操作拍下来

Playwright支持在自动化过程中实时录制视频，无论是单个页面的操作，还是多个标签页的切换，都能完整记录为视频文件。这在测试报告、故障复现、用户行为分析等场景中尤为实用。

1. 基础用法：启动即录制

只需在创建浏览器上下文（BrowserContext）时配置record_video_dir，即可开启视频录制，所有页面操作会自动保存为.webm格式的视频。

python 复制代码

from playwright.sync import sync_playwright

with sync_playwright() as p:
    # 启动浏览器，配置视频保存目录
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        record_video_dir="./videos/",  # 视频保存路径（需提前创建目录）
    )
    
    # 创建页面，执行操作
    page = context.new_page()
    page.goto("https://example.com")
    page.click("a")  # 点击链接
    page.fill("input", "test")  # 输入文本
    page.wait_for_timeout(1000)  # 等待1秒（便于视频观察）
    
    # 关闭上下文时自动保存视频
    context.close()
    browser.close()

执行后，./videos/目录会生成一个以页面URL和时间戳命名的.webm文件，包含从页面创建到关闭的所有操作画面。

2. 高级配置：定制视频参数

通过record_video_size和record_video_options可定制视频尺寸、质量等参数，适应不同场景需求。

python 复制代码

# 定制视频尺寸和质量
context = browser.new_context(
    record_video_dir="./videos/",
    record_video_size={"width": 1280, "height": 720},  # 固定视频分辨率（默认跟随页面大小）
    record_video_options={
        "crf": 23,  # 视频质量（0-51，值越低质量越高，默认23）
        "preset": "medium"  # 编码速度（ultrafast/fast/medium/slow，速度快则质量略低）
    }
)

参数说明：

record_video_size：固定视频宽高，避免页面缩放导致的视频尺寸变化（如响应式页面）；
crf（Constant Rate Factor）：控制视频质量，0为无损压缩（文件大），51为最低质量（文件小）；
preset：平衡编码速度和压缩效率，测试场景推荐ultrafast（快速生成），正式记录推荐medium（兼顾质量和大小）。

3. 按需录制：指定页面或触发条件

实际场景中可能不需要录制所有操作，可通过"只录制特定页面"或"条件触发录制"减少资源消耗。

（1）只录制单个页面

python 复制代码

context = browser.new_context()  # 全局不开启录制
page1 = context.new_page()  # 不录制
page1.goto("https://example.com")

# 只为page2开启录制
page2 = context.new_page(
    record_video_dir="./videos/",
    record_video_size={"width": 1280, "height": 720}
)
page2.goto("https://example.com/form")
page2.fill("input", "只录我")
page2.close()  # 关闭页面时保存视频

（2）测试失败时才录制

在自动化测试中，可结合测试框架（如pytest），仅当用例失败时保存视频，节省存储空间：

python 复制代码

# 伪代码：pytest测试用例
def test_login(page):
    try:
        page.goto("/login")
        page.fill("#username", "test")
        page.fill("#password", "wrong_pass")
        page.click("#submit")
        # 断言登录失败提示出现
        assert page.locator("#error").is_visible()
    except AssertionError:
        # 测试失败时，保存当前页面的视频
        page.video.save_as("./failed_videos/login_error.webm")
        raise  # 继续抛出异常，标记测试失败

关键API ：page.video返回当前页面的视频对象，调用save_as(path)可手动指定保存路径。

二、追踪功能（Trace）：捕捉每一个细节

如果说视频是"可视化记录"，那么**追踪（Trace）** 就是"技术级日志"------它能捕捉页面加载过程中的网络请求、DOM快照、JavaScript执行轨迹、性能指标（如FPS、加载时间）等底层数据，生成一个.zip格式的追踪文件，通过Playwright Inspector可回放和分析每一个步骤。

1. 基础用法：记录完整追踪

通过context.tracing的start()和stop()方法，可开启和停止追踪，默认记录所有关键数据。

python 复制代码

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    
    # 1. 启动追踪
    context.tracing.start(
        screenshots=True,  # 记录每个步骤的截图
        snapshots=True,    # 记录DOM快照（可回放时查看任意时刻的DOM）
        sources=True       # 记录页面源代码（HTML/CSS/JS）
    )
    
    # 2. 执行操作（如登录流程）
    page.goto("https://example.com/login")
    page.fill("#username", "user123")
    page.fill("#password", "pass123")
    page.click("#submit")
    page.wait_for_url("https://example.com/dashboard")
    
    # 3. 停止追踪并保存文件
    context.tracing.stop(path="./traces/login_trace.zip")
    
    browser.close()

执行后生成的login_trace.zip包含完整的追踪数据，可通过Playwright Inspector打开分析。

2. 高级配置：按需记录数据

追踪功能会产生较大文件（包含截图、快照等），可通过配置筛选需要记录的数据，减少资源消耗。

python 复制代码

context.tracing.start(
    path="./traces/performance_trace.zip",  # 提前指定保存路径
    screenshots=False,  # 不记录截图（减小文件大小）
    snapshots=True,
    sources=False,      # 不记录源代码
    categories=[        # 只记录指定类别的追踪数据
        "devtools.timeline",  # 时间线（性能指标）
        "v8.execute"          # V8引擎执行记录（JS执行）
    ]
)

常用 **categories****类别**：

devtools.timeline：包含页面加载、渲染、脚本执行的时间线数据，用于性能分析；
network：记录所有网络请求（请求头、响应体、耗时），类似Chrome的Network面板；
blink.console：记录控制台输出（console.log等）；
v8：记录V8引擎的JS执行细节（函数调用、内存分配）。

3. 分段追踪：聚焦关键流程

对于长流程自动化，可分阶段记录追踪（如"登录""操作""退出"），避免单个文件过大。

python 复制代码

# 阶段1：登录过程追踪
context.tracing.start(screenshots=True, path="./traces/login.zip")
page.goto("/login")
page.fill("#username", "user")
page.click("#submit")
context.tracing.stop()  # 保存登录阶段的追踪

# 阶段2：核心操作追踪（不记录截图，减小文件）
context.tracing.start(screenshots=False, path="./traces/operation.zip")
page.click("#edit")
page.fill("#content", "test content")
context.tracing.stop()

三、分析追踪文件：用Playwright Inspector深度调试

生成的追踪文件（.zip）需要用**Playwright Inspector**工具打开，它能可视化展示所有记录的数据，支持时间线回放、网络请求查看、DOM快照分析等。

1. 打开追踪文件

通过命令行启动Inspector并加载追踪文件：

bash 复制代码

playwright show-trace ./traces/login_trace.zip

会自动打开一个网页版工具，包含以下核心面板：

Timeline：时间线视图，展示所有操作（点击、输入、页面跳转）的时间点和耗时；
Actions：自动化操作列表，可点击查看每个步骤的截图、DOM状态；
Network：网络请求详情（类似Chrome DevTools的Network面板）；
Performance：性能指标（FPS、CPU使用率、内存占用）；
Console：页面控制台输出的日志。

2. 实用分析技巧

（1）定位操作失败原因

如果脚本在page.click("#submit")处失败，在Inspector的Actions面板找到该步骤：

查看对应的截图，确认按钮是否可见（可能被弹窗遮挡）；
检查DOM快照，确认按钮的disabled属性是否为true（可能未满足点击条件）；
查看Network面板，确认前序请求是否成功（可能数据未加载完成）。

（2）分析页面加载性能

在Performance面板可查看页面加载的关键指标：

First Contentful Paint（FCP）：首次内容绘制时间；
Time to Interactive（TTI）：页面可交互时间；
识别长任务（Long Tasks）：耗时超过50ms的JS执行，可能导致页面卡顿。

（3）复现网络问题

在Network面板可筛选慢请求（如耗时>1s的API），查看请求头、响应体和Timing详情，定位接口性能问题或参数错误。

四、实战案例：结合视频与追踪调试登录失败

假设一个登录脚本偶尔失败，错误提示"无法找到提交按钮"，结合视频和追踪功能排查问题：

python 复制代码

def debug_login():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        # 1. 配置视频录制
        context = browser.new_context(
            record_video_dir="./videos/",
            record_video_size={"width": 1280, "height": 720}
        )
        page = context.new_page()
        
        # 2. 启动追踪（记录所有细节）
        context.tracing.start(
            screenshots=True,
            snapshots=True,
            sources=True,
            path="./traces/login_debug.zip"
        )
        
        try:
            page.goto("https://example.com/login")
            # 模拟可能的延迟：等待页面加载完成
            page.wait_for_selector("#username", state="visible")
            page.fill("#username", "test_user")
            page.fill("#password", "test_pass")
            # 可能失败的步骤：点击提交按钮
            page.click("#submit", timeout=5000)
            page.wait_for_url("**/dashboard")
            print("登录成功")
        except Exception as e:
            print(f"登录失败：{e}")
            # 失败时单独保存视频和追踪文件
            page.video.save_as("./videos/login_failed.webm")
            context.tracing.stop(path="./traces/login_failed.zip")
        finally:
            context.close()
            browser.close()

debug_login()

排查步骤：

观看login_failed.webm，发现点击按钮时页面突然刷新（可能是网络波动导致的意外跳转）；
在login_failed.zip的Network面板，看到点击前有一个/session/expire请求（会话过期），导致页面刷新；
结论：需在登录前检查会话状态，避免过期时执行操作。

五、注意事项与最佳实践

性能影响：视频录制和追踪会消耗额外的CPU、内存和磁盘空间（尤其是开启截图和快照时），建议：
1. 测试环境按需开启，生产环境关闭；
2. 长流程自动化采用分段记录，避免单个文件过大。
视频格式与兼容性 ：录制的视频为.webm格式（支持Chrome、Firefox等浏览器播放），如需转换为MP4，可使用ffmpeg：
bash 复制代码
```
ffmpeg -i input.webm output.mp4
```
追踪文件的时效性：追踪文件包含页面快照和源代码，建议在问题复现后立即分析，避免页面结构更新导致数据失效。

结合测试框架 ：在pytest等框架中，可通过fixture统一配置视频和追踪，实现"失败自动记录"：

python 复制代码

# pytest fixture示例
import pytest
from playwright.sync import sync_playwright

@pytest.fixture
def page():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context(record_video_dir="./videos/")
        context.tracing.start(screenshots=True)
        page = context.new_page()
        yield page
        # 测试结束后，如失败则保存追踪
        if request.node.rep_call.failed:
            context.tracing.stop(path=f"./traces/{request.node.name}.zip")
        context.close()
        browser.close()

六、总结：让自动化过程"可追溯、可分析"

Playwright的视频录制和追踪功能，从"可视化"和"技术细节"两个维度解决了自动化调试的痛点：

视频录制让操作过程"看得见"，适合快速定位UI交互问题；
追踪功能让底层数据"可分析"，适合排查性能瓶颈、网络问题和DOM异常。

无论是测试工程师需要复现失败用例，还是开发者优化页面加载速度，这两个功能都能大幅提升问题解决效率。记住：自动化不仅要"能跑"，更要"跑得明白"------视频和追踪，就是让你"明白"的最佳工具。