puppeteer库入门初探


Posted in Javascript onJanuary 09, 2019

puppeteer 是一个Chrome官方出品的headless Chrome node库。它提供了一系列的API, 可以在无UI的情况下调用Chrome的功能, 适用于爬虫、自动化处理等各种场景

根据官网上描述,puppeteer 具有以下作用:

  • 生成页面截图和 PDF
  • 自动化表单提交、UI 测试、键盘输入等
  • 创建一个最新的自动化测试环境。使用最新的 JavaScript 和浏览器功能,可以直接在最新版本的 Chrome 中运行测试。
  • 捕获站点的时间线跟踪,以帮助诊断性能问题。
  • 爬取 SPA 页面并进行预渲染(即'SSR')

以下就来阐述 puppeteer 的这几个作用

1.初始化项目

注: 这里我们会使用到 es6/7 的新特性,所以用 typescript 来编译代码

npm install puppeteer typescript @types/puppeteer

tsconfig.json 配置如下:

{
 "compileOnSave": true,
 "compilerOptions": {
  "target": "es5",
  "lib": [
   "es6", "dom"
  ],
  "types": [
   "node"
  ],
  "outDir": "./dist/",
  "sourceMap": true,
  "module": "commonjs",
  "watch": true,
  "moduleResolution": "node",
  "isolatedModules": false,
  "experimentalDecorators": true,
  "declaration": true,
  "suppressImplicitAnyIndexErrors": true
 },
 "include": [
  "./examples/**/*",
 ]
}

puppeteer 模块提供一个方法启动一个 Chromium 实例。

import * as puppeteer from 'puppeteer'

(async () => {
 await puppeteer.launch()
})()

上述代码通过 puppeteer 的 launch 方法生成一个 browser 实例,launch 方法可以接收一些配置项。较为常用的有:

  • headless [boolean]: 是否以 headless 模式启动浏览器
  • slowMo [number]: 减缓 puppeteer 的操作。这样就很方便的可以看到正在发生的事情
  • args[Array[string]]: 要传给浏览器实例的额外参数

2.生成页面截图

这里我们以 https://example.com/ 为例

(async () => {
 const browser = await puppeteer.launch(); //生成browser实例
 const page = await browser.newPage();   //解析一个新的页面。页面是在默认浏览器上下文创建的
 await page.goto("https://example.com/"); //跳转到 https://example.com/
 await page.screenshot({          //生成图片
  path: 'example.png'
 })
})()

在这里需要注意的是,截图默认截取的是打开网页可视区的内容,如果要获取完整的可滚动页面的屏幕截图,需要添加 fullPage: true

执行 node dist/screenshot.js ,即可在根目录下生成 example.png

puppeteer 默认将页面大小设置为 800*600,可以通过 page.setViewport() 来改变页面大小。

不仅如此,puppeteer 还可以模拟手机

import * as puppeteer from "puppeteer"; 
import * as devices from "puppeteer/DeviceDescriptors"; 
const iPhone = devices["iPhone 6"];

(async () => {
 const browser = await puppeteer.launch({
  headless: false
 });
 const page = await browser.newPage();
 await page.emulate(iPhone);
 await page.goto("https://baidu.com/");
 await browser.close();
})();

3.生成 pdf

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://example.com/");
 await page.pdf({
  displayHeaderFooter: true,
  path: 'example.pdf',
  format: 'A4',
  headerTemplate: '<b style="font-size: 30px">Hello world<b/>',
  footerTemplate: '<b style="font-size: 30px">Some text</b>',
  margin: {
   top: "100px",
   bottom: "200px",
   right: "30px",
   left: "30px",
  }
 });
 await browser.close();
})()

执行 node dist/pdf.js 即可。

4.自动化表单提交, 输入

在这里我们模拟一下京东的登录, 为了能更好的看到整个过程, 我们使用 headless: false 来关闭 headless 模式,看一下整个的登录流程

(async () => {
 const browser = await puppeteer.launch({
  headless: false
 });
 const page = await browser.newPage();
 await page.goto("https://github.com/login");
 await page.waitFor(1000)  //延迟1秒输入
 await page.type("#login_field", "1137060420@qq.com"); //立即输入
 await page.type("#password", "bian1992518", {
  delay: 100
 }) //模拟用户输入
 await page.click("input[type=submit]"); //点击登录按钮
})()

5.站点时间线追踪

可以很方便的使用 tracking.starttracking.stop 创建一个可以在 chrome devtools 打开的跟踪文件

(async () => {
 const broswer = await puppeteer.launch();
 const page = await broswer.newPage();
 await page.tracing.start({
  path: "trace.json"
 });
 await page.goto("https://example.com/");
 await page.tracing.stop();
 broswer.close();
})();

执行 node dist/trace.js 会生成一个 trace.json 文件, 然后我们打开 chrome devtools -> Performance, 然后把该文件直接拖进去即可。该功能便于我们对网站进行性能分析, 进而优化性能

6.爬虫和 SSR

现在大多数开发用 react、vue、angular 来构建 SPA 网站, SPA 固有很多的优点, 比方开发速度快、模块化、组件化、性能优等。但其缺点还是很明显的, 首先就是首屏渲染问题, 其次不利于 SEO, 对爬虫不友好。

以 https://preview.pro.ant.design/#/dashboard/analysis 为例, 我们点击右键, 查看源代码, 发现其 body 里面只有 <div id="root"></div> ,假如想把门店销售额排名情况给爬下来,存到数据库进行数据分析(如下图)

puppeteer库入门初探 

此时我们以传统爬虫的方式去爬的话是拿不到网页内容的。

如 python

# -*- coding : UTF-8 -*-
from bs4 import BeautifulSoup 
import urllib2


def spider(): 
  html = urllib2.urlopen('https://preview.pro.ant.design/#')
  html = html.read()
  soup = BeautifulSoup(html, 'lxml')
  print(soup.prettify())


if __name__ == '__main__': 
  spider()

执行 python py/index.py , 得到的结果如下图:

puppeteer库入门初探 

body 里面并没有页面相关的 dom,因此我们想通过 python 去爬取 SPA 页面的内容是不可行的。

nodejs

import axios from "axios";

(async () => {
 const res = await axios.get("https://preview.pro.ant.design/#");
 console.log(res.data);
})();

执行 node dist/node-spider.js , 得到和上面例子一样的结果。

puppeteer库入门初探

puppeteer

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://preview.pro.ant.design/#");
 console.log(await page.content());
})();

执行 node dist/spider.js , 得到如下:

puppeteer库入门初探 

此时我们可以惊奇的发现可以抓到页面所有的 dom 节点了。此时我们可以把它保存下来做 SSR,也可以爬取我们想要的内容了。

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://preview.pro.ant.design/#");
 const RANK = ".rankingList___11Ilg li";
 await page.waitForSelector(RANK);
 const res = await page.evaluate(() => {
  const getText = (v, selector) => {
   return v.querySelector(selector) && v.querySelector(selector).innerText;
  };
  const salesRank = Array.from(
   document.querySelectorAll(".rankingList___11Ilg li")
  );
  const data = [];
  salesRank.map(v => {
   const obj = {
    rank: getText(v, "span:nth-child(1)"),
    address: getText(v, "span:nth-child(2)"),
    sales: getText(v, "span:nth-child(3)")
   };
   data.push(obj);
  });
  return {
   data
  };
 });
 console.log(res);
 await browser.close();
})();

执行 node dist/spider.js , 得到如下:

puppeteer库入门初探

此时,我们已经利用 puppeteer 把我们所需要的数据给爬下来了。

到此,我们就把 puppeteer 基本的功能点给实现了一遍,本文示例代码可在 github 上获取。

参考

https://github.com/GoogleChrome/puppeteer
https://pptr.dev/#?product=Puppeteer&version=v1.6.0

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

Javascript 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
js中对象和面向对象与Json介绍
Jan 21 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
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
上传多个文件的PHP脚本
2006/11/26 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python字符串string的内置方法实例详解
2018/05/14 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
产品促销活动策划书
2014/01/15 职场文书
《去年的树》教学反思
2014/04/11 职场文书
考察现实表现材料
2014/05/19 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python