【Python】Playwright：页面交互

时间：2024-10-23 15:40:46

在使用 Playwright 进行 Web 自动化时，页面交互是核心操作之一。无论是访问页面、等待元素加载、截图，还是自动填写表单，Playwright 提供了丰富的 API 来帮助实现这些功能。本文将详细介绍如何使用 Playwright 进行常见的页面交互操作，并深入理解浏览器上下文和其在处理登录和会话管理中的应用。

访问页面：goto()

goto() 方法是 Playwright 中访问网页的主要方法。它不仅可以用于简单的页面导航，还支持许多高级选项，如处理页面跳转和超时等。

基础使用

通过 page.goto() 方法，你可以导航到一个指定的 URL。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')  # 访问网页
    print(page.title())  # 输出页面标题
    browser.close()

上面的代码会在浏览器中打开 https://example.com 并输出页面的标题。

高级选项

你可以为 goto() 方法提供更多选项来控制页面加载行为：

  • timeout：设定超时时间（以毫秒为单位），超过该时间会抛出错误。
  • wait_until：设定页面加载完成的条件，如 load（等待完全加载）、domcontentloaded（等待 DOM 内容加载）、networkidle（等待网络空闲）等。

示例：

page.goto('https://example.com', timeout=10000, wait_until='networkidle')

这个示例中，goto() 方法会等待网络空闲，并设置10秒的超时时间。

等待元素加载：wait_for_selector()

在页面加载的过程中，某些元素可能并不会立刻呈现。这时，使用 wait_for_selector() 方法可以帮助我们等待特定元素的出现或消失。

基础使用

wait_for_selector() 等待页面中的某个元素出现后，才会继续执行后续操作。

page.goto('https://example.com')
page.wait_for_selector('h1')  # 等待 h1 元素出现
print(page.title())

在上面的代码中，Playwright 会等待页面中的 <h1> 元素加载完成后再输出页面的标题。

高级使用

你可以为 wait_for_selector() 添加更多参数来指定条件，如：

  • state：可以指定等待元素的状态，如 visible、hidden、attached、detached。
  • timeout：设置等待的超时时间，超时则会抛出异常。

例如，等待某个按钮变为可见状态：

page.wait_for_selector('button#submit', state='visible', timeout=5000)

页面截图：screenshot()

Playwright 提供了内置的 screenshot() 方法，可以非常方便地对当前页面或特定元素进行截图操作。

页面截图

你可以使用 screenshot() 方法为整个页面截图，并将截图保存为 PNG 文件。

page.goto('https://example.com')
page.screenshot(path='example.png')  # 保存截图

元素截图

如果你只想对页面中的某个特定元素进行截图，也可以通过 screenshot() 方法实现。使用 locator() 选择元素后，再调用 screenshot()：

element = page.locator('h1')
element.screenshot(path='element.png')

这会将页面中的 <h1> 元素截图并保存为 element.png 文件。

高级选项

screenshot() 方法还提供一些有用的参数，如：

  • full_page：如果为 True，Playwright 会截取整个页面，包括页面滚动后的部分。
  • quality：可以指定JPEG截图的质量（PNG格式不支持）。
page.screenshot(path='example.png', full_page=True)

填充表单：fill()

fill() 是 Playwright 用来自动填写表单输入框的方法，它接受两个参数：选择器和输入的值。

基础使用

以下代码示例展示了如何填写一个登录表单：

page.goto('https://example.com/login')
page.fill('input[name="username"]', 'myusername')  # 填写用户名
page.fill('input[name="password"]', 'mypassword')  # 填写密码
page.click('button[type="submit"]')  # 提交表单

填写下拉菜单和复选框

对于复选框和下拉菜单，Playwright 提供了 check() 和 select_option() 方法。

  • 复选框操作：
page.check('input[name="agree"]')  # 勾选复选框
  • 下拉菜单操作：
page.select_option('select[name="options"]', 'value1')  # 选择下拉菜单中的某个选项

浏览器上下文：处理登录或会话管理

浏览器上下文（Browser Context） 是 Playwright 中的一个强大功能，它允许我们在同一浏览器实例中创建多个独立的会话环境。每个上下文有自己的 cookie、缓存和本地存储，因此可以独立地处理多个用户会话或窗口。

创建新的浏览器上下文

通过 browser.new_context() 方法可以创建一个新的上下文，每个上下文都是彼此独立的。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    
    # 创建用户1的上下文
    context1 = browser.new_context()
    page1 = context1.new_page()
    page1.goto('https://example.com/login')
    
    # 创建用户2的上下文
    context2 = browser.new_context()
    page2 = context2.new_page()
    page2.goto('https://example.com/login')

    browser.close()

在上面的代码中，我们为两个用户创建了独立的上下文，每个上下文可以在相同的浏览器实例中运行，而不会共享 session、cookie 或本地存储。

上下文的实际应用：登录持久化

有时候，我们需要在不同的测试中保留登录状态，这时可以使用上下文的 storage_state 来保存和加载会话。

  • 保存会话状态：
context = browser.new_context()
page = context.new_page()
page.goto('https://example.com/login')
# 模拟登录
page.fill('input[name="username"]', 'myusername')
page.fill('input[name="password"]', 'mypassword')
page.click('button[type="submit"]')
# 保存登录状态
context.storage_state(path='auth.json')
  • 加载会话状态：
context = browser.new_context(storage_state='auth.json')  # 加载之前保存的登录状态
page = context.new_page()
page.goto('https://example.com/dashboard')  # 直接进入登录后的页面

使用上下文的 storage_state() 方法，可以保存当前会话中的 cookie 和本地存储，并在后续测试中加载这些数据，实现无缝的登录持久化。

总结

本文介绍了如何使用 Playwright 进行基础的页面交互，包括访问页面、等待元素加载、页面截图以及填充表单等操作。同时，我们还详细探讨了浏览器上下文的概念，以及如何利用它处理多用户登录和会话管理。通过这些基本操作，你可以构建功能丰富的自动化脚本，并且在测试中处理复杂的用户会话。

相关文章