爬虫利器Puppeteer实战


Posted in Javascript onJanuary 09, 2019

Puppeteer 介绍

Puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。 Puppeteer 是一个 Nodejs 的库,支持调用 Chrome的API来操纵Web ,相比较 Selenium 或是 PhantomJs ,它最大的特点就是它的操作 Dom 可以完全在内存中进行模拟既在 V8 引擎中处理而不打开浏览器,而且关键是这个是Chrome团队在维护,会拥有更好的兼容性和前景。

Puppeteer 用处

  • 利用网页生成PDF、图片
  • 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
  • 可以从网站抓取内容
  • 自动化表单提交、UI测试、键盘输入等
  • 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例6.捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题

Puppeteer 使用

安装 Puppeteer

由于封网,直接下载 Chromium 会失败,可以先阻止下载 Chromium 然后再手动下载它

# 安装命令
npm i puppeteer --save

# 错误信息
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

# 设置环境变量跳过下载 Chromium
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 

# 或者可以这样干,只下载模块而不build
npm i --save puppeteer --ignore-scripts

# 成功安装模块
+ puppeteer@0.13.0
added 1 package in 1.77s

手动下载 Chromium,下载完后将压缩包解压,会有个 Chromium.app,将其放在你喜欢的目录下,例如 /Users/huqiyang/Documents/project/z/chromium/Chromium.app。正常安装包后 Chromium.app 会在 .local-chromium

Tip:下载 Chromium 失败解决办法

更换国内Chromium源

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer

或者用 cnpm 安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i puppeteer

点击查阅 Puppeteer  API

初试 Puppeteer,截个图吧

知识点

  • puppeteer.launch 启动浏览器实例
  • browser.newPage()  创建一个新页面
  • page.goto 进入指定网页
  • page.screenshot 截图
const puppeteer = require('puppeteer');

(async () => {
 const browser = await (puppeteer.launch({
  // 若是手动下载的chromium需要指定chromium地址, 默认引用地址为 /项目目录/node_modules/puppeteer/.local-chromium/
  executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
  //设置超时时间
  timeout: 15000,
  //如果是访问https页面 此属性会忽略https错误
  ignoreHTTPSErrors: true,
  // 打开开发者工具, 当此值为true时, headless总为false
  devtools: false,
  // 关闭headless模式, 不会打开浏览器
  headless: false
 }));
 const page = await browser.newPage();
 await page.goto('https://www.jianshu.com/u/40909ea33e50');
 await page.screenshot({
  path: 'jianshu.png',
  type: 'png',
  // quality: 100, 只对jpg有效
  fullPage: true,
  // 指定区域截图,clip和fullPage两者只能设置一个
  // clip: {
  //  x: 0,
  //  y: 0,
  //  width: 1000,
  //  height: 40
  // }
 });
 browser.close();
})();

运行结果 

爬虫利器Puppeteer实战

进阶,获取网易云音乐的歌词和评论

网易云音乐的API经过AES和RSA算法加密,需要携带加密的信息通过POST方式请求才能获取到数据。但 Puppeteer 出现后,这些都不重要了,只要它页面上显示了,通过 Puppeteer 都能获取到该元素。

知识点

  • page.type 获取输入框焦点并输入文字
  • page.keyboard.press 模拟键盘按下某个按键,目前mac上组合键无效为已知bug
  • page.waitFor 页面等待,可以是时间、某个元素、某个函数
  • page.frames() 获取当前页面所有的 iframe,然后根据 iframe 的名字精确获取某个想要的 iframe
  • iframe.$('.srchsongst') 获取 iframe 中的某个元素
  • iframe.evaluate() 在浏览器中执行函数,相当于在控制台中执行函数,返回一个 Promise
  • Array.from 将类数组对象转化为对象
  • page.click() 点击一个元素
  • iframe.$eval() 相当于在 iframe 中运行 document.queryselector 获取指定元素,并将其作为第一个参数传递
  • iframe.$$eval 相当于在 iframe 中运行 document.querySelectorAll 获取指定元素数组,并将其作为第一个参数传递
const fs = require('fs');
const puppeteer = require('puppeteer');

(async () => {
 const browser = await (puppeteer.launch({ executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium', headless: false }));
 const page = await browser.newPage();
 // 进入页面
 await page.goto('https://music.163.com/#');

 // 点击搜索框拟人输入 鬼才会想起
 const musicName = '鬼才会想';
 await page.type('.txt.j-flag', musicName, {delay: 0});

 // 回车
 await page.keyboard.press('Enter');

 // 获取歌曲列表的 iframe
 await page.waitFor(2000);
 let iframe = await page.frames().find(f => f.name() === 'contentFrame');
 const SONG_LS_SELECTOR = await iframe.$('.srchsongst');

 // 获取歌曲 鬼才会想起 的地址
 const selectedSongHref = await iframe.evaluate(e => {
  const songList = Array.from(e.childNodes);
  const idx = songList.findIndex(v => v.childNodes[1].innerText.replace(/\s/g, '') === '鬼才会想起');
  return songList[idx].childNodes[1].firstChild.firstChild.firstChild.href;
 }, SONG_LS_SELECTOR);

 // 进入歌曲页面
 await page.goto(selectedSongHref);

 // 获取歌曲页面嵌套的 iframe
 await page.waitFor(2000);
 iframe = await page.frames().find(f => f.name() === 'contentFrame');

 // 点击 展开按钮
 const unfoldButton = await iframe.$('#flag_ctrl');
 await unfoldButton.click();

 // 获取歌词
 const LYRIC_SELECTOR = await iframe.$('#lyric-content');
 const lyricCtn = await iframe.evaluate(e => {
  return e.innerText;
 }, LYRIC_SELECTOR);

 console.log(lyricCtn);

 // 截图
 await page.screenshot({
  path: '歌曲.png',
  fullPage: true,
 });

 // 写入文件
 let writerStream = fs.createWriteStream('歌词.txt');
 writerStream.write(lyricCtn, 'UTF8');
 writerStream.end();

 // 获取评论数量
 const commentCount = await iframe.$eval('.sub.s-fc3', e => e.innerText);
 console.log(commentCount);

 // 获取评论
 const commentList = await iframe.$$eval('.itm', elements => {
  const ctn = elements.map(v => {
   return v.innerText.replace(/\s/g, '');
  });
  return ctn;
 });
 console.log(commentList);
})();

运行结果

爬虫利器Puppeteer实战

爬虫利器Puppeteer实战

爬虫利器Puppeteer实战

高级爬虫

爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染),通俗讲就是在页面上显示的内容我们都能获取到。下面我们就通过爬取 瓜子二手车直卖网 的车辆信息来认识它。

首先通过 axios 来试试

const axios = require('axios');
const useAxios = () => {
 axios.get('https://www.guazi.com/hz/buy/')
  .then(((result) => {
   console.log(result.data);
  }))
  .catch((err) => {
   console.log(err);
  });
};

结果它返回给我这个玩意,这显然不是我要的内容

爬虫利器Puppeteer实战

通过 Puppeteer 爬取

const fs = require('fs');
const puppeteer = require('puppeteer');

(async () => {
 const browser = await (puppeteer.launch({ executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium', headless: true }));
 const page = await browser.newPage();

 // 进入页面
 await page.goto('https://www.guazi.com/hz/buy/');

 // 获取页面标题
 let title = await page.title();
 console.log(title);

 // 获取汽车品牌
 const BRANDS_INFO_SELECTOR = '.dd-all.clearfix.js-brand.js-option-hid-info';
 const brands = await page.evaluate(sel => {
  const ulList = Array.from($(sel).find('ul li p a'));
  const ctn = ulList.map(v => {
   return v.innerText.replace(/\s/g, '');
  });
  return ctn;
 }, BRANDS_INFO_SELECTOR);
 console.log('汽车品牌: ', JSON.stringify(brands));
 let writerStream = fs.createWriteStream('car_brands.json');
 writerStream.write(JSON.stringify(brands, undefined, 2), 'UTF8');
 writerStream.end();
 // await bodyHandle.dispose();

 // 获取车源列表
 const CAR_LIST_SELECTOR = 'ul.carlist';
 const carList = await page.evaluate((sel) => {
  const catBoxs = Array.from($(sel).find('li a'));
  const ctn = catBoxs.map(v => {
   const title = $(v).find('h2.t').text();
   const subTitle = $(v).find('div.t-i').text().split('|');
   return {
    title: title,
    year: subTitle[0],
    milemeter: subTitle[1]
   };
  });
  return ctn;
 }, CAR_LIST_SELECTOR);

 console.log(`总共${carList.length}辆汽车数据: `, JSON.stringify(carList, undefined, 2));

 // 将车辆信息写入文件
 writerStream = fs.createWriteStream('car_info_list.json');
 writerStream.write(JSON.stringify(carList, undefined, 2), 'UTF8');
 writerStream.end();

 browser.close();
})();

运行结果

爬虫利器Puppeteer实战

爬虫利器Puppeteer实战

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中call与apply的用法小结
Dec 28 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
js随机生成一个验证码
Jun 01 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
puppeteer库入门初探
Jan 09 #Javascript
node.js的Express服务器基本使用教程
Jan 09 #Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 #Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 #Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 #Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 #Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
You might like
php下实现折线图效果的代码
2007/04/28 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python的一些用法分享
2012/10/07 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python中的字典操作及字典函数
2018/01/03 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
地球一小时宣传标语
2014/06/24 职场文书
新闻学专业求职信
2014/07/28 职场文书
四风查摆剖析材料
2014/10/10 职场文书
亮剑观后感500字
2015/06/05 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
nginx之queue的具体使用
2022/06/28 Servers