Puppeteer：被低估的自动化测试利器功能太强大了
一、前言[*] 二、环境准备
[*] 1. 下载安装Node.js
[*] 2. 切换镜像源
[*] 3. 下载Puppeteer
[*] 三、第一个脚本
[*] 1. 建立项目
[*] 2. 新建示例脚本
[*] 3. 优化代码
[*] 4. 执行脚本
一、前言
Puppeteer是Google推出的一款用作自动化测试/爬虫的一个Node.js的库，它的功能非常强大，测试人 员、前端工程师、爬虫工程师都可以使用，不过它只能在Chrome/Chromium上运行。这里，我将用三 篇文章的篇幅来简单介绍下Puppeteer的安装、运行和在自动化测试领域中的简单应用。
需要注意的是，读者需要有一定的JS编码基础和ES6基础，相关语法本简易教程不会解释得特别细，但会贴 出相关链接供读者参考。
另外本教程所使用的操作环境基于Windows 10。
二、环境准备
1. 下载安装Node.js
访问https://nodejs.org/，下载并安装最新版即可。完成后打开CMD输入 node -v 显示如下即表示安装成功：
2. 切换镜像源
安装好Node.js之后会自动安装好npm，我们就可以使用npm来下载安装Puppeteer，开始之前我们先把npm 的镜像源从国外切换至国内以加快下载包的速度： npm config set registry http://registry.npmmirror.com ，然后输入 npm get registry 进行确认：
3. 下载Puppeteer
在cmd中输入 npm install puppeteer --ignore-scripts 来安装Puppeteer，这后面的 --ignore-
scripts 参数的意思是跳过下载Chrome步骤，在这里我建议是在本地下载好Chrome浏览器，之后测试脚本 里指定浏览器路径来使用就行了。
等待下载完成后，我们就可以写代码了~
三、第一个脚本
1. 建立项目
创建一个文件夹作为工作目录，用VScode打开它，然后新建一个Terminal：
在Terminal中输入 npm init 创建Node.js项目。创建过程会有一系列的交互性步骤，一路回车下去即可。创 建好之后工作目录下多出了个package.json文件：
2. 新建示例脚本
工作目录下新建一个JS文件，然后从Puppeteer官网
（https://pptr.dev/api/puppeteer.puppeteernode#example）上复制示例代码到该文件中：
3. 优化代码
将上文的示例代码改为以下内容：
<font size="3" face="微软雅黑">const puppeteer = require('puppeteer');
//遵循CommonJS规范，Node.js中广泛使用，也可以不改
(async () => {
const browser = await puppeteer.launch({//启动浏览器 headless: false,
//改为非无头模式，即执行代码的过程中可以看到浏览器界面
executablePath:
`C:\\Users\\Tinux\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe`
//指定本地Chrome浏览器路径，这里需要注意的是所有复制过来的“\”需要再加一个“\”来转义
});
const page = awaitbrowser.newPage();//新建新页面
await page.goto('https://www.baidu.com');//访问百度首页 await browser.close();//关闭浏览器
})();
</font>本段代码（async开始）是一段立即执行函数，简单说就是这段函数无需调用，定义即执行，它的格式是：
<font size="3" face="微软雅黑">(function () {
console.log('此为立即执行函数');//此处是函数体
})();//再跟一对小括号即为立即执行
</font>另外，这个函数是一个async函数，async是asynchronous的简写，意为异步。async函数体中的每句语句都 必须加上await形成配套，具体原因各位测试工程师可以不用去深究，总之就是这是一种简化异步函数的写 法，可以让异步代码像同步代码一样执行，就像在写Java或Python一样，可读性更强。 如果想要研究相关语法，可以先参考这个教程：https://www.runoob.com/js/js-promise.html，然后可以看 一些介绍异步、Promise、回调函数之类的书面或视频资料，结合起来去理解效果会更好。
4. 执行脚本
在Terminal中执行 node .\example.js ，可以看到Chrome浏览器已经被调起，并且执行完脚本后将自动关 闭：
可以看到上图中的页面区域很小，这是默认Puppeteer给到的浏览器页面尺寸大小，如想改动可以使用
setViewport 方法，修改宽度和高度即可：
<font size="3" face="微软雅黑">const page = await browser.newPage(); await page.setViewport({
width: 1920,
height: 1080,
});
</font>
页:
[1]
