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