背景
需要模拟一个网站上用户的操作,并且希望记录下来用户的点击步骤和html、css、js、api等
调研
playwright 存在 codegen 功能和 trace viewer 功能
codegen功能:类似屏幕录制功能,会按照你在屏幕上的动作,自动转为可执行的python代码
trace viewer功能:Playwright Trace Viewer 是一个 GUI 工具,可让您探索测试的记录的 Playwright 跟踪,这意味着您可以前后移动测试的每个操作,并直观地查看每个操作期间发生的情况。
这里是的介绍: https://playwright.dev/python/docs/trace-viewer#introduction
思路
无论是 codegen 还是 trace viewer 他们都有两种调用方式
- 命令行
- 代码调用
这里主要介绍用代码的方式实现结合
首先官方没有将两个合并的步骤,但是 codegen 支持自定义功能。异步代码如下
import asyncio
from playwright.async_api import async_playwright
async def main():
async with async_playwright() as p:
# Make sure to run headed.
browser = await p.chromium.launch(headless=False)
# Setup context however you like.
context = await browser.new_context() # Pass any options
await context.route('**/*', lambda route: route.continue_())
# Pause the page, and start recording manually.
page = await context.new_page()
await page.pause()
asyncio.run(main())和AI对话后得知可以同时进行,只是不能用命令行的形式操作。 整体代码如下
from playwright.sync_api import sync_playwright
def run_codegen_with_tracing():
"""
启动一个类似 Codegen 的会话,并同时记录 Trace。
"""
with sync_playwright() as p:
# 你可以指定浏览器,例如 p.firefox 或 p.webkit
browser = p.chromium.launch(headless=False)
context = browser.new_context()
# --- 核心步骤 1: 在所有操作开始前,启动 Tracing ---
print("🚀 Tracing 已启动... 将在会话结束后保存。")
context.tracing.start(
name="codegen-trace", # Trace 文件名的前缀
screenshots=True, # 捕获截图
snapshots=True, # 捕获 DOM 快照 (非常重要!)
sources=True # 包含源代码
)
# 创建一个新页面作为起点
page = context.new_page()
try:
# --- 核心步骤 2: 启动 Playwright Inspector (Codegen 的核心) ---
print("▶️ 启动 Playwright Inspector (Codegen)...")
print("👉 请在弹出的浏览器窗口中进行操作,Inspector 会为你生成代码。")
print("🛑 操作完成后,请直接关闭【浏览器窗口】或【Inspector 窗口】来结束录制。")
# page.pause() 会暂停脚本,并打开 Inspector 工具。
# 这就是 codegen 的魔法所在!
page.pause()
# 当用户关闭浏览器或 Inspector 时,pause() 会结束,代码会继续向下执行。
finally:
# --- 核心步骤 3: 在会话结束后,停止并保存 Trace 文件 ---
print("\n💾 会话结束,正在保存 Trace 文件...")
trace_path = "my_codegen_session.zip"
context.tracing.stop(path=trace_path)
print(f"✅ Trace 文件已成功保存到: {trace_path}")
print(f"👉 你可以使用命令 'playwright show-trace {trace_path}' 来查看它。")
# 清理资源
context.close()
browser.close()
if __name__ == "__main__":
run_codegen_with_tracing()补充
playwright官网没有提到 trace 的代码功能。具体的代码参考:https://github.com/microsoft/playwright-python/blob/3cbe13e58a4a20b4b3aaa1afbdc69747a7c37933/playwright/sync_api/_generated.py#L12729
转载请注明出处