环境

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

浏览器页面，可以看到数据全都抓到了

Puppeteer入门实践相关推荐

python入门实践1-11课视频分享
分享视频,分享知识,收获友谊,收获财富. 我是你们的老朋友,小雨,QQ:798033502 <Python编程入门实践>在先观看地址: 第一讲:我的第一个python实例 http://w ...
WEB入门实践-张晨光-专题视频课程
WEB入门实践-256人已学习课程介绍 WEB开发入门编程,从各种开发工具的讲解到html标签,css元素讲解,js课程系列. 课程收益培养web开发技术人才讲师介绍 ...
这是一次 docker 入门实践
前言其实接触 docker 也有一段时间了,但是一直没有做下总结,现在网上关于 docker 的介绍也有很多了,本着好记性不如烂笔头的原则,还是自己再记录一波吧. 实现目标安装 docker ce ...
Docker快速入门实践-纯干货文章
Docker快速入门实践-老男孩高级架构师课程内容,如果细看还能发现讲解视频呦!小伙伴们赶紧猛戳吧! 老男孩高级架构师内部学员实践文档分享! Docker快速入门实践-纯干货文章老男孩教育2016启 ...
mysql窗口函数_MySQL8.0窗口函数入门实践及总结
前言 MySQL8.0之前,做数据排名统计等相当痛苦,因为没有像Oracle.SQL SERVER .PostgreSQL等其他数据库那样的窗口函数.但随着MySQL8.0中新增了窗口函数之后,针对这 ...
Linux入门实践笔记（七）——云服务器中配置Java项目的JMX连接失败问题解决记录
Linux入门实践笔记(七)--云服务器中配置Java项目的JMX连接失败问题解决记录参考文章: (1)Linux入门实践笔记(七)--云服务器中配置Java项目的JMX连接失败问题解决记录 (2) ...
android hook底层代码_Java-Hook技术-入门实践(反射、动态代理)-Hook拦截通知(当前App/Context)...
老样子,上一篇MonkeyLei:Java-Hook技术-入门实践+反射.动态代理.热修复再看看我们Hook学习了一下,一个是Java本地Main的实践练习. 一个是Android的监听事件的Hoo ...
aidl使用_Android-Service学习鸭-入门实践-远程服务(bindService方式-AIDL)
延续上一篇MonkeyLei:Android-Service学习鸭-入门实践-本地服务(bindService方式) ,我接着实践下远程服务的使用(有个疑问先搁这,远程服务到底有哪些使用场景?). 不 ...
【转载】spring-batch入门实践
[转载]spring-batch入门实践原作者:来自segmentfault网站的Woody 原文地址:https://segmentfault.com/a/1190000016278038?utm ...

Puppeteer入门实践

环境

安装依赖

选择器

Puppeteer通过选择器获取top100数据

运行脚本

Puppeteer入门实践相关推荐

最新文章

热门文章