Playwright如何高效处理新窗口和弹窗

在进行网页自动化测试时，经常会遇到点击某个元素后，浏览器弹出一个全新的窗口或标签页的情况。这些新窗口通常用于登录验证、第三方授权、文件下载确认等场景。Playwright 提供了强大且直观的机制来捕获和控制这些新打开的页面，确保自动化流程的顺畅进行。

理解 Playwright 中的新窗口与弹窗

在 Playwright 中，无论是新打开的浏览器标签页还是独立的浏览器窗口，都被视为一个 Page 对象。当一个用户操作（例如点击一个链接或按钮）导致浏览器打开一个新的 Page 对象时，Playwright 能够检测到这个事件。关键在于，我们需要在事件发生之前就做好监听准备。

核心机制：page.expect_popup()

Playwright 提供了一个名为 page.expect_popup() 的上下文管理器，它是处理新窗口或弹窗的核心工具。它的工作原理是：

1. 在 page.expect_popup() 上下文内部执行的操作，如果导致新的 Page 对象被创建，该新的 Page 对象就会被捕获。
2. page.expect_popup() 会等待这个新 Page 对象的出现，并将其作为返回值提供。

重要提示： page.expect_popup() 必须在触发新窗口打开的操作（如 click()）之前被调用。如果先执行了点击操作，新窗口已经打开，那么 expect_popup() 将无法捕获到它。

实战示例：处理登录弹窗

以下是一个实际的例子，演示如何在一个页面上点击登录按钮，然后处理弹出的第三方登录窗口：

from playwright.sync_api import sync_playwright

def handle_steam_login_popup():
    with sync_playwright() as p:
        # 1. 启动浏览器，并设置非无头模式和慢速执行，便于观察
        browser = p.chromium.launch(headless=False, slow_mo=50)
        page = browser.new_page()

        # 2. 导航到目标页面
        page.goto("https://buff.163.com/market/csgo#tab=selling&page_num=1")

        # 3. 点击“登录/注册”按钮，这通常会弹出一个模态框（不是新窗口）
        # 使用更健壮的定位器
        page.get_by_role("link", name="Login/Register").click()
        # 或者 page.locator("xpath=/html/body/div[1]/div/div[3]/ul/li/a").click()

        # 4. 准备捕获即将弹出的新窗口
        # 'with page.expect_popup() as popup_info:' 必须在触发弹窗的点击操作之前
        with page.expect_popup() as popup_info:
            # 5. 在模态框中点击“其他登录方式”按钮，这个操作会触发一个新的浏览器窗口/标签页
            page.get_by_text("Other login methods").click()

        # 6. 获取新弹出的页面对象
        popup_page = popup_info.value

        # 7. 等待弹窗页面加载完成，确保所有元素都已渲染
        popup_page.wait_for_load_state("domcontentloaded") # 或者 "networkidle"

        # 8. 现在可以与弹窗页面进行交互了
        print(f"新弹窗的标题是: {popup_page.title()}")
        print(f"新弹窗的URL是: {popup_page.url}")

        # 示例：在新弹窗中查找并点击一个元素
        # popup_page.get_by_role("button", name="Steam Login").click()
        # ... 进行其他操作 ...

        # 9. 完成操作后，关闭浏览器
        browser.close()

if __name__ == "__main__":
    handle_steam_login_popup()

代码解析

• with sync_playwright() as p:: 初始化 Playwright 环境。
• browser = p.chromium.launch(headless=False, slow_mo=50): 启动 Chromium 浏览器，headless=False 使浏览器可见，slow_mo 增加操作延迟，便于观察。
• page = browser.new_page(): 创建一个新的页面实例，这是我们初始操作的页面。
• page.goto(...): 导航到目标 URL。
• page.get_by_role("link", name="Login/Register").click(): 点击页面上的登录按钮。根据目标网站的实际情况，这可能只是打开一个页面内的模态框，而不是新窗口。
• with page.expect_popup() as popup_info:: 这是核心步骤。它创建了一个上下文，Playwright 将在此上下文中等待新的 Page 对象的出现。
• page.get_by_text("Other login methods").click(): 在 expect_popup 上下文内部执行此点击操作。这个点击是导致新窗口弹出的直接原因。
• popup_page = popup_info.value: 一旦新窗口弹出并被捕获，popup_info.value 就会包含这个新 Page 对象的引用。现在，popup_page 就是我们想要操作的新窗口。
• popup_page.wait_for_load_state("domcontentloaded"): 在尝试与新窗口中的元素交互之前，等待新页面加载完成是一个好习惯。"domcontentloaded" 表示 DOM 结构已加载完毕，"networkidle" 表示网络请求已基本完成。
• popup_page.title() / popup_page.url(): 可以像操作任何其他 Page 对象一样，获取新窗口的标题、URL，或者定位其中的元素并进行交互。

注意事项与最佳实践

1. 执行顺序至关重要：务必将 page.expect_popup() 放在触发新窗口操作（如 click()）之前。如果顺序颠倒，Playwright 将无法捕获到已经弹出的窗口。
2. 等待页面加载：获取 popup_page 对象后，最好使用 popup_page.wait_for_load_state() 等待页面加载完成，以避免在元素尚未渲染时就尝试定位而导致失败。
3. 区分模态框与新窗口：
   • 模态框 (Modal Dialog)：通常是当前页面上叠加的一个浮层，不创建新的 Page 对象。直接通过 page.locator() 或其他定位器在当前 page 对象上操作即可。
   • 新窗口/标签页 (New Window/Tab)：创建了一个新的 Page 对象，需要使用 page.expect_popup() 来捕获。
4. 处理多个弹窗：如果一个操作可能导致多个弹窗，expect_popup() 默认只会捕获第一个。如果需要处理所有弹窗，可能需要更复杂的事件监听机制，例如监听 browser.on("page") 事件，但这超出了本教程的范围。
5. 关闭弹窗：完成对弹窗的操作后，如果不需要保留它，可以调用 popup_page.close() 来关闭该窗口。

总结

通过 page.expect_popup()，Playwright 提供了一种优雅且可靠的方式来处理自动化测试中遇到的新窗口和弹窗。理解其工作原理并遵循正确的操作顺序，能够帮助开发者轻松地扩展自动化脚本，覆盖更复杂的交互场景。记住，关键在于在事件发生之前做好准备，捕获到新的 Page 对象后，即可像操作主页面一样对其进行全面控制。