Puppeteer介绍

发布于

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元素。

代码语言：javascript
复制
// 采用`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入门介绍

#自动化#puppeteer#测试#浏览器#协议