puppeteer能做什么?
你可以在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成! 下面是一些示例:
- 生成页面 PDF。
- 抓取 SPA(单页应用)并生成预渲染内容(即“SSR”(服务器端渲染))。
- 自动提交表单,进行 UI 测试,键盘输入等。
- 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
- 捕获网站的 timeline trace,用来帮助分析性能问题。
- 测试浏览器扩展。
使用
npm i puppeteer node
Note: Puppeteer 至少需要 Node v6.4.0,下面的示例使用 async / await,它们仅在 Node v7.6.0 或更高版本中被支持。
Puppeteer 使用起来和其他测试框架类似。你需要创建一个 Browser 实例,打开页面,然后使用 Puppeteer 的 API。
Example - 跳转到 example.com 并保存截图至 example.png:
文件为 example.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
使用 node example.js 来运行查看, 如果你觉得每次使用node来运行比较繁琐,你可以使用nodemon 来监听文件变化。
进阶
使用node(fs)结合puppeteer爬取某音乐飙升榜写入本地文件夹
文件为music.js
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch({
headless: false,
slowMo: '200' ,
})
const page = await browser.newPage()
await page.setViewport({ width: 1280, height: 1280 })
await page.goto('https://y.qq.com/n/ryqq/toplist/62', { waitUntil: ['networkidle2'] })
await page.waitForSelector('.topList_mod_songlist > .songlist__list > li')
const ulList = await page.$$eval('.topList_mod_songlist > .songlist__list > li', (options) =>{
const list = [];
options.map((option) => {
let image = 'https:' + option.querySelector('.songlist__pic').getAttribute('src');
let song_name = option.querySelector('.songlist__songname_txt > a:nth-child(2)').innerText;
let author = option.querySelector('.songlist__artist > a').innerText;
list.push({image, song_name, author})
})
return list
});
fs.writeFile('../json/song.json', JSON.stringify(ulList, null, '\t'), err => {
if (err) {
console.error(err)
return
}
console.log('success')
})
await browser.close()
})()
结合nodemon来运行music.js (nodemon music.js)