关键词：自动化测试 爬虫 chrome
文档 EN: pptr.dev/ CN: puppeteer.bootcss.com/
Puppeteer 通常用在自动化测试和爬取页面，提供丰富 api 来控制 headless Chrome 或者 Chromium。
通过这篇文章你会了解到：
- puppeteer 环境安装
- puppeteer 基本使用
- 滚动截屏
- 模拟点击获取数据
- 定时任务获取数据
安装
npm 包比较大，推荐全局安装。
npm i puppeteer # or using yarn yarn add puppeteer # or using pnpm pnpm i puppeteer
使用
环境配置
pnpm init -y pnpm i puppeteer touch demo.js
刚开始先通过 node demo.js 运行项目。
官方案例
puppeteer.launch创建 Browser 实例，类似打开浏览器browser.newPage创建 Page 实例，类似浏览器中新开页面browser.close()关闭浏览器。
const puppeteer = require("puppeteer"); (async () => { // 1. 创建了Browser实例，类似打开浏览器 const browser = await puppeteer.launch({ headless: "new", }); console.log("打开浏览器"); // 2. 创建了Page实例，类似浏览器中新开页面 const page = await browser.newPage(); console.log("打开页面"); // 导航到要访问的页面 await page.goto("https://www.baidu.com"); await page.screenshot({ path: "example.png" }); console.log("success"); // 在页面中执行脚本 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 page.setViewport({ width: 1420, height: 1000, }); // 全屏截取 await page.screenshot({ path: "example1.png", fullPage: true, }); // waitUntil 来配置什么时候导航结束 "domcontentloaded"、"networkidle0"、"networkidle2" await page.goto("https://news.ycombinator.com", { waitUntil: "networkidle2", }); await page.pdf({ path: "hn.pdf", format: "A4" }); console.log("success pdf"); // 3. 关闭浏览器 await browser.close(); })();
page.goto 用于导航到新页面，waitUntil 是指定一个等待条件，告诉 puppeteer 合适导航完成。默认取值 load, 还有 documentloaded 等待页面 DOMcontentLoaded 事件触发。
page.evaluate 功能类似 eval，在浏览器中执行脚本，结果返回程序。
page.$(selector) 就是 document.querySelector，而 page.$$(selector) 则是 document.querySelectorAll.
这个 case 仅仅是整合了官方最简单的三个案例。运行一遍，有个概念。
拓展 - 滚动截屏
很多网站数据是懒加载的，如果想要把所有的数据获取到，则需要一些相关的元素操作，比如滚动。
const puppeteer = require("puppeteer"); (async () => { const browser = await puppeteer.launch({ headless: "new", }); console.log("打开浏览器"); const page = await browser.newPage(); console.log("打开页面"); // demo 懒加载及数据滚动加载 await scrollLoad(page); await browser.close(); })(); // 懒加载及数据滚动加载 async function scrollLoad(page) { await page.goto("https://www.jd.com/", { waitUntil: "networkidle2", }); // setViewport setUserAgent // await page.emulate(puppeteer.KnownDevices['iPhone 13 Pro Max']); await page.emulate({ viewport: { width: 375, height: 667, isMobile: true, }, userAgent: '"Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"', }); // 获取element内容 const result = await page.$eval("#hotwords", (el) => { return el.innerText; }); console.log("page.$eval", result); // element 输入 const inputEle = await page.$("#search input"); await inputEle.type("macbook pro", { delay: 300, }); // element点击 // const btnEle = await page.$("#search button"); // await btnEle.click(); await autoScroll(page); //全屏截取 await page.screenshot({ path: "jd-all.png", fullPage: true, }); } // 工具函数 - 自动滚动 async function autoScroll(page) { await page.evaluate(async () => { await new Promise((resolve) => { let totalHeight = 0; const distance = 200; const timer = setInterval(() => { const scrollHeight = document.body.scrollHeight; window.scrollBy(0, distance); totalHeight += distance; if (totalHeight >= scrollHeight) { clearInterval(timer); resolve(); } }, 200); }); }); }
拓展 - 点击按钮获取数据
B 站有个换一换的按钮，我们就拿这个功能举例：
首先就是大致一样的页面逻辑：
const puppeteer = require("puppeteer"); const fs = require("fs-extra"); async function demo() { const browser = await puppeteer.launch({ headless: "new", }); console.log("打开浏览器"); const page = await browser.newPage(); console.log("打开页面"); // 页面操作 await dealLogically(page, browser); } demo();
然后再进行业务定制：
async function dealLogically(page, browser) { await page.setViewport({ width: 1920, height: 1080 }); // 打开目标页面 await page.goto("https://www.bilibili.com/"); // 返回的data let data = []; // 获取按钮 const change = await page.$(".feed-roll-btn > .roll-btn"); // 点击10次 for (let i = 0; i < 10; i++) { // 模拟点击事件 change && (await change.click()); // 每次点击之后，留出1s给页面资源加载 await page.waitForTimeout(1000); data = await page.evaluate((data) => { const titles = document.querySelectorAll( ".container .feed-card .bili-video-card__info--tit" ); const imgs = document.querySelectorAll( ".container .feed-card .bili-video-card__cover img" ); const info = document.querySelectorAll( ".container .feed-card .bili-video-card__info--owner" ); titles.forEach((v, i) => { const [owner, date] = info[i].textContent.split("· "); data.push({ img: imgs[i].getAttribute("src"), title: v.textContent, info: { owner, date, }, }); }); return data; }, data); } // 关闭浏览器实例 await browser.close(); // 将数据作为 JSON 写入json文件 const jsonData = JSON.stringify(data, null, 2); //写入文件路径 const filePath = `./${+new Date()}.json`; fs.writeFile(filePath, jsonData, (err) => { if (err) { console.error(err); return; } console.log("Data written to file"); }); }
拓展 - 定时任务
引入 node-schedule 这个包。
npx nodemon index 运行项目。
const schedule = require("node-schedule"); // 引入上面b站的案例代码 const demo = require("../demo"); function main() { schedule.scheduleJob(`自动爬虫任务`, `30 20 * * * *`, ()=>demo()); } main();
拓展 - 模拟登录
通过 cookie 模拟已登录环境，推荐使用 "Export cookie JSON file for Puppeteer" 这个 chrome 插件直接获取cookie 信息。
举例：模拟登陆掘金
const puppeteer = require("puppeteer"); // 通过 插件 获取的 JSON化 cookie const cookieObjects = require("./cookies.json"); (async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080 }); cookieObjects.forEach((cookie) => { page.setCookie(cookie); }); await page.goto("https://juejin.cn"); })()
