返回顶部
首页 > 资讯 > 前端开发 > JavaScript >puppeteer的原理和作用
  • 392
分享到

puppeteer的原理和作用

2024-04-02 19:04:59 392人浏览 薄情痞子
摘要

这篇文章主要介绍“puppeteer是什么”,在日常操作中,相信很多人在puppeteer是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”puppeteer是什么”的疑惑

这篇文章主要介绍“puppeteer是什么”,在日常操作中,相信很多人在puppeteer是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”puppeteer是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、Puppeteer简介

Puppeteer 是一个 node 库,它提供了一个高级 api 来通过 DevTools 协议控制 Chromium 或 Chrome,利用Puppeteer可以获取页面DOM节点、网络请求和响应、程序化操作页面行为、进行页面的性能监控优化、获取页面截图和pdf等,利用该神器就可以操作Chrome浏览器玩出各种花样。

二、Puppeteer核心组成结构

Puppeteer的结构也反映了浏览器的结构,其核心结构如下所示:

puppeteer的原理和作用

图片

Browser:这是一个浏览器实例,可以拥有浏览器上下文,可通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。

BrowserContext:该实例定义了一个浏览器上下文,可拥有多个页面,创建浏览器实例时默认会创建一个浏览器上下文(不能关闭),此外可以利用 browser.createIncognitoBrowserContext()创建一个匿名的浏览器上下文(不会与其它浏览器上下文共享cookie/cache).

Page:至少包含一个主框架,除了主框架外还有可能存在其它框架,例如iframe。

Frame:页面中的框架,在每个时间点,页面通过page.mainFrame()和frame.childFrames()方法暴露当前框架的细节。对于该框架中至少有一个执行上下文

ExecutionCOntext:表示一个javascript的执行上下文。

Worker:具有单个执行上下文,便于与 WEBWorkers 交互。

三、基本使用和常用功能

该神器整体使用起来比较简单,下面就开始我们的使用之路。

3.1 启动Browser

核心函数就是异步调用puppeteer.launch()函数,根据相应的配置参数创建一个Browser实例。

const path = require('path');  const puppeteer = require('puppeteer');  const chromiumPath = path.join(__dirname, '../', 'chromium/chromium/chrome.exe');  async function main() {      // 启动chrome浏览器      const browser = await puppeteer.launch({          // 指定该浏览器的路径          executablePath: chromiumPath,          // 是否为无头浏览器模式,默认为无头浏览器模式          headless: false      });  }   main();

3.2 访问页面

访问页面首先需要创建一个浏览器上下文,然后基于该上下文创建一个新的page,最后指定要访问的网址。

async function main() {      // 启动chrome浏览器      // ……      // 在一个默认的浏览器上下文中被创建一个新页面      const page1 = await browser.newPage();      // 空白页访问该指定网址      await page1.Goto('https://51yangsheng.com');      // 创建一个匿名的浏览器上下文      const browserContext = await browser.createIncognitoBrowserContext();      // 在该上下文中创建一个新页面      const page2 = await browserContext.newPage();      page2.goto('Https://www.baidu.com');  }    main();

3.3 设备模拟

经常需要不同类型的机型的浏览结果,此时就可以采用设备模拟实现,下面模拟一个iPhone X的设备的浏览器结果

async function main() {      // 启动浏览器      // 设备模拟:模拟一个iPhone X      // user agent      await page1.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (Khtml, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1')      // 视口(viewport)模拟      await page1.setViewport({          width: 375,          height: 812      });          // 访问某页面  }  main();

3.4 获取DOM节点

获取DOM节点有两种方式,一种方式是直接调用page所带的原生函数,另一种是通过执行js代码获取。

async function main() {      // 启动chrome浏览器      const browser = await puppeteer.launch({          // 指定该浏览器的路径          executablePath: chromiumPath,          // 是否为无头浏览器模式,默认为无头浏览器模式          headless: false      });      // 在一个默认的浏览器上下文中被创建一个新页面      const page1 = await browser.newPage();      // 空白页访问该指定网址      await page1.goto('https://www.baidu.com');      // 等待title节点出现      await page1.waitForSelector('title');      // 用page自带的方法获取节点     const titleDomText1 = await page1.$eval('title', el => el.innerText);      console.log(titleDomText1);// 百度一下      // 用js获取节点      const titleDomText2 = await page1.evaluate(() => {          const titleDom = document.querySelector('title');          return titleDom.innerText;      });      console.log(titleDomText2);  }  main();

3.5 监听请求和响应

下面就来监听一下百度中某一js脚本的请求和响应,request事件是监听请求,response事件是监听响应。

async function main() {      // 启动chrome浏览器      const browser = await puppeteer.launch({          // 指定该浏览器的路径          executablePath: chromiumPath,          // 是否为无头浏览器模式,默认为无头浏览器模式          headless: false      });      // 在一个默认的浏览器上下文中被创建一个新页面      const page1 = await browser.newPage();      page1.on('request', request => {          if (request.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              console.log(request.resourceType());              console.log(request.method());              console.log(request.headers());          }      });      page1.on('response', response => {          if (response.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              console.log(response.status());              console.log(response.headers());         }      })      // 空白页刚问该指定网址      await page1.goto('https://www.baidu.com');  }  main();

3.6 拦截某一请求

默认情况下request事件只有只读属性,不能够拦截请求,若想拦截该请求则需要通过page.setRequestInterception(value)启动请求拦截器,然后利用request.abort, request.continue 和 request.respond 方法决定该请求的下一步操作。

async function main() {      // 启动chrome浏览器      const browser = await puppeteer.launch({          // 指定该浏览器的路径          executablePath: chromiumPath,          // 是否为无头浏览器模式,默认为无头浏览器模式          headless: false      });      // 在一个默认的浏览器上下文中被创建一个新页面      const page1 = await browser.newPage();      // 拦截请求开启      await page1.setRequestInterception(true);// true开启,false关闭      page1.on('request', request => {          if (request.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              // 终止该请求              request.abort();              console.log('该请求被终止!!!');          }          else {              // 继续该请求              request.continue();          }      });      // 空白页访问该指定网址      await page1.goto('https://www.baidu.com');  }  main();

3.7 截图

截图是一个很有用的功能,通过截取就可以保存一份快照,方便后期问题的排查。(注:在无头模式下进行截图,否则截的图可能有问题)

async function main() {   // 启动浏览器,访问页面的操作         // 截屏操作,使用Page.screenshot函数      // 截取整个页面:Page.screenshot函数默认截取整个页面,加上fullPage参数就是全屏截取      await page1.screenshot({          path: '../imgs/fullScreen.png',          fullPage: true      });      // 截取屏幕中一个区域的内容      await page1.screenshot({          path: '../imgs/partScreen.jpg',          type: 'jpeg',          quality: 80,          clip: {              x: 0,              y: 0,              width: 375,              height: 300          }      });      browser.close();  }  main();

3.8 生成pdf

除了利用截图保留快照外,还可以使用pdf保留快照。

async function main() {   // 启动浏览器,访问页面的操作        // 根据网页内容生成pdf文件,使用Page.pdf——注意:必须在无头模式下才可以调用      await page1.pdf({          path: '../pdf/baidu.pdf'      });      browser.close();  }  main();

到此,关于“puppeteer是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: puppeteer的原理和作用

本文链接: https://lsjlt.com/news/66157.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • puppeteer的原理和作用
    这篇文章主要介绍“puppeteer是什么”,在日常操作中,相信很多人在puppeteer是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”puppeteer是什么”的疑惑...
    99+
    2024-04-02
  • @Autowired的原理和作用
    这篇文章主要介绍“@Autowired的原理和作用”,在日常操作中,相信很多人在@Autowired的原理和作用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”@Autowir...
    99+
    2024-04-02
  • Docker中Cgroup的原理和作用
    本篇内容主要讲解“Docker中Cgroup的原理和作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Docker中Cgroup的原理和作用”吧!内核中强大的工具cgroup,不仅可以限制被Na...
    99+
    2023-06-20
  • SwiftUI中@ViewBuilder的原理和作用
    这篇文章主要介绍“SwiftUI中@ViewBuilder的原理和作用”,在日常操作中,相信很多人在SwiftUI中@ViewBuilder的原理和作用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Swift...
    99+
    2023-06-20
  • CSS Hack的工作原理和用法
    本篇内容介绍了“CSS Hack的工作原理和用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!你对CSS ...
    99+
    2024-04-02
  • @ResponseBody注解作用和原理
         @ResponseBody这个注解通常使用在控制层(controller)的方法上,其作用是将方法的返回值以特定的格式写入到response的body区域,进而将数据返回给客户端。当方法上面...
    99+
    2023-06-02
  • 浅谈Vue3中key的作用和工作原理
    这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes; 如果不使...
    99+
    2024-04-02
  • nginx作用和工作原理是什么
    nginx是一种高性能的开源Web服务器和反向代理服务器。它可以用于处理静态和动态的HTTP、HTTPS、SMTP、POP3和IMA...
    99+
    2023-10-07
    nginx
  • MySQL主从复制的原理和作用
    这篇文章将为大家详细讲解有关MySQL主从复制的原理和作用,文章内容质量较高,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先数据库有个“bin-log”二进制文件,记录了所有SQL语句;...
    99+
    2024-04-02
  • Cookie的工作原理和应用详解
    目录1. Cookie 原理1.1 Cookie 背景信息1.2 Cookie 工作原理1.3 Cookie 创建、获取、修改1.4 Cookie 共享范围1.5 Cookie 生命...
    99+
    2024-04-02
  • 如何理解蜘蛛池的原理和作用
    这篇文章主要讲解了“如何理解蜘蛛池的原理和作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解蜘蛛池的原理和作用”吧!蜘蛛池是一种通过利用大型平台权重来获得百度收录以及排名的一种程序,...
    99+
    2023-06-10
  • Vue3中key的作用和工作原理是什么
    这篇文章主要介绍“Vue3中key的作用和工作原理是什么”,在日常操作中,相信很多人在Vue3中key的作用和工作原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中key的作用和工作原理是什么...
    99+
    2023-06-20
  • Mysql主从复制作用和工作原理
    一、什么是主从复制 主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库,主数据库一般是准实时的业务数据库。在最常用的mysql数据库中,支持单项、异步赋值。在赋值过程中,一个服务器充当主服...
    99+
    2024-04-02
  • 线程池的原理和作用是什么
    这篇文章主要讲解了“线程池的原理和作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“线程池的原理和作用是什么”吧!一、为什么需要线程池在实际使用中,线...
    99+
    2024-04-02
  • MySQL复制的原理和作用是什么
    本篇内容主要讲解“MySQL复制的原理和作用是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MySQL复制的原理和作用是什么”吧!目录一、MySQL复制相关概念二、简单的一主一从架构实现新数...
    99+
    2023-06-20
  • cookie和session的工作原理和区别
    本篇内容主要讲解“cookie和session的工作原理和区别”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“cookie和session的工作原理和区别”吧!为...
    99+
    2024-04-02
  • Repo工作原理和使用介绍
    目录1. 概要2. 工作原理2.1 项目清单库(.repo/manifests)2.2 repo脚本库(.repo/repo)2.3 仓库目录和工作目录3. 使用介绍3.1 init...
    99+
    2024-04-02
  • 如何理解操作系统中的Hosts文件工作原理和作用
    本篇内容介绍了“如何理解操作系统中的Hosts文件工作原理和作用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、什么是Hosts文件?Ho...
    99+
    2023-06-13
  • 如何正确的使用puppeteer库
    如何正确的使用puppeteer库,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.初始化项目注: 这里我们会使用到 es6/7 的新特性...
    99+
    2024-04-02
  • Java的Volatile关键字的作用和实现原理
    本篇内容主要讲解“Java的Volatile关键字的作用和实现原理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java的Volatile关键字的作用和实现原理”吧!volatile作用vola...
    99+
    2023-06-16
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作