/自动化测试/ puppeteer API详解(一):puppeteer模块API

在环境搭建章节介绍了如何使用puppeteer模块来启动Chromium实例，本篇开始puppeteer的API详细学习计划

本文将主要介绍：

puppeteer模块API

▷1◁

1、launch([options])

options列表详解

options <[Object]> 在浏览器上设置的一组可配置选项。 有以下字段：

1. ignoreHTTPSErrors <[boolean]> 是否在导航期间忽略 HTTPS 错误. 默认是 false。
2. headless <[boolean]> 是否以 无头模式 运行浏览器。默认是 true，除非 devtools 选项是 true。
3. executablePath <[string]> 可运行 Chromium 或 Chrome 可执行文件的路径，而不是绑定的的 Chromium。如果 executablePath 是一个相对路径，那么他相对于 当前工作路径 解析。
4. slowMo <[number]> 将 Puppeteer 操作减少指定的毫秒数。这样你就可以看清发生了什么，这很有用。
5. defaultViewport <?[Object]> 为每个页面设置一个默认视口大小。默认是 800x600。如果为 null 的话就禁用视图口。
   1. width <[number]> 页面宽度像素。
   2. height <[number]> 页面高度像素。
   3. deviceScaleFactor <[number]> 设置设备的缩放（可以认为是 dpr）。默认是 1。
   4. isMobile <[boolean]> 是否在页面中设置了 meta viewport 标签。默认是 false。
   5. hasTouch<[boolean]> 指定viewport是否支持触摸事件。默认是 false。
   6. isLandscape <[boolean]> 指定视口是否处于横向模式。默认是 false。
6. args <[Array]<[string]>> 传递给浏览器实例的其他参数。 这些参数可以参考 这里。
7. ignoreDefaultArgs <([boolean]|<[Array]<[string]>>)> 如果是 true，那就不要使用 puppeteer.defaultArgs()。 如果给出了数组，则过滤掉给定的默认参数。这个选项请谨慎使用。默认为 false。
8. handleSIGINT <[boolean]> Ctrl-C 关闭浏览器进程。默认是 true。
9. handleSIGTERM <[boolean]> 关闭 SIGTERM 上的浏览器进程。默认是 true。
10. handleSIGHUP <[boolean]> 关闭 SIGHUP 上的浏览器进程。默认是 true.
11. timeout <[number]> 等待浏览器实例启动的最长时间（以毫秒为单位）。默认是 30000 (30 秒). 通过 0来禁用超时。
12. dumpio <[boolean]> 是否将浏览器进程标准输出和标准错误输入到 process.stdout 和 process.stderr 中。默认是 false。
13. userDataDir <[string]> 用户数据目录 路径。
14. env <[Object]> 指定浏览器可见的环境变量。默认是 process.env。
15. devtools <[boolean]> 是否为每个选项卡自动打开DevTools面板。如果这个选项是 true，headless 选项将会设置成 false。
16. pipe <[boolean]> 通过管道而不是WebSocket连接到浏览器。默认是 false。

那么在脚本中如何使用这些options呢？请看实例：

//初始化puppeteer变量 const puppeteer = require('puppeteer'); //调用puppeteer模块的launch方法 //luanch的options参数类型是一个object，js中的object定义使用{xxx,xxx,xxxx}的方式 puppeteer.launch( { ignoreHTTPSErrors:false, headless:false, executablePath: 'D:\\node_modules\\puppeteer\\.local-chromium\\win64-579032\\chrome-win32\\chrome.exe', headless: true, //计量单位：ms slowMo:300, //defaultViewport参数类型为object,默认是 800x600,null为禁用窗口 defaultViewport: { width:1000, height:1000, deviceScaleFactor:1, isMobile:false, hasTouch:false, isLandscape:false }, args:new Array("--accept-resource-provider","--agc-startup-min-volume","--/prefetch:1"), ignoreDefaultArgs:false, handleSIGINT:true, handleSIGTERM:true, handleSIGHUP:true, //计量单位ms timeout:60000, dumpio:false, userDataDir:"D:\\puppeteer\\data", env:{}, devtools:false, pipe:false } ).then(async browser => { const page = await browser.newPage(); await page.goto('https://example.com'); await browser.close(); });

注意几个重要参数的配置：

具体的参数参考地址：https://peter.sh/experiments/chromium-command-line-switches/

▷2◁

2、connect

connect(options)

options <[Object]>

1. browserWSEndpoint <[string]> 一个 浏览器 websocket 端点链接。
2. ignoreHTTPSErrors <[boolean]> 是否在导航期间忽略 HTTPS 错误. 默认是 false。
3. defaultViewport <?[Object]> 为每个页面设置一个默认视口大小。默认是 800x600。如果为 null 的话就禁用视图口。
   1. width <[number]> 页面宽度像素。
   2. height <[number]> 页面高度像素。
   3. deviceScaleFactor <[number]> 设置设备的缩放（可以认为是 dpr）。默认是 1。
   4. isMobile <[boolean]> 是否在页面中设置了 meta viewport 标签。默认是 false。
   5. hasTouch<[boolean]> 指定viewport是否支持触摸事件。默认是 false。
   6. isLandscape <[boolean]> 指定视口是否处于横向模式。默认是 false。
4. slowMo <[number]> 将 Puppeteer 操作减少指定的毫秒数。这样你就可以看清发生了什么，这很有用。

具体使用情况请看实例：

const puppeteer = require('puppeteer'); puppeteer.launch({ executablePath: 'D:\\node_modules\\puppeteer\\.local-chromium\\win64-579032\\chrome-win32\\chrome.exe', headless: false}).then(async browser => { const page1 = await browser.newPage(); await page1.goto('https://www.baidu.com'); await page1.screenshot({path: '../img/baidu800.png'}); // 存储节点以便能重新连接到 Chromium const browserWebSocketEp = browser.wsEndpoint(); // 从 Chromium 断开和 puppeteer 的连接 browser.disconnect(); // 使用节点来重新建立连接 const browser2 = await puppeteer.connect( { browserWSEndpoint:browserWebSocketEp, ignoreHTTPSErrors:false, defaultViewport:{ width:1500, height:1000, deviceScaleFactor:1, isMobile:false, hasTouch:false, isLandscape:false }, slowMo:1000 } ); const page2 = await browser2.newPage(); await page2.goto('https://example.com'); await page2.screenshot({path: '../img/example1500.png'}); // 关闭 Chromium await browser2.close(); });

配置websocket连接，使用puppeteer.connect重新连接

重新连接后可以重新定义page窗口大小和速度，可以通过

两个page窗口的截图比较

▷3◁

3、executablePath()

环境初始化中已经详细描述过

▷4◁

4、defaultArgs([options])

跟launch中的配置重复，不再重复分析

5、createBrowserFetcher([options])

options <[Object]>

1. host <[string]> 要使用的下载主机. 默认是 https://storage.googleapis.com.
2. path <[string]> 下载文件夹的路径. 默认是 <root>/.local-chromium, <root> 是 puppeteer 的包根目录。
3. platform <[string]> 可能的值有: mac, win32, win64, linux. 默认是当前平台。

使用实例：

const puppeteer = require('puppeteer'); const BrowserFetcher = puppeteer.createBrowserFetcher( { host:"https://storage.googleapis.com", path:"D:\\node_modules\\puppeteer\\.local-chromium", platform:"mac" });

主要用于管理chromium下载，在BrowserFetcher 模块详解中再详细介绍。