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