Puppeteer使用示例详解


						PhantomJS曾经是无头浏览器里的王者，测试、爬虫等都在使用，随着GoogleChrome Headless的出现，PhantomJS的作者已经明确表示不在更新，而GoogleChrome Headless将会是未来爬虫的趋势，而测试将依然会使用Webdriver那套方案，GoogleChrome Headless可以利用WebDriver调用，也可以使用其集成的API——Puppeteer（操纵木偶的人），他的功能和他的名字一样强大，可以随意操控Chrome或Chromeium，缺点就是只有node的API,来看看他的图标：





Puppeteer是基于DevTools协议来控制headless Chrome的Node库，依赖6.4以上版本的node，本人是在接触这个软件时才开始学习node，依然感觉到它的异步async/await超级强大，在Puppeteer中也大量使用异步来完成任务。

Puppeteer的安装可以使用node的包管理工具npm来安装：





npm i puppeteer



这里安装时会自动安装Chromeium，如果不需要则可以通过配置npm跳过下载，做为一名爬虫工程师我不会去讨论测试相关的使用，接下来看看如何使用，和WebDriver类似，首先需要实例化brower，代码如下：





const puppeteer = require('puppeteer');



(async () => { ​

 const browser = await puppeteer.launch(); 

 const page = await browser.newPage(); 

 await page.goto('http://www.baidu.com'); 

 await browser.close(); 

})();



这段代码执行结束时，你可能什么也没有感觉到，因为它在后台启动了一个Chromeium进程，打开了百度首页，接着就关闭了，当然我们可以在前台打开Chromeium，这里就需要配置一下，所配置参数只需传入launch()即可，常用参数如下：

headless:  是否打开浏览器，默认为true

ignoreHTTPSErrors: 是否忽略https错误，默认为true

executablePath:  配置要调用浏览器的可执行路径，默认是同Puppeteer一起安装的Chromeium

slowMo：指定的毫秒延缓Puppeteer的操作

args：设置浏览器的相关参数，比如是否启动沙箱模式“--no-sandbox”，是否更换代理“--proxy-server”，具体参数请点此查看

使用示例如下：





const browser = await puppeteer.launch({headless:false, args: ["--no-sandbox",]}) //打开浏览器



打开新的窗口：





const page = await browser.newPage();



设置窗口大小





await page.setViewport({

 width: 1920,

 height: 1080

})



过滤不需要的请求：





await page.setRequestInterception(true);

page.on('request', interceptedRequest => {

 if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))

  interceptedRequest.abort();

 else

  interceptedRequest.continue();

});



为浏览器设置userAgent：





await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299")



设置cookie，





const data = {

 name: "smidB2", 

 domain: ".csdn.net", 

 value: "201806051502283cf43902aa8991a248f9c605204f92530032f23ef22c16270"

}

await page.setCookie(data)



示例中只是演示，真实的cookie是一个列表形式的，需要循环添加才可以





for(let data of cookies){

 await page.setCookie(data)

}



请求url：





const url = "http://www.baidu.com"

await page.goto(url, { waitUntil: "networkidle2" });



设置页面等待时间：





await page.waitFor(1000); // 单位是毫秒



等待页面某个元素加载完成





await page.waitForSelector("input[class='usrname']")



点击某个元素





await page.click("input[class='submit']")



利用page.evaluate()函数拖动鼠标至页面底部，原理就是在页面注入js代码。





let scrollEnable = false;

let scrollStep = 500; //每次滚动的步长

while (scrollEnable) {

	scrollEnable = await page.evaluate((scrollStep) => {

		let scrollTop = document.scrollingElement.scrollTop;

		document.scrollingElement.scrollTop = scrollTop + scrollStep;

		return document.body.clientHeight > scrollTop + 1080 ? true : false

	}, scrollStep);

	await page.waitFor(600)

}



获取html信息





const frame = await page.mainFrame()

const bodyHandle = await frame.$('html');

const html = await frame.evaluate(body => body.innerHTML, bodyHandle);

await bodyHandle.dispose(); //销毁 

console.log(html)  



这是爬虫能用到的大致操作，以下是爬取豆瓣热门电影的基本信息和评分的代码，写这个程序时对node也是一知半解，如有不对，欢迎留言

basePupp.js





const puppeteer = require("puppeteer")



class BasePuppeteer{

 puppConfig(){

  const config = {

   headless: false

  }

  return config

 }

 async openBrower(setting){

  const browser = puppeteer.launch(setting)

  return browser

 }

 async openPage(browser){

  const page = await browser.newPage()

  return page

 }

 async closeBrower(browser){

  await browser.close()

 }

 async closePage(page){

  await page.close()

 }

}



const pupp = new BasePuppeteer()

module.exports = pupp



douban.js





const pupp = require("./basePupp.js")

const cheerio = require("cheerio")

const mongo = require("mongodb")

const assert = require("assert")



const MongoClient = mongo.MongoClient

const Urls = "mongodb://10.4.251.129:27017/douban"



MongoClient.connect(Urls, function (err, db) {

 if (err) throw err;

  console.log('数据库已创建');

 var dbase = db.db("runoob");

 dbase.createCollection('detail', function (err, res) {

  if (err) throw err;

  console.log("创建集合!");

  db.close();

 });

});



async function getList(){

 const brower = await pupp.openBrower()

 const page = await pupp.openPage( brower)

 const url = "http://movie.douban.com/explore#!type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0"

 await page.goto(url);

 while(true){           // 循环点击, 直到获取不到该元素

  try{

   await page.waitFor(1000); 

   await page.waitForSelector('a[class=more]'); // 等待元素加载完成，超时时间30000ms

   await page.click("a[class=more]")

   // break

  }catch(err){

   console.log(err)

   console.log("stop click !!!")

   break

  }

 } 

 await page.waitFor(1000);        // 等待页面一秒

 const links = await page.evaluate(() => {    // 获取电影详情url

  let movies = [...document.querySelectorAll('.list a[class=item]')];

  return movies.map((movie) =>{

   return {

    href: movie.href.trim(),

   }

  });

 });

 console.log(links.length)

 for (var i = 0; i < links.length; i++) {

  const a = links[i];

  await page.waitFor(2000); 

  await getDetail(brower, a.href)

  // break

 }

 await pupp.closePage(page)

 await pupp.closeBrower(brower)

 

}



async function getDetail(brower, url){

 const page = await pupp.openPage(brower)

 await page.goto(url);

 await page.waitFor(1000); 

 try{

  await page.click(".more-actor", {delay: 20})

 }catch(err){

  console.log(err)

 }

 const frame = await page.mainFrame()

 const bodyHandle = await frame.$('html');

 const html = await frame.evaluate(body => body.innerHTML, bodyHandle);

 await bodyHandle.dispose();      // 销毁      

 const $ = cheerio.load(html)

 const title = $("h1 span").text().trim()

 const rating_num = $(".rating_num").text().trim()

 const data = {}

 data["title"] = title

 data["rating_num"] = rating_num

 let info = $("#info").text()

 const keyword = ["director", "screenplay", "lead", "type", "website", "location", "language", "playdate", "playtime", "byname", "imdb"]

 if (info.indexOf("www.") > 0){

  info = info.replace(/http:\/\/|http:\/\//g, "").replace(/\t/g," ").replace(/\r/g, " ").split(":")

  for(var i = 1; i < info.length; i++){

   data[keyword[i-1]] = info[i].split(/\n/g)[0].replace(/ \/ /g, ",").trim()

  }



 }else{

  info = info.replace(/\t/g," ").replace(/\r/g, " ").split(":")

  keyword.splice(4,1)

  for(var i = 1; i < info.length-1; i++){

   data[keyword[i-1]] = info[i].split(/\n/g)[0].replace(/ \/ /g, ",").trim()

  }

  data["website"] = ""

 }

 // console.log(data)

 MongoClient.connect(Urls,function(err,db){       //获取连接

  assert.equal(null,err);           //使用断言模块代替以前的 if判断

  var dbo = db.db("douban");

  dbo.collection("detail").insert(data, function(err,result){  //连接到数据库上面，并使用参数传入集合

   assert.equal(null,err);

   console.log(result);

   db.close();

  });

 });

 await pupp.closePage(page)

}



getList()



以上的代码完成了对豆瓣热门电影的全部抓取，有以下几个步骤：

1， 循环点击加载更多，直到没有此元素可操作而抛出异常

2，加载完全部热门电影列表时解析出每个电影详情页的url并逐一请求

3， 解析详情页的所需数据，

4，对所抓取数据进行入库，这里使用MongoDB

入库后的数据如下所示：





对以上的浏览器实例化做了优化，写成了单例模式

config.js





module.exports = {

 browserOptions:{

 headless: false,

 // args: ['--no-sandbox', '--proxy-server=http://proxy:abc100@cp.test.com:8995'],

 args: ['--no-sandbox'],

 }

};



brower.js





const puppeteer = require("puppeteer");

const config = require('./config');//

const deasync = require('deasync');

const BROWSER_KEY = Symbol.for('browser');

const BROWSER_STATUS_KEY = Symbol.for('browser_status');



launch(config.browserOptions)

wait4Lunch();



/**

 * 启动并获取浏览器实例

 * @param {*} options

 * param options is puppeteer.launch function's options

 */

function launch(options = {}) {

 if (!global[BROWSER_STATUS_KEY]) {

 global[BROWSER_STATUS_KEY] = 'lunching';

 puppeteer.launch(options)

  .then((browser) => {

  global[BROWSER_KEY] = browser;

  global[BROWSER_STATUS_KEY] = 'lunched';

  })

  .catch((err) => {

  global[BROWSER_STATUS_KEY] = 'error';

  throw err;

  });

 }

}



function wait4Lunch(){

 while (!global[BROWSER_KEY] && global[BROWSER_STATUS_KEY] == 'lunching') {

 // wait for lunch

 deasync.runLoopOnce();

 }

}

module.exports = global[BROWSER_KEY];



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。