Puppeteer学习笔记

迷南。 2022-04-10 01:17 287阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

# 一、Puppeteer与Puppeteer-Core的区别 #

1.Puppeteer-Core在安装时不会自动下载 Chromium  
2.Puppeteer-Core忽略所有的PUPPETEER\_\* env 变量.

# 二、Puppeteer可以完成以下操作： #

几乎所有你能在浏览器上做的事情, 通过调用puppeteer API 也能够实现， 比如：

*  生成浏览器页面的屏幕截图或者是pdf文件
 *  方便的抓取[单页面][Link 1]和预渲染页面的信息内容
 *  网站爬虫
 *  自动化执行页面提交，UI自动化测试，键盘输入等.
 *  可以建立基于最新Chrome和Javascript的测试环境
 *  抓取并跟踪网站的执行时间轴，帮助分析效率问题
 *  测试Chrome扩展程序。  
    Puppeteer安装时自带一个最新版本的Chromium，可以通过设置环境变量或者npm config中的PUPPETEER\_SKIP\_CHROMIUM\_DOWNLOAD跳过下载。如果不下载的话，启动时可以通过puppeteer.launch(\[options\])配置项中的executablePath指定Chromium的位置。

# 三、安装Puppeteer #

1.安装Node环境  
2.E盘新建文件夹：Puppeter。  
3.安装Puppeter，win+X+R

> npm i puppeteer

或者

> yarn add puppeteer

![Image 1][]

image.png

页面截图

初始化步骤完成后，node\_modules放在根目录下，依次打开以下文件夹：node\_modules—puppeteer—examples.

进入到examples文件夹下后，里面有很多js文件，这些一般都是一些小例子。以screenshot.js为例，看一个页面截图的例子。

我们以记事本方式打开该文件，主要js代码如下：

'use strict';constpuppeteer =require('puppeteer');//引入puppeteer库.

(async() => \{

constbrowser = await puppeteer.launch();//用指定选项启动一个Chromium浏览器实例。
    
                  constpage = await browser.newPage();//创建一个页面.
    
                  await page.goto('http://example.com');//到指定页面的网址.
    
                  await page.screenshot({path:'example.png'});//截图并保存到当前路径，名称为example.png.
    
                  await browser.close();//关闭已打开的页面，browser不能再使用。
    
                })();

方式1.在pycharm中新建一个file，命名为test.js，将上面的代码拷贝到test.js中并保存，在terminal中输入node screenshot.js//运行名为screenshot.js的文件.

方式2.还是在当前文件夹（examples）下，此处打开命令行窗口，输入：node screenshot.js//运行名为screenshot.js的文件.

运行完成后，就会在当前目录下看到图片，该图片即运行该js后截的图片。

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

原文链接: [https://www.jianshu.com/p/1844baa3956e][https_www.jianshu.com_p_1844baa3956e]

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://link.jianshu.com?t=https://en.wikipedia.org/wiki/Single-page_application
[Image 1]: 
[2018121912254161]: /images/20220404/d73f5a99108c4c2682da15265494c9aa.png
[https_www.jianshu.com_p_1844baa3956e]: https://www.jianshu.com/p/1844baa3956e