Puppeteer入门实践

环境

1、安装nodejs
官网:https://nodejs.org/zh-cn
下载安装好nodejs只后
验证:node -v 出现版本号表示安装成功,否则需要配置环境变量
在这里插入图片描述
2、创建node项目并初始化
随便新建一个文件夹
在这里插入图片描述
进入文件夹搜索cmd回车
在这里插入图片描述执行npm init -y
在这里插入图片描述

安装依赖

使用vscode或webStorm打开项目,我这里使用WebStorm进行演示安装puppeteer依赖npm install puppeteer
在这里插入图片描述

随便新建一个test.js
中文文档:https://puppeteer.bootcss.com/
粘贴文档中的例子看下环境是否有问题

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({path: 'example.png'});

    await browser.close();
})();

运行node ./test.js,成功截图
在这里插入图片描述

选择器

浏览器:谷歌浏览器
本次实践抓取B站热播榜top100的电影信息https://www.bilibili.com/movie/?spm_id_from=333.1007.0.0
在这里插入图片描述点击进入top100,进来后的url : https://www.bilibili.com/v/popular/rank/movie/?from_spmid=666.7.hotlist.more
在这里插入图片描述
右击排行第一的影片,点击检查
在这里插入图片描述
可以看到右边的代码和左边的界面上阴影部分是对应的
在这里插入图片描述我们需要找到一块区域包含所有top100的元素标签
在这里插入图片描述右键元素 -> 复制 -> 复制选择器
在这里插入图片描述
打开控制台
在这里插入图片描述在控制台输入$$('粘贴前面复制的选择器'),在这里输入$$('#app > div > div.rank-container > div.rank-list-wrap')回车
在这里插入图片描述OK,现在拿到了div,这个标签下面包含了top100,接下来我们需要层层递进。

观察元素可以发现,div下面的ul是top100,ul下面的li是每一个影片

在这里插入图片描述在控制台递进到li,使用>表示递进
可以看到我们在原先的选择器后面加上> ul > li就递进到了每个top,现在top100拿到了,接下来获取top里面的数据了
在这里插入图片描述随便点开一个li看一下我们需要的信息在哪个属性里面
在这里插入图片描述可以看到视频播放链接在innerHTML,标题、播放量和点赞量在innerText
在这里插入图片描述在控制台打印innerText看看效果$$('#app > div > div.rank-container > div.rank-list-wrap > ul > li').forEach(e => {console.log(e.innerText)})

在这里插入图片描述

Puppeteer通过选择器获取top100数据

test.js代码

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false, // 以非无头模式启动浏览器,可见浏览器窗口
        slowMo: 100 // 添加延迟,减慢操作速度(用于观察和调试)
    });

    const page = await browser.newPage(); // 创建一个新的页面对象

    await page.goto('https://www.bilibili.com/v/popular/rank/movie/?from_spmid=666.7.hotlist.more'); // 访问指定的 URL

// 等待页面加载2秒钟
    await new Promise(resolve => setTimeout(resolve, 4000));

    let top100Combined = await page.$$eval('#app > div > div.rank-container > div.rank-list-wrap > ul > li', lis => {
        return lis.map(li => {
            return {
                innerText: li.innerText, // 获取每个<li>元素的innerText属性
                innerHTML: li.innerHTML // 获取每个<li>元素的innerHTML属性
            };
        });
    });
// 格式化数据
    let top100 = [];
    for (let top100CombinedKey in top100Combined) {
        const {innerText, innerHTML} = top100Combined[top100CombinedKey];
        // 使用正则表达式匹配电影信息
        let parts = innerText.split('\n');
        let rank = parseInt(parts[0]);
        let movieName = parts[1];
        let releaseDate = parts[2];
        let playCount = parseFloat(parts[3]);
        let likeCount = parseFloat(parts[4]);
        // 构造电影对象
        let top = {
            rank,
            movieName,
            releaseDate,
            playCount,
            likeCount,
        };
        // 正则表达式匹配视频播放链接
        let regexLink = /<a href="(\/\/www\.bilibili\.com\/bangumi\/play\/[^"]+)"/;
        let matchesLink = innerHTML.match(regexLink);
        if (matchesLink && matchesLink.length === 2) {
            let videoUrl = `https:${matchesLink[1]}`;
            top.videoUrl = videoUrl;
        } else {
            console.log("无法提取视频播放链接");
        }
        top100.push(top)
    }

    console.log(top100);

    await browser.close(); // 关闭浏览器实例

})()


运行脚本

运行此脚本
node ./test.js

在这里插入图片描述浏览器页面,可以看到数据全都抓到了
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软件测试基础知识整理(八)- 软件缺陷

目录 一、软件缺陷 1.1 缺陷定义 1.2 缺陷判定标准 1.3 软件缺陷产生的原因 1.4 软件缺陷产生的根源 1.5 软件缺陷信息 1.5.1 缺陷状态 1.5.2 缺陷严重程度 1.5.3 缺陷优先级 1.6 缺陷报告模板 1.7 缺陷报告注意事项 1.8 缺陷跟踪流程 1.9 缺陷数据分析关注的问题 …

【ETH】以太网----PHY芯片LAN8720A----电路原理图

一、LAN8720A----简介 LAN8720A 是低功耗的 10/100M 以太网 PHY 层芯片&#xff0c;I/0 引脚电压符合EEE802.3-2005 标准&#xff0c;支持通过 RMI 接口与以太网 MAC 层通信&#xff0c;内置 10-BASE-T/100BASE-TX 全双工传输模块&#xff0c;支持 10Mbps 和 100Mbps。 LAN87…

内蒙古自治区住房和城乡建设分析及解决方案

安科瑞 徐浩竣 江苏安科瑞电器制造有限公司 zx acrelxhj 摘 要&#xff1a;为深入贯彻落实《国务院办公厅关于印发新能源汽车产业发展规划&#xff08;2021—2035年&#xff09;的通知》&#xff08;国办发 ﹝2020﹞39号&#xff09;、《国家发展改革委等部门关于进一步提升…

java前后端分离有详细内容吗?

微服务架构java前后端分离都有哪些具体内容&#xff1f;目前&#xff0c;有不少客户朋友经常询问我们类似的问题。其实&#xff0c;在新的经济发展形势下&#xff0c;提质增效的低代码开发平台微服务架构早已成为不少新老客户的选择&#xff0c;它们不仅能提高办公协作效率&…

多商户商城系统开发功能优势与选择技巧

电商行业的持续发展&#xff0c;让越来越多的商家企业开始选择入驻多商户商城&#xff0c;通过该系统不仅能够为消费者提供更加便捷良好的购物体验&#xff0c;而且也能够为企业提供一个高效稳定的电商平台&#xff0c;可以说是未来电商行业发展的重要趋势。那么多商户商城系统…

Spring之DI(依赖注入)

依赖注入&#xff08;DI&#xff09;是一个过程&#xff0c;在这个过程中&#xff0c;对象仅通过构造函数参数、工厂方法的参数或在对象被实例化后通过属性设置来定义它们的依赖项&#xff08;即与该对象一起工作的其他对象&#xff09;。然后&#xff0c;容器在创建 bean 时注…

Hadoop HA(高可用)搭建

ZooKeeper配置 解压安装 添加ZK环境变量 分发文件 启动 安装配置 Hadoop 解压安装 修改hadoop-env.sh文件 修改Hadoop配置文件core-site.xml HDFS 配置文件hdfs-site.xml MapReduce 配置文件 mapred-site.xml YARN 配置文件yarn-site.xml 配置worekers 分发配…

数字孪生智慧路灯可视化系统 区域控制节能增效

前言 智慧灯杆是智慧城市建设的重要组成部分&#xff0c;可以完成照明、公安、市政、气象、环保、通信等行业数据信息的采集、发布和传输。同时&#xff0c;作为5g时代车联网、云网、通信网络建设的重要组成部分&#xff0c;智慧灯杆也将得到广泛应用。 建设背景 城市路灯存…

Python学习笔记——《吴恩达Machine Learning》线性回归例程

文章目录 案例背景线性回归&#xff08;Loss Regression&#xff09;梯度下降法&#xff08;批量梯度下降算法——batch gradient descent&#xff09;计算成本函数和梯度下降使用线性回归拟合训练数据模型预测 梯度下降效果可视化完整版demo 案例背景 详情参照吴恩达机器学习…

linux共享内存总结

共享内存函数由shmget、shmat、shmdt、shmctl四个函数组成 头文件&#xff1a; #include <sys/ipc..h> #include<sys/shm.h> // 创建或获取一个共享内存: 成功返回共享内存ID&#xff0c;失败返回-1 int shmget (key_t key, size_t_size, int flag); // 连接共享内…

相见恨晚的5款良心软件,每款都是经过时间检验的精品

今天来给大家推荐5款良心软件,每款都是经过时间检验的精品,用起来让你的工作效率提升飞快&#xff0c;各个都让你觉得相见恨晚&#xff01; 1.颜色选择器——ColorPicker ColorPicker是一款用于在屏幕上选择颜色的工具。它可以让你快速地获取任意像素的颜色值,并复制到剪贴板…

android aidl及binder基础知识总结

1、什么是binder binder是android framework提供的&#xff0c;用于跨进程方法调用的机制&#xff0c;具有安全高效等特点。 我们知道&#xff0c;在 Android 系统中&#xff0c;每个应用程序都运行在一个独立的进程中&#xff0c;各个进程之间需要进行数据交换和调用&#x…

SolidWorks装配体中让弹簧随装配体运动的方法

弹簧是我们日常设计中最常用的几种零部件之一&#xff0c;但是弹簧不跟螺栓一样装好之后是相对静止的&#xff0c;弹簧在装配好后需要进行运动&#xff0c;在SolidWorks装配体中可以让弹簧跟随其他物体运动&#xff0c;操作分为三大步&#xff1a; 一、创建弹簧&#xff08;使…

三阶段项目

DHCP分配不到冲突地址 需要重启 再分配 用这个命令 reset ip pool name vlan40 all ospf&#xff1a; 建立邻居表&#xff1a;报文&#xff1a;hello报文 状态&#xff1a;down int 2-way 选举DR 同步数据库&#xff1a;报文&#xff1a;DD-LSR-LSU-LSACK 状态&#xff…

分布式协调服务--zookeeper

目录 一、概述 1、zookeeper有两种运行状态 zookeeper架构的角色&#xff1a; 2、Paxos算法&#xff1a;消息传递的一致性算法 3、ZAB协议 Zab 协议实现的作用 Zab协议核心 Zab协议内容 消息广播 崩溃恢复 实现原理 协议实现 一、概述 zookeeper官网 zookeeper官…

神马网络——IP地址

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…

transformers两个入门示例

根据《attention is all you need》论文而形成的transformers框架在chat-gpt应用中大放异彩&#xff0c;目前transformers框架已经成了炙手可热的框架。它不仅在nlp方面很作用很大&#xff0c;根据官网的介绍&#xff0c;它还可以做很多事情&#xff0c;比如图片分类&#xff0…

【firewalld防火墙】

目录 一、firewalld概述二、firewalld 与 iptables 的区别1、firewalld 区域的概念 三、firewalld防火墙默认的9个区域四、Firewalld 网络区域1、区域介绍2、firewalld数据处理流程 五、firewalld防火墙的配置方法1、使用firewall-cmd 命令行工具。2、使用firewall-config 图形…

5.24 基础题目

快速幂 #include<bits/stdc.h> using namespace std; //126348976 982638476 938420413 int main(){int a,b,p;cin>>a>>b>>p;long long res 1,ci1;int flag0;if(b0){res%p;}else{while(b){if (flag0)cia%p;elseci(ci%p)*(ci%p)%p;if (b&1)res(res…

吉时利 Keithley 2700数据采集器技术参数

概述&#xff1a; 每个 2700 系列系统均将精密测量、开关和控件集于一个紧凑集成的机箱中&#xff0c;适用于机架安装或台式应用。虽然所有三个系统的核心功能和编程是相同的&#xff0c;但各个主机都具有独特的功能。例如&#xff0c;2701 型具有 10/100BaseTX 以太网接口&am…