puppeteer

目录

介绍

puppeteer是一个可以控制chrome的库,可以模拟一些交互行为。

启动方法

启动浏览器,然后打开一个页面,之后跳转到一个网址打开页面

js 复制代码
// Launch the browser
  const browser = await puppeteer.launch({ headless: "new" });

  // Create a page
  const page = await browser.newPage();

  // Go to your site
  await page.goto("https://www.baidu.com");

功能一、爬虫

优势

  1. 与普通爬虫相比它更简单,因为它用的是真实的chrome环境,不需要我们配置各种header的参数
  2. 它能等待js动态生成的内容之后进行爬虫
  3. 他能能够截图并保存为图片

如何实现

获取网页元素

这里用waitForSelector用选择器进行爬取,这边都是异步的函数,这也是puppeteer的优势,它可以等待一些动态变化之后再爬取

js 复制代码
// Query for an element handle.
  const element = await page.waitForSelector("span.title-content-title");

  // Get the text content of the element
  const textContent = await page.evaluate(
    (element) => element.textContent,
    element
  );

截图

保存图片用screenshot方法,保存pdf用pdf方法(而且pdf是带链接的)

js 复制代码
await page.screenshot({
    path: "1.png",
    fullPage: true,
  });
  await page.pdf({
    path: "1.pdf",
    fullPage: true,
  });

爬虫小demo

js 复制代码
let puppeteer = require("puppeteer");

(async () => {
  // Launch the browser
  const browser = await puppeteer.launch({ headless: "new" });

  // Create a page
  const page = await browser.newPage();

  // Go to your site
  await page.goto("https://www.baidu.com");

  // Query for an element handle.
  const element = await page.waitForSelector("span.title-content-title");

  // Get the text content of the element
  const textContent = await page.evaluate(
    (element) => element.textContent,
    element
  );

  console.log(textContent);

  // Dispose of handle
  await element.dispose();

  // Close browser.
  await browser.close();
})();

功能二、执行脚本

上面爬虫的那个evaluate方法就是执行脚本的方法,执行脚本之后可以返回一个值作为结果。

js 复制代码
  const result = await page.evaluate(() => {
    // 在此处编写要执行的脚本
    return xxx;
  });

百度搜索脚本demo

js 复制代码
  // 执行脚本
  const result = await page.evaluate(() => {
    // 在此处编写要执行的脚本
    let input = document.querySelector("input#kw");
    input.value = "nodejs教学";
    let search = document.querySelector("input#su");
    search.click();
    return "已搜索";
  });

  console.log(result); // 输出脚本执行结果
  // 等待两秒等待页面加载完成
  await page.waitForTimeout(2000);
  await page.screenshot({
    path: "nodejs.png",
    fullPage: true,
  });

结果生成的图片

功能三、获取cookie(这个只能是模拟浏览器当前进入网页的cookie不是平时用的下载的的浏览器的cookie)

js 复制代码
let cookie = await page.cookies();

功能四、监控网页,进行性能分析

  // 跟踪
  // 启动跟踪
  await page.tracing.start({ path: "trace.json" });
  。。。。。。
  // 停止跟踪
  await page.tracing.stop();

  // 导出跟踪结果
  const tracingData = await page.tracing.export();

  // 保存跟踪结果为JSON文件
  require('fs').writeFileSync('trace.json', tracingData);

这里生成的json文件可以通过浏览器的F12里的性能里上传按钮上传,之后就能看到可视化的性能分析,结果图如下

相关推荐
暮毅1 分钟前
10.Node.js连接MongoDb
数据库·mongodb·node.js
LunarCod13 分钟前
WorkFlow源码剖析——Communicator之TCPServer(中)
后端·workflow·c/c++·网络框架·源码剖析·高性能高并发
码农派大星。44 分钟前
Spring Boot 配置文件
java·spring boot·后端
杜杜的man1 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*1 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
llllinuuu1 小时前
Go语言结构体、方法与接口
开发语言·后端·golang
cookies_s_s1 小时前
Golang--协程和管道
开发语言·后端·golang
为什么这亚子1 小时前
九、Go语言快速入门之map
运维·开发语言·后端·算法·云原生·golang·云计算
想进大厂的小王2 小时前
项目架构介绍以及Spring cloud、redis、mq 等组件的基本认识
redis·分布式·后端·spring cloud·微服务·架构
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea