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 = "https://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(/https:\/\/|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];

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

在这里插入图片描述


版权声明:本文为wx1871428原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。