当前位置： 首页 > news >正文

Lighthouse组合Puppeteer检测页面

news 2026/2/9 11:43:07

如上一篇文章lighthouse的介绍和基本使用方法结尾提到的一样，我们在实际使用Lighthouse检测页面性能时，通常需要一定的业务前置条件，比如最常见的登录操作、如果没有登录态就没有办法访问其他页面。再比如有一些页面是需要进行一系列的操作，点击某些按钮，调用某些接口完成一些业务之后才能打开某个页面。

Puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

可以做什么

我们在在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成！ 下面是一些示例：

  • 生成页面 PDF。
  • 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
  • 自动提交表单，进行 UI 测试，键盘输入等。
  • 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
  • 捕获网站的 timeline trace，用来帮助分析性能问题。
  • 测试浏览器扩展。

所以我们可以利用Puppeteer先来模拟用户进行一系列的业务操作之后在进行目标页面的检测。

示例

我们以检测爱奇艺的个人账户中心设置为例，检测页面：用户设置页，该页面会根据用户的不同加载该用户过去一段时间的观看记录列表。自然也就需要先登录才能正常的访问该页面了。

整体流程

整体流程如下:

在这里插入图片描述

Puppeteer启动浏览器

由上图我们先试用Puppeteer来启动一个浏览器，可以设置为无头模式，在开发的时候我们可以设置为有头模式，这样可以观察到整个程序的操作流程，为了避免缓存的影响，我们使用无痕模式来进行测试。启动浏览器的代码如下所示
在这里插入图片描述
其中有个参数叫做slowMo这个参数传入了100，是为了puppeteer在执行时速度变慢，这样比较便于我们观察整个程序的执行。
Puppeteer中的launch里面有一些参数，在代码注释中也说明可，也可一参考Puppeteer-中文文档

其中有一个函数getExecutablePath是为了兼容mac和window中chrome的路径不同，其代码如下：
在这里插入图片描述

Puppeteer模拟登录

浏览器打开之后，我们就需要在首页中使用puppeteer进行模拟登录了。此时可以观察到在爱奇艺的首页登录按钮是在右上角在这里插入图片描述
点击登录按钮之后会有一个弹框，在弹框中我们需要先切换到密码登录的选项，然后输入账号密码，以及勾选底部的【同意】协议之后就可以点击登录按钮进行登录了。
在这里插入图片描述
梳理一下此时的操作为

  1. 打开爱奇艺首页
  2. 点击右上角登录按钮
  3. 在弹框将登录模式切换为密码登录模式
  4. 输入手机号和密码
  5. 勾选底部协议单选按钮
  6. 点击登录按钮
  7. 等待登录成功

那我们把这一段操作使用Puppeteer写成对应的脚本：
在这里插入图片描述

审计用户设置页

在上面使用Puppeteer登录成功之后，同源策略，我们就可以使用Lighthouse再开启一个浏览器tab来对用户设置页进行性能的审计了。
在这里插入图片描述
可以简单看一下lighthouse的源码部分
在这里插入图片描述

这里有一些参数的设置说明一下。
lighthouse一共接受四个参数

  1. url： 审计目标页面的URL
  2. flags：可选的配置项
    • port：浏览器运行的端口port，
    • output：最终输出的报告形式有三种分别是 html,json和csv
    • logLevel：日志级别
    • onlyCategories：审计的类别，这里只审计性能类，会快很多
    • locale：生成报告的语言，需要node 14+的版本才支持，在14版本之前都是默认为英文的
  3. configJSON：也是配置，基本和flags类似，在后面我们自定义gatherers和audits的时候就需要使用这个参数
  4. userConnection：没用过，使用默认即可，看源码应该是一个用户和浏览器建立链接的一个实例，如果没有就会自己实例化一个ChromeProtocol来与浏览器建立链接

生成报告

最终审计出来之后根据传入的output的数组值来生成一个报告列表。这里传入的是 output: [‘html’, ‘json’]，那最终也会生成这两类报告结果，我们使用Node的fs模块，将报告输出至项目的report目录下，同时为了避免多次测试产生的文件名一直，使用一下uuid来做个区分
在这里插入图片描述

入口函数

以上分析了每个功能部分的函数，现在看下整体的入口函数如下：
在这里插入图片描述
整个代码结构如上所示，运行结束之后不管成功与否都会在finally中将浏览器给关闭。

效果展示

在这里插入图片描述

参考文件

Puppeteer中文网
云音乐性能测试内幕
政采云

相关文章：

Lighthouse组合Puppeteer检测页面

如上一篇文章lighthouse的介绍和基本使用方法结尾提到的一样，我们在实际使用Lighthouse检测页面性能时，通常需要一定的业务前置条件，比如最常见的登录操作、如果没有登录态就没有办法访问其他页面。再比如有一些页面是需要进行一系列的操作&a…...

编程日记 2023/2/27 0:30:16

【C++】仿函数、lambda表达式、包装器

1.仿函数 仿函数是什么？仿函数就是类中的成员函数，这个成员函数可以让对象模仿函数调用的行为。 函数调用的行为：函数名(函数参数)C中可以让类实现：函数名(函数参数)调用函数 自己写一个仿函数： 重载()运算符 cla…...

编程日记 2023/2/27 0:29:06

二叉树（二）

二叉树——堆存储1.堆的初始化2. 堆的销毁3.堆的插入4.堆的删除5.堆的打印6.取堆顶的数据7.堆的数据个数8.堆的判空9.堆的构建10.向上调整11.向下调整12.使用堆进行排序13.交换14.完整代码🌟🌟hello，各位读者大大们你们好呀🌟&…...

编程日记 2023/2/27 0:27:56

爬虫知识简介

爬虫简介 爬虫与网络请求 ​ 网络爬虫是一个自动提取网页的程序，一般都分为3步：数据爬取，数据解析，数据存储。数据爬取就是模拟浏览器发送请求，所以需要对网络请求HTTP/HTTPS有一定了解 相关概念： ​ H…...

编程日记 2023/2/27 0:26:43

2023年全国最新会计专业技术资格精选真题及答案6

百分百题库提供会计专业技术资格考试试题、会计考试预测题、会计专业技术资格考试真题、会计证考试题库等，提供在线做题刷题，在线模拟考试，助你考试轻松过关。 11.下列各项中，企业根据本月“工资费用分配汇总表”分配所列财务部门…...

编程日记 2023/2/27 0:25:35

同时学习C++语言和C#语言好吗？

同时学习两门编程语言并不是不好的选择，尤其是对于初学者而言，这样做能够帮助你更好地理解编程语言的基本概念和原则。C和C#都是常用的编程语言，它们都有各自的优点和用途。同时学习这两门语言能够让你更好地理解它们之间的异同点&#xff0c…...

编程日记 2023/2/27 0:24:21

Android8，source与lunch流程解析

source 流程 # build/make/envsetup.sh ---- # Execute the contents of any vendorsetup.sh files we can find. for f in test -d device && find -L device -maxdepth 4 -name vendorsetup.sh 2> /dev/null | sort \ test -d vendor && find -L vendo…...

编程日记 2023/2/27 0:22:58

大数据NiFi（二十）：实时同步MySQL数据到Hive

文章目录 实时同步MySQL数据到Hive 一、开启MySQL的binlog日志 1、登录mysql查看MySQL是否开启binlog日志 2 、开启mysql binlog日志 3、重启mysql 服务，重新查看binlog日志情况 二、​​​​​​​​​​​​​​配置“CaptureChangeMySQL”处理器 1、创建“…...

编程日记 2023/2/27 0:21:41

mac 如何设置 oh my zsh 终端terminal 和添加主题powerlevel10k

Oh My Zsh 是什么 Oh My Zsh 是一款社区驱动的命令行工具，正如它的主页上说的，Oh My Zsh 是一种生活方式。它基于 zsh 命令行，提供了主题配置，插件机制，已经内置的便捷操作。给我们一种全新的方式使用命令行。 **Oh …...

编程日记 2023/2/27 0:20:35

王道《操作系统》学习（一）——计算机系统概述

1.1 操作系统的概念、功能 1.1.1 操作系统的概念（定义） （1）操作系统是系统资源的管理者 （2）向上层用户、软件提供方便易用的服务 （3）是最接近硬件的一层软件 1.1.2 操作系统的功能…...

编程日记 2023/2/27 0:19:24

什么是自适应平台服务？

总目录链接==>> AutoSAR入门和实战系列总目录 文章目录 什么是自适应平台服务？1.1 自适应平台服务包含哪些功能簇呢？1.1.1 ara::sm 状态管理 (SM)1.1.2 ara::diag 诊断管理 (DM)1.1.3 ara::s2s 信号到服务映射1.1.4 ara::nm 网络管理 (NM)1.1.5 ara::ucm 更新和配置管…...

编程日记 2023/2/27 0:18:09

QML Image and Text（图像和文字）

Image（图片） 图像类型显示图像。 格式： Image {source: "资源地址" } source：指定资源的地址 自动检测文件拓展名：source中的URL 指示不存在的本地文件或资源，则 Image 元素会尝试自动检测文件…...

编程日记 2023/2/27 0:16:47

图解LeetCode——剑指 Offer 25. 合并两个排序的链表

一、题目 输入两个递增排序的链表&#xff0c;合并这两个链表并使新链表中的节点仍然是递增排序的。 二、示例 2.1> 示例1&#xff1a; 【输入】1->2->4, 1->3->4 【输出】1->1->2->3->4->4 限制&#xff1a; 0 < 链表长度 < 1000 三、…...

编程日记 2023/2/27 0:15:40

2023年全国最新安全员精选真题及答案7

百分百题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.&#xff08;单选题&#xff09;进入盾构机土仓进行维修工作时&#xff0c;需经&am…...

编程日记 2023/2/27 0:14:31

TypeScript笔记-进行中

学习来源&#xff1a; 本笔记由尚硅谷教学视频整理而来 文章目录学习来源&#xff1a;一.TS简介TypeScript是什么TypeScript增加了什么二环境搭建安装nvm环境搭建二.TypeScript中的基本类型类型声明类型类型示例代码三.编译配置自动编译文件自动编译整个项目四.使用webpack打包…...

编程日记 2023/2/27 0:13:23

阅读HAL源码之重点总结

HAL库的封装特点 HAL封装中有如下特点&#xff08;自己总结的&#xff09;&#xff1a; 特定外设要设置的参数组成一个结构体&#xff1b; 特定外设所有寄存器组成一个结构体&#xff1b; 地址基本都是通过宏来定义的&#xff0c;定义了各外设的起始地址&#xff0c;也就是对应…...

编程日记 2023/2/27 0:12:10

常见的http请求响应的状态码

常见的http请求响应的状态码 一些常见的状态码为&#xff1a; 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 1xx&#xff08;临时响应&#xff09; 表示临时响应并需要请求者继续执行操作的状态代码。 代码 说明 100 &#xff08;继续&#xff09…...

编程日记 2023/2/27 0:11:02

UML类图中的类图、接口图、关联、聚合、依赖、组合概念的解释

文章目录UML类图依赖和关联的主要区别UML类图 类&#xff1a;类有三层结构 第一层&#xff1a;类的名字第二层&#xff1a;类的属性第三层&#xff1a;类的方法 接口&#xff1a;接口跟类相似&#xff0c;不过多了一个<<interface>>来表示它是一个接口 第一层&a…...

编程日记 2023/2/27 0:09:51

【数据库】第九章 关系查询处理与优化

第九章 关系查询处理与优化 索引 索引文件是一种辅助存储结构&#xff0c;其存在与否不改变存储表的物理存储结 构&#xff1b;然而其存在&#xff0c;可以明显提高存储表的访问速度。 索引文件组织方式有两种&#xff1a;(相对照的&#xff0c;主文件组织有堆文件、排序文件、…...

编程日记 2023/2/27 0:08:45

大学物理期末大题专题训练总结-磁学大题

&#xff08;事先声明指的是简单的那个磁学大题&#xff0c;另外一类涉及储存的磁能、磁感应强度分布下次说&#xff09;求个磁通量&#xff0c;求个感应电动势&#xff0c;求个安培力大小......这个感觉是不是像你梦回高中&#xff1f;当然&#xff0c;这一块大题跟高中磁学部…...

编程日记 2023/2/27 0:07:38

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25