Puppeteer的使用

不言

tools

发布于：2020年1月9日

次浏览

Puppeteer是什么

写过爬虫的应该都知道phantomJs，早起无界面浏览器还是很火，后来chrome自己也搞了无界面模式，如今phantomJs已经宣告gg了。谷歌再推出chrome headless的同时，也发布了Puppeteer。

Puppeteer是一个node库，本质上是调用Chrome DevTools提供的Api来操作Chrome，Puppeteer做了一个封装，使用起来更方便。

Puppeteer可以做什么

通过Puppeteer的提供的api可以控制Chrome浏览器，用以模拟用户操作行为，可以用来做Web的Ui自动化或者爬虫。

这里就只是Ui自动化，使用它可以完成但不限于以下内容。

1.页面访问，点击，输入等交互事件

2.记录时间数据，可以进行性能分析

3.支持页面截图，支持生成pdf报告，可用于回溯和二次开发

4.内置支持模式支持以安卓或者ios模式访问

安装Puppeteer并使用

官方源码地址: https://github.com/puppeteer/puppeteer

新建项目

新建一个nodejs项目(WebStorm)

安装

1
2
3

npm install --save puppeteer --ignore-scripts
 # 默认安装会要下载Chromium，因为GW的原因，添加--ignore-scripts来阻止下载。
 # 有VPN的可以无视

手动下载chromeium

如果上一步你没有下载这个，但是想先安装puppeteer，那么关于chromeium可以手动下载。地址： https://download-chromium.appspot.com/ ，依然需要FQ。chromium默认的下载路径是在node_modules/puppeteer/.local-chromium/目录，下载后放入此处即可。

如果你下载后想放其他位置需要指定chromium的地址如： const page = await browser.newPage( { executablePath: ‘/xxx/xxx/chromium/chrome.exe’, headless: false } );

demo

新建一个js写demo，访问百度，输入puppeteer进行搜索，并且截图。

const puppeteer = require('puppeteer');

async function screenShot(url, path, name) {

    await console.log('Screen Shot ... ');
    await console.log('Save path: ' + path + name + '.png');
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(url);
    await console.log('访问'+url);

    await page.setViewport({ width: 1920, height: 1080 });
    await console.log('设置窗口大小');

    await page.waitForSelector('#kw');
    await page.click('#kw');
    await console.log('点击搜索输入框');

    await page.type('#kw','puppeteer');
    await console.log('输入搜索内容');

    await page.waitForSelector('#su');
    await page.click('#su');
    await console.log('点击搜索');

    await page.screenshot({path: path + name + '.png'});

    await browser.close();
}
screenShot("http://baidu.com",".","test_puppeteer");

执行日志

没有报错，查看下截图

有点问题，并没有等待新页面加载好，优化下代码

可以看到每次都是都有这个搜索结果条数的内容，那就先等待他加载好。

const puppeteer = require('puppeteer');

async function screenShot(url, path, name) {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(url);
    await console.log('访问'+url);

    await page.setViewport({ width: 1920, height: 1080 });
    await console.log('设置窗口大小');

    await page.waitForSelector('#kw');
    await page.click('#kw');
    await console.log('点击搜索输入框');

    await page.type('#kw','puppeteer');
    await console.log('输入搜索内容');

    await page.waitForSelector('#su');
    await page.click('#su');
    await console.log('点击搜索');

    await page.waitForSelector('.nums_text');
    await console.log('加载完毕');

    await page.screenshot({path: path + name + '.png'});
    await browser.close();
}
screenShot("http://baidu.com",".","test_puppeteer");

查看截图

可以了。