在使用 Playwright 进行 Web 自动化时，页面交互是核心操作之一。无论是访问页面、等待元素加载、截图，还是自动填写表单，Playwright 提供了丰富的 API 来帮助实现这些功能。本文将详细介绍如何使用 Playwright 进行常见的页面交互操作，并深入理解浏览器上下文和其在处理登录和会话管理中的应用。
访问页面：goto()
goto() 方法是 Playwright 中访问网页的主要方法。它不仅可以用于简单的页面导航，还支持许多高级选项，如处理页面跳转和超时等。
基础使用
通过 page.goto() 方法，你可以导航到一个指定的 URL。Playwright 会等待页面的主要内容加载完成后继续执行后续操作。
from playwright.sync_api import sync_playwrightwith 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_playwrightwith 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 进行基础的页面交互，包括访问页面、等待元素加载、页面截图以及填充表单等操作。同时，我们还详细探讨了浏览器上下文的概念，以及如何利用它处理多用户登录和会话管理。通过这些基本操作，你可以构建功能丰富的自动化脚本，并且在测试中处理复杂的用户会话。
