Chrome DevTools Protocol 进阶: Page域

前言

本章开始我们将进一步学习 Chrome DevTools Protocol（CDP），首先切入的内容是 CDP 中的域。

在 Chrome DevTools Protocol（CDP） 中，Page 域 是一个至关重要的部分，它负责控制浏览器页面的导航、加载、渲染以及其他与页面相关的操作。通过 Page 域，你可以执行页面跳转、截图、处理弹窗事件、监听导航和加载事件等任务。本文将详细介绍 Page 域的常见操作，并演示如何通过这些操作实现对页面的控制。

Page 域简介

Page 域是与浏览器页面交互的主要接口，它提供了多种与页面加载和导航相关的命令和事件，常用功能包括：

• 页面导航：加载指定的 URL。
• 页面截图：截取当前页面的全屏或部分区域。
• 弹窗控制：处理页面中的弹窗事件，如 alert、confirm 和 prompt。
• 事件监听：捕获页面导航、加载等相关事件。

页面导航

通过 Page 域的 Page.navigate 命令，你可以让浏览器加载特定的 URL。这是使用 CDP 控制页面的基础功能。

示例：导航到指定页面

以下是一个简单的示例，展示如何使用 Page.navigate 命令：

import websockets
import asyncio
import json

async def navigate_to_page():
    async with websockets.connect("ws://localhost:9222/devtools/page/B4EF107BC21795900A6A92727AB9E5A7") as websocket:
        # 发送导航命令，加载指定 URL
        command = {
            "id": 1,
            "method": "Page.navigate",
            "params": {
                "url": "https://www.example.com"
            }
        }
        await websocket.send(json.dumps(command))

        # 接收响应
        response = await websocket.recv()
        print(response)

# 执行导航
asyncio.get_event_loop().run_until_complete(navigate_to_page())

Page.navigate 命令的 url 参数指定了需要加载的页面。浏览器在收到命令后会导航到指定 URL，并返回导航状态。

注意：ws://localhost:9222/devtools/page/B4EF107BC21795900A6A92727AB9E5A7获取方式可参见 《Chrome DevTools Protocol 入门：快速开始》。

截取页面截图

Page.captureScreenshot 是 Page 域中另一个常用的功能，它可以帮助我们获取当前页面的截图。你可以截取整个页面、视口内的区域，甚至指定的元素区域。

示例：获取页面截图

以下是如何使用 Page.captureScreenshot 命令的示例：

import base64

import websockets
import asyncio
import json

async def screenshot_page():
    async with websockets.connect("ws://localhost:9222/devtools/page/B4EF107BC21795900A6A92727AB9E5A7") as websocket:
        command = {
            "id": 1,
            "method": "Page.captureScreenshot",
            "params": {
                "url": "https://www.example.com"
            }
        }
        await websocket.send(json.dumps(command))

        # 接收响应
        response = await websocket.recv()
        screenshot_data = json.loads(response)["result"]["data"]
        # 将截图保存到本地
        with open("screenshot.png", "wb") as f:
            f.write(base64.b64decode(screenshot_data))

# # 执行导航
asyncio.get_event_loop().run_until_complete(screenshot_page())

这个示例会截取当前页面的屏幕截图，并将其保存为 PNG 文件。通过 Page.captureScreenshot 命令，你可以很方便地获取页面的快照，适用于自动化测试和可视化检查。

以下为 screenshot.png文件：

弹窗控制

当页面触发 JavaScript 弹窗（如 alert、confirm 或 prompt）时，Page 域的 Page.javascriptDialogOpening 事件会捕获这些弹窗的出现。你可以通过 Page.handleJavaScriptDialog 命令来处理弹窗。

示例：处理页面中的弹窗

import asyncio
import websockets
import json


async def listen_alert_event():
    # 连接到 Chrome CDP WebSocket 调试接口
    async with websockets.connect('ws://localhost:9222/devtools/page/8FBD6EACAB138EA9912E13579F0C3FF6') as websocket:
        # 启用页面事件监听
        await websocket.send(json.dumps({
            "id": 1,
            "method": "Page.enable"
        }))

        # 监听 `Page.javascriptDialogOpening` 事件
        while True:
            response = await websocket.recv()
            event_data = json.loads(response)

            # 检查是否为 alert 对话框事件
            if event_data.get("method") == "Page.javascriptDialogOpening":
                print(f"Alert Dialog Opened: {event_data['params']['message']}")

            # 可以根据需要处理其他事件或命令的响应
            print(event_data)


# 启动事件监听器
asyncio.run(listen_alert_event())

这个例子会监听弹窗事件，并在弹窗出现时自动接受并关闭弹窗。Page.javascriptDialogOpening 的 accept 参数指定了是否接受弹窗，针对 confirm 和 prompt 对话框，可以根据需求设置。

页面事件监听

Page 域支持多个与页面生命周期相关的事件监听功能，如导航开始和完成、页面加载状态等。以下是一些常见的事件：

• Page.frameStartedLoading：页面开始加载。
• Page.frameNavigated：页面导航完成。
• Page.loadEventFired：页面加载事件触发。

示例：监听页面加载事件

import asyncio
import websockets
import json


async def listen_alert_event():
    # 连接到 Chrome CDP WebSocket 调试接口
    async with websockets.connect('ws://localhost:9222/devtools/page/8FBD6EACAB138EA9912E13579F0C3FF6') as websocket:
        # 启用页面事件监听
        await websocket.send(json.dumps({
            "id": 1,
            "method": "Page.enable"
        }))

        while True:
            response = await websocket.recv()
            event_data = json.loads(response)
            # 捕获页面开始加载事件
            if event_data.get("method") == "Page.frameStartedLoading":
                print("Page started loading")

            # 捕获页面导航事件
            if event_data.get("method") == "Page.frameNavigated":
                print("Page navigation completed")

            # 捕获页面加载完成事件
            if event_data.get("method") == "Page.loadEventFired":
                print("Page load event fired")


# 启动事件监听器
asyncio.run(listen_alert_event())

通过这个代码片段，程序可以监听并响应页面的加载和导航事件，帮助开发者更好地跟踪页面状态变化。

总结

Page 域 是 Chrome DevTools Protocol 中极其重要的一部分，它允许你通过 CDP 实现对页面的控制，包括导航、截屏、弹窗处理、事件监听等多种操作。通过本文介绍的这些功能，你可以在自动化测试、浏览器调试和页面交互的过程中充分利用 Page 域的强大功能。

在后续的文章中，我们将继续探讨其他 CDP 域的更多应用场景，帮助你更全面地掌握 Chrome DevTools Protocol。

希望这篇文章能够帮助你深入了解 Page 域的功能及其在实际中的应用！