什么是 Puppeteer
Puppeteer 是一个基于 Chrome Devtools 协议，Puppeteer 可以让用户界面测试变得很轻松。
安装
当你安装Puppeteer时，会下载一个最新版本的Chromium。Puppeteer依赖于 Node v6.4.0 及以上版本，推荐安装 7.6 版本以上的Node。
npm i puppeteer
或者
yarn add puppeteer
Demo
- 截屏
example.js 的文件const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'baidu.png'});
await browser.close();
})();
在命令行中运行
node example.js
Puppeteer 默认截屏大小为 800 * 600。这个大小可以通过 Page.setViewport() 方法自定义。const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com', {
waitUntil: 'networkidle2'
});
await page.pdf({
path: 'hn.pdf',
format: 'A4'
});
await browser.close();
})();
- 获取页面信息
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
// Get the "viewport" of the page, as reported by the page.
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
deviceScaleFactor: window.devicePixelRatio
};
});
console.log('Dimensions:', dimensions);
await browser.close();
})();
常用 API
-
setViewport常用参数
{
width: 1024,
height: 3000,
isMobile: false,// 是否启用移动设备模式
}
-
screenshot常用参数
{
fullPage: true, // 是否截取整个页面
path: 'image',// 文件名，也可以写成 image.png
type: 'png',// 仅支持 png 和 jpeg
omitBackground: true// 是否支持透明度
}
-
pdf常用参数
headless: false不支持
{
path: '1.pdf',
scale: 1,// 缩放比例
printBackground: true,// 是否打印背景色
landscape: false,// 是否横向打印
formart: 'A4'
}
调试运行
- 关掉无界面模式
headless 可以启动浏览器查看模式const browser = await puppeteer.launch({
headless: false
});
- 减慢速度
slowMo 属性可以帮助你看清发生了什么。单位为 ms。const browser = await puppeteer.launch({
slowMo: 250
});
实践应用
【初识|初识 Puppeteer】我们可以通过使用Puppeteer来自动化测试网页，从而解放双手。
const puppeteer = require('puppeteer');
(async()=>{
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
const mouse = await page.mouse;
await page.goto('https://www.baidu.com/');
await page.type('#txtUserName', 'sa', {
delay: 250
});
await page.tap('#btnLoginNew');
await page.waitFor(2000);
await page.evaluate(()=>{
let array = Array.from(window.frames[2].document.querySelectorAll('li'));
array.map(item=>{
if(item.innerText==='智能排班'){
item.onclick();
}
});
})
})();
