从零开始学习 puppeteer-阿里云开发者社区

从零开始学习 puppeteer

2023-06-14 221

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 从零开始学习 puppeteer

关键词：自动化测试爬虫 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");
})()