是什么
Puppeteer 是一个Node库，支持调用Chrome的API来操纵Web。Chrome团队在维护，会拥有更好的兼容性和前景。
用途
- 生成页面PDF或截图
- UI自动化测试
- 性能分析
- 爬虫
demo
- 安装
npm i puppeteer除了下载puppeteer包之外，还会下载最新版本的Chromium。 - 例一 UI测试
文件名：1.js
运行：node 1.js
功能：进入掘金首页，1秒后点击前端tab，1秒后点击搜索框，搜索puppeteer，关闭浏览器。
const puppeteer = require('puppeteer');
async function testJuejinUi() {
try {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
const dimensions = await page.evaluate(() => {
return {
width: window.outerWidth,
height: window.outerHeight,
};
});
await page.setViewport({
width: dimensions.width,
height: dimensions.height,
})
await page.goto('https://juejin.im/timeline');
await page.waitFor(1000)
await page.screenshot({ path: 'juejin-timeline.png' });
await page.tap('.nav-list>li:nth-child(2)>span')
await page.waitFor(1000)
await page.screenshot({ path: 'juejin-timeline-frontend.png' });
await page.type('.search-form>.search-input', 'puppeteer', { delay: 200 })
await page.tap('.search-form>.search-icon')
await page.waitFor(1000)
await page.screenshot({ path: 'juejin-search.png' });
await browser.close();
} catch (error) {
console.log(error)
}
}
testJuejinUi()
- 例二 性能分析
文件名：2.js
运行：node 2.js
功能：生成性能json文件。然后在控制台performance面板上传该json文件即可追踪到当时的性能情况。
const puppeteer = require('puppeteer');
async function testJuejinPerformance() {
try {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
const dimensions = await page.evaluate(() => {
return {
width: window.outerWidth,
height: window.outerHeight,
};
});
await page.setViewport({
width: dimensions.width,
height: dimensions.height,
})
await page.tracing.start({ path: 'trace.json' });
await page.goto('https://juejin.im/timeline');
await page.tracing.stop();
await browser.close();
} catch (error) {
console.log(error)
}
}
testJuejinPerformance()
- 例三 爬虫
文件：3.js
运行：node 3.js
功能：爬取掘金首页推荐文章名称与作者，并写入文件。
const puppeteer = require('puppeteer');
const fs = require('fs');
async function testJuejinUi() {
try {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
const dimensions = await page.evaluate(() => {
return {
width: window.outerWidth,
height: window.outerHeight,
};
});
await page.setViewport({
width: dimensions.width,
height: dimensions.height,
})
await page.goto('https://juejin.im/timeline');
await page.waitFor(1000)
let arr = await page.$$('ul.entry-list .entry-box')
arr = Array.from(arr)
const result = await Promise.all(arr.map(async (ele) => {
const title = await ele.$eval('.title-row a.title', (dom) => {
return dom.innerText
})
const author = await ele.$eval('li.username a', (dom) => {
return dom.innerText
})
return title + '--' + author
}))
fs.writeFileSync('1.text', '')
result.forEach((ele) => {
fs.appendFileSync('1.text', ele + '\n')
})
await browser.close();
} catch (error) {
console.log(error)
}
}
testJuejinUi()
常用API
const puppeteer = require('puppeteer');
const browser = puppeteer.launch() // 创建浏览器实例
const page = await browser.newPage(); // 打开新页面
await page.goto('https://juejin.im/timeline'); // 新页面地址
await page.screenshot({ path: 'juejin-timeline.png' }); // 截图功能
await page.waitFor(1000) // 等待1秒
await browser.close(); // 关闭浏览器
await page.tap('.search-form>.search-icon') // 点击指定元素
await page.$(selector) // 等同在页面内执行 document.querySelector
await page.$$(selector) // 等同在页面内执行 document. querySelectorAll
await page.evaluate(pageFunction[, ...args]) // 在页面实例上下文中执行js函数
