Puppeteer是什么
Puppeteer是一个Node库,它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。
可以使用Puppeteer来自动化完成浏览器的操作,官方给出的一些使用场景如下:
- 生成页面PDF
- 抓取 SPA(单页应用)并生成预渲染内容(即“SSR”(服务器端渲染))
- 自动提交表单,进行 UI 测试,键盘输入等
- 创建一个时时更新的自动化测试环境,使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中执行测试
- 捕获网站的timeline trace,用来帮助分析性能问题
- 测试浏览器扩展
与Selenium比较
说起浏览器自动化操作,很容易联想到另一个自动化框架:Selenium。
但是Puppeteer与Selenium使用的协议却不一样!
Puppeteer使用DevTools协议与Chome(或Chromium)进行交互,而Selenium却使用WebDriver协议与浏览器进行交互。
另外,他们各自的API在使用风格上也相差很多。
实践案例
在使用Puppeteer之前需要先安装,Node.js最低版本要求为:Node v6.4.0。
有2种方式安装:
第一种:执行npm i puppeteer
安装,这种方式安装同时会下载最新版本的Chromium,以保证可以使用API。
第二种:执行npm i puppeteer-core
安装,这种方式仅仅只会安装Puppeteer自己,默认不会下载Chromium(自1.7.0版本以后会发布一个puppeteer-core
包)。
如果本机已经安装了Chrome或Chromium浏览器,可以选择第一种方式安装Puppeteer即可。
如下示例展示通过Puppeteer打开百度网站,然后输入关键Java开发
,并在搜索结果中定位div
元素。
// 采用`npm i puppeteer`安装时,可以加载`puppeteer`模块
// const puppeteer = require('puppeteer');
// 采用`npm i puppeteer-core`安装时,可以加载`puppeteer-core`模块
const puppeteer = require('puppeteer-core');
(async () => {
// puppeteer默认打开的浏览器为无头模式
// const browser = await puppeteer.launch();
// 通过参数明确指定puppeteer不以无头模式打开浏览器,并指定了Chrome浏览器可执行文件的路径
const browser = await puppeteer.launch({headless: true, executablePath:'C:\Program Files\Google\Chrome\Application\chrome.exe'});
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
try {
// 定位搜索输入框
await page.focus('#kw');
// 给搜索框输入关键字
await page.keyboard.type('Java开发');
// 按回车键
// await page.keyboard.press('Enter');
// 定位搜索按钮
const ele = await page.waitForSelector('#su');
// 点击搜索按钮
ele.click();
// 定位搜索结果中的div列表数量
const divsCounts = await page.$$eval('div', divs => divs.length);
console.log(divsCounts);
} catch (e) {
console.log(e.TimeoutError);
}
// 明确关闭浏览器
await browser.close();
})();
【参考】
Puppeteer 中文文档
Selenium Webdriver原理终于搞清楚了
Puppeteer系列
Selenium入门介绍