Puppeteer：被低估的自动化测试利器功能太强大了

lsekfe

一、前言

• 二、环境准备
• 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. 优化代码


将上文的示例代码改为以下内容：

1. <font size="3" face="微软雅黑">const puppeteer = require('puppeteer');
   
2. //遵循CommonJS规范，Node.js中广泛使用，也可以不改
   
3. 
   
4. (async () => {
   
5. const browser = await puppeteer.launch({//启动浏览器 headless: false,
   
6. //改为非无头模式，即执行代码的过程中可以看到浏览器界面
   
7. executablePath:
   
8. `C:\\Users\\Tinux\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe`
   
9. //指定本地Chrome浏览器路径，这里需要注意的是所有复制过来的“\”需要再加一个“\”来转义
   
10. });
    
11. const page = await  browser.newPage();//新建新页面
    
12. await page.goto('https://www.baidu.com');//访问百度首页 await browser.close();//关闭浏览器
    
13. })();
    
14. </font>

复制代码

本段代码（async开始）是一段立即执行函数，简单说就是这段函数无需调用，定义即执行，它的格式是：

1. <font size="3" face="微软雅黑">(function () {
   
2. console.log('此为立即执行函数');//此处是函数体
   
3. })();//再跟一对小括号即为立即执行
   
4. </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 方法，修改宽度和高度即可：

1. <font size="3" face="微软雅黑">const page = await browser.newPage(); await page.setViewport({
   
2. width: 1920,
   
3. height: 1080,
   
4. });
   
5. </font>

复制代码