puppeteer学习笔记

这篇具有很好参考价值的文章主要介绍了puppeteer学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

puppeteer是一个可以控制chrome的库,可以模拟一些交互行为,以及进行前端自动化测试。

启动方法

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

// 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的优势,它可以等待一些动态变化之后再爬取

// 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是带链接的)

await page.screenshot({
    path: "1.png",
    fullPage: true,
  });
  await page.pdf({
    path: "1.pdf",
    fullPage: true,
  });

爬虫小demo

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方法就是执行脚本的方法,执行脚本之后可以返回一个值作为结果。

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

百度搜索脚本demo

  // 执行脚本
  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,
  });

结果生成的图片
puppeteer学习笔记,nodejs后端开发,node.js,后端

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

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里的性能里上传按钮上传,之后就能看到可视化的性能分析,结果图如下
puppeteer学习笔记,nodejs后端开发,node.js,后端文章来源地址https://www.toymoban.com/news/detail-725454.html

到了这里,关于puppeteer学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Node.js学习笔记-05

    测试包含单元测试、性能测试、安全测试和功能测试等几个方面,本章将从Node实践的角度来介绍单元测试和性能测试。 10.1.1 单元测试的意义 开发者自测。对于开发者而言,不仅要编写单元测试,还应当编写可测试代码。 编写可测试代码原则: 单一职责 接口抽象 层次分离

    2024年02月12日
    浏览(43)
  • Node.js学习笔记-02

    1、函数式编程 高阶函数 函数可以作为参数或者返回值。 偏函数用法 偏函数用法是指创建一个调用另外一个部分——参数或变量已经预置的函数——的函数的用法。 举个例子:在JavaScrip中进行类型判断时,我们通常会进行类似上述代码的方法定义。如下代码存在的问题是需

    2024年02月14日
    浏览(47)
  • Node.js学习笔记-04

    这第九章也是个大重点 Node在选型时决定在V8引擎之上构建,也就意味着它的模型与浏览器类似。 本章关于进程的介绍和讨论将会解决如下两个问题: 单进程单线程并非完美,如今CPU基本均是多核的,真正的服务器(非VPS)往往还有多个CPU。——如何充分利用多核CPU服务器

    2024年02月13日
    浏览(46)
  • Node.js学习笔记-03

    1. 构建 TCP 服务 TCP 是面向连接的协议,显著特征 在传输之前需要3次握手形成会话。 客户端 —— 请求连接 —— 服务器端 —— 响应 —— 客户端 —— 开始传输 —— 服务器端。 2. 构建 UDP 服务 3. 构建 HTTP 服务 http模块 在node中HTTP服务继承自TCP服务器(net模块),它能够与多

    2024年02月13日
    浏览(41)
  • Node.js博客项目开发思路笔记

    开发一个博客系统,具备博客基本功能 只开发 server 端,不关心前端 首页、作者页、博客详情页 登陆页 管理中心、新建页、编辑页 数据如何存储 博客 id title content createtime author 1 标题 1 内容 1 1111112 zhangsan 2 标题 2 内容 2 1111111 lisi 用户 id username password realname 1 zhangsan 123 张三

    2024年02月12日
    浏览(42)
  • 【Nodejs】Node.js简介

    Node 的重要性已经不言而喻,很多互联网公司都已经有大量的高性能系统运行在 Node 之上。Node 凭借其单线程、异步等举措实现了极高的性能基准。此外,目前最为流行的 Web 开发模式是前后端分离的形式,即前端开发者与后端开发者在自己喜欢的 IDE 上独立进行开发,然后通

    2024年02月12日
    浏览(57)
  • Node.js学习笔记(七) 版本管理

    大家好,我是半虹,这篇文章来讲 Node 版本管理,主要介绍 nvm 的安装与使用 0、Node 版本管理 在日常开发中,我们可能会同时做多个项目,这些项目所使用的 Node 版本往往各不相同 当切换项目时,需要同步去切换 Node 环境,这时候就要有良好的版本管理流程 在以前,大家总

    2024年02月10日
    浏览(59)
  • 尚硅谷最新Node.js 学习笔记(一)

    目录 一、Nodejs入门 1.1、为什么要学习Nodejs? 1.2、Nodejs是什么? 1.3、Nodejs的作用 1.4、Nodejs安装 1.5、Nodejs初体验 1.6、编码注意事项 二、Buffer(缓冲器) 2.1、概念 2.2、特点 2.3、使用 创建Buffer Buffer与字符串的转化 Buffer的读写 三、fs模块 3.1、文件写入 异步写入 同步写入 app

    2024年02月19日
    浏览(39)
  • web学习笔记(四十五)Node.js

    目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3  node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3  向文件写入指定内容 2.4 创建文件夹  2.5 判断文件夹是否存

    2024年04月16日
    浏览(33)
  • Node.Js篇 NodeJs使用MongoDB

    目录 介绍 概念解析                   安装 启动时注意事项 NodeJs操作Mongo 介绍 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。                                                           

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包