Chrome DevTools Protocol 进阶: Page域

前言

本章开始我们将进一步学习 Chrome DevTools Protocol(CDP),首先切入的内容是 CDP 中的

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

Page 域简介

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

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

页面导航

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

示例:导航到指定页面

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

import websockets
import asyncio
import jsonasync def navigate_to_page():async with websockets.connect("ws://localhost:9222/devtools/page/B4EF107BC21795900A6A92727AB9E5A7") as websocket:# 发送导航命令,加载指定 URLcommand = {"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 base64import websockets
import asyncio
import jsonasync 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 弹窗(如 alertconfirmprompt)时,Page 域的 Page.javascriptDialogOpening 事件会捕获这些弹窗的出现。你可以通过 Page.handleJavaScriptDialog 命令来处理弹窗。

示例:处理页面中的弹窗

import asyncio
import websockets
import jsonasync 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.javascriptDialogOpeningaccept 参数指定了是否接受弹窗,针对 confirmprompt 对话框,可以根据需求设置。

页面事件监听

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

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

示例:监听页面加载事件

import asyncio
import websockets
import jsonasync 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 域的功能及其在实际中的应用!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/16037.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

电动采光排烟大窗施工常见问题

电动采光排烟天窗施工常见问题可能涉及多个方面,包括施工前的准备、施工过程中的操作以及施工后的维护等。以下是对这些常见问题的归纳和分析。 一、施工前的准备问题 1、现场勘查不足,可能导致天窗尺寸、形状和材质不符合建筑设计要求; 2…

关于VUE NPM安装失败的问题

最近使用 npm install --registryhttps://registry.npmmirror.com 安装一个新项目的依赖,各种失败。 最后发现是package-lock里面有老的淘宝的域名,整体替换掉就行了

51单片机应用开发---LCD1602显示应用

实现目标 1、了解LCD1602液晶屏; 2、掌握驱动程序的编写; 3. 具体目标:在屏幕上显示字符。 一、LCD1206概述 1.1 定义 LCD1602(Liquid Crystal Display)液晶显示屏是一种字符型液晶显示模块,可以显示ASCII码的标准字符和其它的一些内置…

解决Clion相对路径失效的问题

Clion相对路径失效的可能原因 工作目录不对相对路径错误 解决方法 设置工作目录 点击 工作文件 将工作路径置空 (或设置正确的工作路径) 之后便可完美解决 设置全局路径 这样即可解决 希望能帮助到你

香港电讯连续蝉联香港01「大湾区企业同创大奖」

香港电讯非常荣幸地连续第四年荣获「香港01大湾区企业同创大奖」殊荣,以表扬我们在大湾区业务所取得的卓越成绩,以及我们积极促进区内跨境业务方面的贡献。 面对企业拓展业务的迫切需求,香港电讯提供全面的跨境数码方案,包括SD-WA…

Vue3.js - 一文看懂Vuex

1. 前言 Vuex 是 Vue.js 的官方状态管理库,用于在 Vue 应用中管理组件之间共享的状态。Vuex 适用于中大型应用,它将组件的共享状态集中管理,可以避免组件间传递 props 或事件的复杂性。 2. 核心概念 我们可以将Vuex想象为一个大型的Vue&…

PdServer:调用MidjourneyAPI完成静夜思图文生成

欢迎沟通讨论,WX: cdszsz。公号:AIGC中文站。 今天我们将使用PdServer,通过Qwen大模型完成古诗的解析与prompt的生成,然后调用MidjourneyAPI完成图片的生成。有了文案和图片,我们就可以将其生成为一个古诗讲读视频。从…

融合创新:CNN+LSTM在深度学习中的高效应用,助力科研发表高影响因子文章!

2024深度学习发论文&模型涨点之——CNNLSTM 结合CNN(卷积神经网络)和LSTM(长短期记忆网络)是一种常见的深度学习模型组合,广泛应用于各种任务,特别是时间序列预测和序列数据处理。 CNNLSTM是一种深度学…

20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速

20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速 2024/11/14 21:09 《OK3588-C_Linux5.10.66Qt5.15.2_用户使用手册_V1.2_20240321.pdf》 飞凌文档上的配置有点不一样,需要修正: 3.2.15 以太网配置 OK3588-C板载两个千…

鸿蒙开发,Arkts 如何调用接口

面向万物互联时代,华为提出了“一次开发多端部署、可分可合自由流转、统一生态原生智能”三大应用与服务开发理念。针对多设备、多入口、服务可分可合等特性,华为提供了多种能力协助开发者降低开发门槛。在此背景下,HarmonyOS基于JS/TS语言体…

JavaScript方法修改 input type=file 样式

html中的<input type "file">的样式很难修改&#xff0c;又跟页面风格很不匹配。我就尝试了几种方法&#xff0c;但是不管是用label还是用opacity:0都很麻烦&#xff0c;还老是出问题&#xff0c;所以最后还是用JavaScript来解决。 下面附上代码&#xff1a;…

安装仓库,ssh以及NFS

安装仓库 1、源码安装 >自定义组件 2、软件包安装&#xff1a;rpm / dpkg ↓ (.rpm) / (.deb) 3、apt / yum >仓库 apt仓库&#xff1a; 安装源 >在线 / 离线 >包含可用的deb包 ↓ 元信息>包与包之间的依赖关系 在线源&#xff1a;必须要联网&#xff0c;包…

[Docker#9] 存储卷 | Volume、Bind、Tmpfs | -v/mount | MySQL 灾难恢复 | 问题

目录 1. 什么是存储卷? 2. 生活案例 3. 为什么需要存储卷? 4. 存储卷分类 一. 管理卷 Volume 创建卷 通过 -v 或 --mount 指定 1. -v 语法 命令格式 参数说明 2. --mount 语法 命令格式 参数说明 验证 二. 绑定卷 (Bind Mount) 1. 绑定卷概述 2. 创建绑定卷…

CVPR2024-6-可学习点云采样“LTA-PCS: Learnable Task-Agnostic Point Cloud Sampling”

文章摘要&#xff1a; 最近&#xff0c;许多方法直接对不同任务的点云进行操作。当点云尺寸较大时&#xff0c;这些方法的计算量和存储要求更高。为了减少所需的计算和存储&#xff0c;一种可能的解决方案是对点云进行采样。在本文中&#xff0c;我们提出了第一个可学习的与任务…

react + ts定义接口类型写法

接口&#xff08;未进行ts定义&#xff09; export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any }, ) {return request<API1.UserList>(http://geek.itheima.net/v1_0/mp/artic…

数据库基础

数据库基础 什么是数据库主流数据库数据库的基本使用连接服务器服务器管理服务器、数据库、表之间的关系数据库基本指令 MySQL架构SQL分类存储引擎什么是存储引擎查看存储引擎存储引擎对比 什么是数据库 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库&#xff1f; …

【论文复现】基于标签相关性的多标签学习

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀基于标签相关性的多标签学习 论文概述什么是多标签学习论文贡献 算法流程挖掘“主题“——提取标签相关性训练 &#x1d440; &#x1d447; …

MMCloud+JuiceFS:云端Nextflow工作流的新方案

在云计算和生物信息学领域&#xff0c;执行大规模计算任务时的性能与成本效率至关重要。MemVerge推出的JuiceFlow通过JuiceFS和云端Memory Machine Cloud&#xff08;简称“MMCloud”&#xff09;平台&#xff0c;为Nextflow工作流&#xff08;pipeline&#xff09;提供了一种高…

【Linux】 shell 学习汇总[转载]

转载地址&#xff1a;https://blog.csdn.net/baidu_33718858/article/details/81453835 一些平时使用过程中的知识点积累&#xff0c;来源都附上了博客&#xff0c;添加了一些自己的总结。 感触&#xff1a;linux命令用熟了相当提高工作效率&#xff0c;有时候用Python写十几行…

天云数据联手举办“科学传播沙龙”活动,探讨Sora是否会带来新的科学革命

4月18日&#xff0c;由北京市科协主办&#xff0c;北京科技记协承办&#xff0c;中关村创新研修学院、天云融创数据科技&#xff08;北京&#xff09;有限公司协办的“AIGC塑造数字内容生产新范式”科学传播沙龙在京举办&#xff0c;活动由北京市科协宣传文化部二级调研员、北京…