node使用puppeteer的一些问题总结

puppeteer,老早就听说过了,之前有同事用这个做了自动投注工具,那时候对这个没什么想法,也就没去折腾,最近要做一个工具,想到了puppeteer,去看了下,才发现这个东西真的是很强大,很方便,在使用过程中也遇到了不少坑,记录下来供网友参考。

一、什么是puppeteer?

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。我们可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行自动化测试或者作为爬虫访问页面来收集数据。

二、如何安装?

我们可以通过运行命令:

npm i puppeteer
或者 
yarn add puppeteer

这种方式安装会默认下载最新版本的Chromium浏览器,如果由于一些网络原因不能通过命令行直接下载Chromium浏览器,我们可以选择通过下面的命令跳过下载Chromium浏览器,只安装puppeteer库,然后手动下载Chromium浏览器。

npm i puppeteer-core
或者 
yarn add puppeteer-core

那么问题来了?如何手动下载Chromium浏览器呢?

从仓库源码可以发现下载地址是这样的

const downloadURLs = {
    linux: 'https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/%d/chrome-linux.zip',
    mac: 'https://storage.googleapis.com/chromium-browser-snapshots/Mac/%d/chrome-mac.zip',
    win32: 'https://storage.googleapis.com/chromium-browser-snapshots/Win/%d/chrome-win32.zip',
    win64: 'https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/%d/chrome-win32.zip'
}

根据自己的电脑选择对应的平台,然后将 %d 替换成具体的版本号,版本号我们可以从 puppeteer/package.json 中的 puppeteer.chromium_revision得到。

当然出了这种方法我们还可以直接通过淘宝的puppeteer下载Chromium浏览器的镜像直接安装puppeteer,怎么操作呢?在项目下新建文件.npmrc,输入内容:

puppeteer_download_host = https://npm.taobao.org/mirrors

保存完后,直接通过命令

npm i puppeteer

安装puppeteer,由于我们使用了淘宝的Chromium浏览器镜像,所以就算没有vpn的情况下我们也可以在命令行中正常下载Chromium浏览器。

三、问题

1、如何使用puppeteer启动正常带窗口的浏览器?

puppeteer默认启动的是无头(headless)浏览器,我们可以通过设置headless参数来启动带窗口的浏览器,代码如下:

const browser = await puppeteer.launch({
   headless: false
});

2、puppeteer启动后如何最大化窗口?

puppeteer默认创建的窗口大小是800X600,我们可以通过向args传递参数“--start-maximized”来最大化窗口,代码:

const browser = await puppeteer.launch({
   args: ['--start-maximized']
});

3、通过上面的步骤我们最大化了浏览器窗口,但是当我们打开一个页面时,发现出现了下面的情况:

页面的宽高依然使用了默认的800X600,如何解决呢?我们可以在创建page后通过方法:

page.setViewport({
	width: screenWidth,
	height: screenHeight
});

screenWidth,screenHeight分别为当前屏幕分辨率的宽高。

4、如何去掉浏览器中“Chrome正受到自动测试软件控制”的字眼

默认打开的Chromium浏览器顶部会显示“Chrome正受到自动测试软件控制”,就像下面这样

如果我们做的工具或者软件还显示“Chrome正受到自动测试软件控制”,未免不太友好,如何去掉呢?我们只需要向args参数传递“--disable-infobars“,即可解决,代码如下:

const browser = await puppeteer.launch({
   args: ['--disable-infobars']
});

5、如何为Chromium浏览器设置代理呢?

在某些情况下,比如我们打开了多个Chromium浏览器登陆了很多账号,如何为每一个打开的Chromium浏览器设置代理呢?我们可以通过想args参数传递“--proxy-server”来完成,代码如下:

const browser = await puppeteer.launch({
   args: ['--proxy-server=127.0.0.1:8888']
});

其实通过向args传递参数我们还能做的还有很多,args支持的值可以参考这里:https://peter.sh/experiments/chromium-command-line-switches/

通过puppeteer我们还可以做很多事情,比如拦截请求,甚至将一个线上的脚本替换为本地的等等,这里就不再多说了,有兴趣的朋友可以自己去尝试,如果遇到了什么问题,欢迎随时和我一起探讨。

最后附上puppeteer的API文档地址:

官方文档:https://github.com/GoogleChrome/puppeteer/blob/v1.16.0/docs/api.md

中文文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/


  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章