puppeteer初探

导语:我们日常使用的浏览器步骤为:启动浏览器、打开一个网页、进行交互。无头浏览器则是通过执行脚本来模拟真实的浏览器使用场景。

headless Chrome

1
2
3
4
5
6
1. Puppeteer 使用 DevTools 协议 与浏览器进行通信
2. 对网页进行截图保存为图片或pdf
3. 抓取单页应用(SPA)执行并渲染(解决传统 HTTP 爬虫抓取单页应用难以处理异步请求的问题)
4. 做表单的自动提交、UI的自动化测试、模拟键盘输入等
5. 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
6. 在最新的无头浏览器环境里做测试、使用最新浏览器特性

安装

1
2
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer -S

简单示例

1
2
3
4
5
6
7
8
9
10
11
12
const puppeteer = require('puppeteer');

async function run() {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'baidu.png'});
await page.pdf({path: 'baidu.pdf', format: 'A4'});
browser.close();
}

run();

page.evaluate(pageFunction, …args):向页面注入函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://www.baidu.com'');
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
deviceScaleFactor: window.devicePixelRatio
};
});

console.log('Dimensions:', dimensions);
await browser.close();
})();