使用puppeteer爬取数据

使用教程

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

环境安装

npm i puppeteer
# or 
yarn add puppeteer

Note: 当你安装 Puppeteer 时，它会下载最新版本的Chromium（~170MB Mac，~282MB Linux，~280MB Win），以保证可以使用 API。

简单使用

puppeteer的用途不单单只有爬取数据，除此之外他还能
①生成页面PDF或截图
②UI自动化测试
③性能分析

截屏

screenshot.js

const puppeteer = require('puppeteer');
const { screenshot } = require('./config/default');
//config里面设置图片存放地址

(async () => {
  //执行函数需要包裹在(async...)()里异步执行，因为返回对象是promise
  const browser = await puppeteer.launch();
  //创建浏览器对象
  const page = await browser.newPage();
  //创建页面
  await page.goto('https://www.bilibili.com/');
  //需要截屏的网站
  await page.setViewport({
    'width': 1920,
    'height': 1080
    //修改屏幕大小
  });
  await page.screenshot({
    path: `${screenshot}/${Date.now()}.png`
  });
  //执行截屏操作的函数
  await browser.close();
})();

default.js

const path = require('path');

module.exports = {
  screenshot: path.resolve(__dirname, '../screenshot')
  //这个文件夹是存放图片的地方，请自行创建
}

输入

node screenshot.js

运行，结果会输出一张网站截屏

爬取网页数据

这里我们爬取豆瓣音乐的排行榜的前十


观察dom结构后发现条目是ul>li模式包裹的，因此代码如下：
test.js

const puppeteer = require('puppeteer')
const handleList = require('./helper/handleList');

(async () => {
  const browser = await puppeteer.launch({headless: false, slowMo: 250, defaultViewport: {width: 1280, height: 800}})
  const page = await browser.newPage()
  await page.goto('https://music.douban.com/chart', {waitUntil: 'networkidle2'})

  console.log('前往目标网页')
  const list = await page.evaluate(() => {
    let item = document.querySelectorAll('ul.col5 > li')
    return Array.prototype.map.call(item, span => span.innerText).slice(0, 10)
  })

  list.forEach(async item => {
    await handleList(item)
  })
  await browser.close()
})()

handleList.js

const chalk = require('chalk')

module.exports = (item) => {
  let obj = item.split('\n')
  let rank = obj[0]
  let name = obj[1]
  let artist = obj[3].split('/')[0]
  console.log(chalk.yellow('rank:'), rank, chalk.yellow('name:'), name, chalk.yellow('artist:'), artist)
}

输入

node test.js

运行，结果如下