利用 Puppeteer 写一个爬虫

2018/1/8 posted in  NodeJs

Puppeteer 运行在 Node 环境,用来操作 Headless Chrome 一个不显示界面就可以操作的 Chrome 浏览器。

参考:
API

安装

  • 确保安装了 Node 8 及以上版本,安装node可以参考这篇:NVM 管理Node版本
  • npm install --save puppeteer 通过npm 安装,安装过程中,会附带下载匹配版本的 Chromium

    • 也可以通过PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i puppeteer配置其他的Chromium源下载
    • 如果不配置其他下载源,国内网络环境可能会出现Chromium下载失败的问题,建议通过 cnpm 下载
    • 或者忽略Chromium自动下载,手动下载 https://download-chromium.appspot.com/ 然后在使用时设置 executablePath参数

      const browser = await puppeteer.launch({executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',headless: true});
      

使用

const puppeteer = require('puppeteer');

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

  await browser.close();
}

getPic();

这是一个简单的示例,实现网页的截图功能。

  • const puppeteer = require('puppeteer');引入 Puppeteer 模块
  • const browser = await puppeteer.launch(); 打开一个 Chrome 实例
  • const page = await browser.newPage(); 新建一个标签页
  • await page.goto('https://www.baidu.com'); 跳转地址
  • await page.screenshot({path: 'baidu.png'}); 截图
  • await browser.close(); 关闭浏览器

下面的代码运行的时候,是没有浏览器界面的,如果要显示界面,要把
const browser = await puppeteer.launch();
换成:
const browser = await puppeteer.launch({headless: false});

提取页面数据

async function gather(){
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://');
    let html = await page.evaluate(async el => {
        return el.innerHTML;
    },await page.$(selector));
    
    return html;
}

这样就可以获取一个元素的包含自身的 html代码

  • await page.$(selector) 利用选择器选择元素,选择器的写法和jquery 差不多,不过还是有点区别,有些选择器用不了。如果匹配到多个元素,只返回第一个。
  • await page.$$(selector) 作用同上面一样,匹配了多少元素返回多少个元素。
  • page.evaluate 要获取页面上的内容,需要使用这个函数。第一个参数是函数时,函数的作用域是window,如果在这个函数里调用函数外面的函数,就会报错,会找不到。

结语:

基本上了解这些,就可以写一个简单的爬虫了。其他复杂的功能,可以看官方的API文档。