一、录制模式

1.1 常规录制

Playwright 也支持录制模式，实现 “0” 代码自动化。

# 通过命令行工具启动脚本录制模式
playwright codegen https://www.volcengine.com/solutions/shortplayvod

执行完上述命令行指令后，会弹出浏览器操作页面，在该页面进行操作时，会自动生成脚本。

1.2 模拟移动端设备录制

playwright open --device="iPhone 14" home.cnblogs.com/u/keima/

二、跟踪与日志

Playwright Trace Viewer 是一个图形用户界面（GUI）工具，它允许您探索已录制的 Playwright 测试跟踪。

2.1 录制跟踪（Trace）

跟踪（Trace）可以通过在运行测试时添加 --tracing 标志来录制。

对于 pytest，你可以使用以下命令来开启跟踪录制：

pytest --tracing on

打开跟踪（Trace）

Playwright 也支持通过命令行或在浏览器上访问 trace.playwright.dev 来打开保存的跟踪文件。

# 使用 Playwright 命令行打开跟踪文件的命令如下：

playwright show-trace trace.zip

三、Playwright 自动等待机制

Playwright 的自动等待机制是其核心特性之一，旨在减少因手动设置等待时间而导致的测试失败问题。以下是关于其自动等待机制原理的详细解析：

3.1 页面加载生命周期与事件监听

Playwright 的自动等待机制基于对浏览器页面加载生命周期的深度理解。它通过监听关键事件（如 load domcontentloaded 和 networkidle）来判断页面是否完成加载。例如：

• 当页面进入 domcontentloaded 状态时，表示 DOM 树已构建完成。
• 当页面进入 load 状态时，表示所有资源（包括图片和样式表）均已加载。
• 当页面达到 networkidle 状态时，表示网络请求已基本停止。

这些状态可以通过以下代码示例进行验证：

page.goto("https://example.com", wait_until="networkidle")

3.2 元素可见性检测

除了页面加载状态外，Playwright 还会自动等待目标元素变为可见或可交互状态。这依赖于对 DOM 的实时监控以及 CSS 可见性属性的检查。例如，当调用 page.click() 或 page.fill() 方法时，Playwright 会确保目标元素不仅存在，而且处于可点击或可输入的状态。

3.3 网络请求同步

对于动态 SPA 应用，Playwright 提供了内置的网络请求等待功能。它能够自动跟踪未完成的 AJAX 请求，并在所有相关请求完成后继续执行下一步操作。这种机制极大地提高了自动化测试的稳定性和可靠性。

3.4 超时机制

尽管 Playwright 提供了自动等待功能，但它也设置了默认的超时时间（通常是 30 秒）。如果在指定时间内未能满足等待条件，则会抛出超时异常。用户可以通过参数调整超时时间，例如：

page.click("button#submit", timeout=5000)

示例代码

以下是一个简单的示例，展示了 Playwright 如何利用自动等待机制完成页面交互：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://example.com")  # 自动等待页面加载完成
    page.fill("input[name='username']", "testuser")  # 自动等待输入框可用
    page.click("button[type='submit']")  # 自动等待按钮可点击
    browser.close()        

四、断言

Playwright 包含了自动重试的断言功能，这些断言通过等待直到条件满足来消除不稳定性，这与在执行操作之前的自动等待机制类似。