node & puppeteer 初始应用

163 阅读1分钟

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)

参考链接