Puppeteer让你网页操作更简单(1)屏幕截图

网页自动化设计爬虫工具 中就使用了Puppeteer进行对网页自动化处理,今天就来看看它是什么东西!

我们将学习什么?

在本教程中,您将学习如何使用JavaScript自动化和抓取 web。 为此,我们将使用Puppeteer。 Puppeteer是一个Node库API,允许我们控制无头Chrome。 无头Chrome是运行Chrome浏览器而不实际运行Chrome的一种方式。

如果这都没有任何意义,您真正需要知道的就是我们将编写将自动化Google Chrome的JavaScript代码。

在开始之前

在开始之前,您的电脑上需要安装Node 8+。 您可以在此处安装它。 请确保选择“Current”版本,因为它是8+。

如果您以前从未使用过Node并想学习它,请查看:[学习Node JS —— 3个最佳在线Node JS课程](https://codeburst.io/learn-node- js-the-3-best-online-node-js-courses-87e5841f4c47)。

安装Node后,创建一个新项目文件夹并安装Puppeteer。 Puppeteer随附了一个与API兼容的最新版本的Chromium:

npm install --save puppeteer

例1 —— 拍摄屏幕截图

安装Puppeteer后,我们将首先走through一个简单的示例。 此示例直接来自Puppeteer文档(仅做少量更改)。 我们将浏览的代码将为您告知的任何网站拍摄屏幕截图。

首先,创建一个名为test.js的文件,并复制以下代码:

const puppeteer = require('puppeteer');async function getPic() {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://google.com');await page.screenshot({path: 'google.png'});await browser.close();
}getPic();

让我们逐行浏览这个示例。

  • 第1行: 我们需要之前安装的Puppeteer依赖项
  • 第3-10行: 这是我们的main函数getPic()。 这个函数将保存我们所有的自动化代码。
  • **第12行:**在第12行上,我们正在调用我们的getPic()函数。 (运行功能)。

需要注意的重要一点是我们的getPic()函数是一个async函数,并使用新的ES 2017 async/await功能。 由于此函数是异步的,因此在调用时它返回一个Promise。 当async函数最终返回一个值时,Promise将解析(如果错误,则Reject)。

由于我们使用了async函数,因此我们可以使用await表达式,该表达式将暂停函数执行并等待Promise解析然后再继续。 如果现在还不明白也没关系。 随着教程的继续,这将变得更加清晰。

现在我们已经概述了main函数,让我们深入研究其内部工作原理:

  • 第4行:
const browser = await puppeteer.launch(); 

这是我们实际启动puppeteer的地方。 我们本质上是启动了一个Chrome实例并将其设置为我们新创建的browser变量。 因为我们也使用了await关键字,所以函数将在这里暂停,直到我们的Promise解析(直到我们成功创建了我们的Chrome实例,或者错误)

  • 第5行:
const page = await browser.newPage();

在这里,我们在自动化浏览器中创建一个新页面。 我们等待新页面打开并将其保存到我们的page变量中。

  • 第6行:
await page.goto('https://google.com');

使用我们在上一行代码中创建的page,我们现在可以告诉我们的page导航到一个URL。 在这个例子中,我们正在导航到谷歌。 我们的代码将暂停,直到页面加载完毕。

  • 第7行:
await page.screenshot({path: 'google.png'});

现在我们告诉Puppeteer拍摄当前页面的屏幕截图。 screenshot()方法以对象作为参数,我们可以在其中自定义我们的.png屏幕截图的保存位置。 同样,我们使用了await关键字,所以我们的代码在操作发生时会暂停。

  • 第9行:
await browser.close();

最后,我们已经到达getPic()函数的末尾,我们关闭browser

运行示例

您可以使用Node运行上面的示例代码:

node test.js

这是生成的屏幕截图:

太棒了! 为了增加更多乐趣(和更容易的调试),我们可以以非无头方式运行我们的代码。

这确切地意味着什么? 自己试试看。 将代码中的第4行从此更改:

const browser = await puppeteer.launch();

至此:

const browser = await puppeteer.launch({headless: false}); 

然后用Node再次运行:

node test.js

相当酷吧? 当我们运行{headless: false}时,您可以实际观察Google Chrome按指示浏览代码的工作方式。

在继续之前,我们将对此代码执行最后一项操作。 还记得我们的截图有点偏离中心吗? 好吧,那是因为我们的页面有点小。 我们可以通过添加这行代码来更改页面大小:

await page.setViewport({width: 1000, height: 500})

这会产生更好看的截图:

这是此示例的最终代码:

const puppeteer = require('puppeteer');async function getPic() {const browser = await puppeteer.launch({headless: false});const page = await browser.newPage();await page.goto('https://google.com');await page.setViewport({width: 1000, height: 500})await page.screenshot({path: 'google.png'});await browser.close();
}getPic();

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flink源码分析 - flink命令启动分析

flink版本: flink-1.12.1 源码位置: flink-dist/src/main/flink-bin/bin/flink flink命令源码: #!/usr/bin/env bash ################################################################################ # Licensed to the Apache Software Foundation (ASF) under one #…

Clickhouse表引擎之CollapsingMergeTree引擎的原理与使用

前言 继续上次关于clickhouse的一些踩坑点,今天讲讲另外一个表引擎——CollapsingMergeTree。这个对于引擎对于数据量较大的场景是个不错的选择。注意,选择clickhouse的一般原因都是为了高效率查询,提高用户体验感,说白了就是以空…

MySQL单表的查询练习

作业要求: 作业实现: 首先,创建worker表并插入相关数据 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10) NOT NULL DEFAULT 群众,姓名 varc…

OpenJDK 和 OracleJDK 哪个jdk更好更稳定,正式项目用哪个呢?关注者

OpenJDK 和 OracleJDK:哪个JDK更好更稳定,正式项目应该使用哪个呢?我会从,从开源性质、更新和支持、功能差异等方面进行比较,如何选择,哪个jdk更好更稳定,正式项目用哪个呢,进行比较…

定制elementPlus主题

1. 安装sass 基于vite的项目默认不支持css预处理器,需要开发者单独安装 npm i sass -D 2. 准备定制化的样式文件 styles/element/index.scss /* 只需要重写你需要的即可 */ forward element-plus/theme-chalk/src/common/var.scss with ($colors: (primary: (/…

测试:虚拟机查看CPU使用率

Windows虚拟机 任务管理器: 在虚拟机中,您可以打开任务管理器(Ctrl Shift Esc),然后在“进程”标签下查看CPU使用率。 PowerShell: 使用PowerShell命令Get-VM | Select-Object Name, CPUUsage可以查询虚拟机的CPU使用率。 VMwa…

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-4(1) 刚体的速度与角速度

本文仅供学习使用,总结很多本现有讲述运动学或动力学书籍后的总结,从矢量的角度进行分析,方法比较传统,但更易理解,并且现有的看似抽象方法,两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

关于java类与对象的创建

关于java类与对象的创建 我们在前面的文章中回顾了方法的定义和方法的调用,以及了解了面向对象的初步认识,我们本篇文章来了解一下类和对象的关系,还是遵循结合现实的方式去理解,不是死记硬背😀。 1、类 类是一种抽…

【InternLM 大模型实战】第五课

LMDeploy 大模型量化部署实践 大模型部署背景模型部署定义:产品形态计算设备 大模型特点内存开销巨大动态shape相对视觉模型,LLM结构简单 大模型部署挑战设备推理服务 大模型部署方案技术点方案云端移动端 LMDeploy 简介高效推理引擎完备易用的工具链支持…

环境配置注解 @PostConstruct作用以及在springboot框架中的加载时间

作用 PostConstruct 是 Java EE 5 引入的一个注解,用于 Spring 框架中。它标记在方法上,以表示该方法应该在对象的依赖注入完成后,并且在类的任何业务方法被调用之前执行。这个注解的主要用途是进行一些初始化工作。需要注意的是:…

统计学-R语言-4.5

文章目录 前言多变量数据多维列联表复式条形图并列箱线图R语言中取整运算主要包括以下五种: 点带图多变量散点图重叠散点图矩阵式散点图 练习 前言 本篇文章将继续对数据的类型做介绍,本片也是最后一个介绍数据的。 多变量数据 掌握描述多变量数据的分…

CDN内容分发网络

1、CDN的含义 1.1 什么是CDN? CDN是内容分发网络(Content Delivery Network)的缩写。它是一种通过将内容部署到全球各地的服务器节点,使用户能够快速访问和下载内容的网络架构。 简单来说,CDN通过将内容分发到离用户更…

Redis-redis.conf配置文件中的RDB与AOF持久化方式的详解与区别

RDB(Redis Database) RDB是Redis的默认持久化方式,它将内存中的数据以二进制格式写入磁盘,形成一个快照。RDB持久化有以下几个重要的配置选项: save:指定了保存RDB的策略,默认的配置是每900秒&…

【软件测试】学习笔记-后端性能测试工具原理与行业常用工具简介

不管是什么类型的性能测试方法,都需要去模拟大量并发用户的同时执行,所以性能测试基本都是靠工具实现。没有工具,性能测试将寸步难行。 这篇文章从后端性能测试的工具讲起,讨论它们的实现原理,以及如何用于后端的性能…

SpringCloud:Gateway服务网关

文章目录 Gateway服务网关快速入门断言工厂默认过滤器自定义过滤器过滤器执行顺序跨域问题处理 Gateway服务网关 网关(Gateway)是将两个使用不同协议的网络段连接在一起的设备。 网关的作用就是对两个网络段中的使用不同传输协议的数据进行互相的翻译转换…

案例123:基于微信小程序的在线订餐系统的设计与实现

文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder …

CSS 雷达监测效果

<template><view class="center"><view class="loader"><view></view></view></view></template><script></script><style>/* 设置整个页面的背景颜色为深灰色 */body {background-col…

leetcode - 934. Shortest Bridge

Description You are given an n x n binary matrix grid where 1 represents land and 0 represents water. An island is a 4-directionally connected group of 1’s not connected to any other 1’s. There are exactly two islands in grid. You may change 0’s to 1…

【记录】重装系统后的软件安装

考完研重装了系统&#xff0c;安装软件乱七八糟&#xff0c;用到什么装什么。在这里记录一套标准操作&#xff0c;备用。一个个装还是很麻烦&#xff0c;我为什么不直接写个脚本直接下载安装包呢&#xff1f;奥&#xff0c;原来是我太菜了还不会写脚本啊&#xff01;先记着吧&a…