Puppeteer的入门教程和实践

2024-05-07 02:08
文章标签 实践 入门教程 puppeteer

本文主要是介绍Puppeteer的入门教程和实践，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

随时随地技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、QQ技术交流群(183198395)。

from：https://www.jianshu.com/p/2f04f9d665ce

 

出现的背景

Chrome59(linux、macos)、 Chrome60(windows)之后，Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的Chrome交互则是一个问题。通过启动Chrome时的命令行参数仅能实现简易的启动时初始化操作。Selenium、Webdriver等是一种解决方案，但是往往依赖众多，不够扁平。

Puppeteer.png

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

环境和安装

Puppeteer本身依赖6.4以上的Node，但是为了异步超级好用的async/await，推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高，centos服务器依赖偏稳定，v6很难使用headless Chrome，提升依赖版本可能出现各种服务器问题（包括且不限于无法使用ssh），最好使用高版本服务器。

Puppeteer因为是一个npm的包，所以安装很简单：

npm i puppeteer

或者

yarn add puppeteer

Puppeteer安装时自带一个最新版本的Chromium，可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。如果不下载的话，启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。

使用和例子

Puppeteer类似其他框架，通过操作Browser实例来操作浏览器作出相应的反应。


const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('http://rennaiqian.com');await page.screenshot({path: 'example.png'});await page.pdf({path: 'example.pdf', format: 'A4'});await browser.close();
})();

上述代码通过puppeteer的launch方法生成了一个browser的实例，对应于浏览器，launch方法可以传入配置项，比较有用的是在本地调试时传入{headless:false}可以关闭headless模式。


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

browser.newPage方法可以打开一个新选项卡并返回选项卡的实例page，通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。

一个很强大的方法是page.evaluate(pageFunction, ...args)，可以向页面注入我们的函数，这样就有了无限可能


const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('http://rennaiqian.com');// 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 browser.close();
})();

需要注意的是evaluate方法中是无法直接使用外部的变量的，需要作为参数传入，想要获得执行的结果也需要return出来。因为是一个开源一个多月的项目，现在项目很活跃，所以使用时自行查找api才能保证参数、使用方法不会错。

调试技巧

  1. 关掉无界面模式，有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器：

const browser = await puppeteer.launch({headless: false})
  1. 减慢速度，slowMo选项以指定的毫秒减慢Puppeteer的操作。这是另一个看到发生了什么的方法：

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

3.捕获console的输出,通过监听console事件。在page.evaluate里调试代码时这也很方便：


page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));

4.启动详细日志记录，所有公共API调用和内部协议流量都将通过puppeteer命名空间下的debug模块进行记录

 # Basic verbose loggingenv DEBUG="puppeteer:*" node script.js# Debug output can be enabled/disabled by namespaceenv DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messagesenv DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls# Protocol traffic can be rather noisy. This example filters out all Network domain messagesenv DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

爬虫实践

很多网页通过user-agent来判断设备，可以通过page.emulate(options)来进行模拟。options有两个配置项，一个为userAgent，另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。


const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];puppeteer.launch().then(async browser => {const page = await browser.newPage();await page.emulate(iPhone);await page.goto('https://www.example.com');// other actions...await browser.close();
});

上述代码则模拟了iPhone6访问某网站，其中devices是puppeteer内置的一些常见设备的模拟参数。

很多网页需要登录，有两种解决方案：

  1. 让puppeteer去输入账号密码
    常用方法：点击可以使用page.click(selector[, options])方法，也可以选择聚焦page.focus(selector)。
    输入可以使用page.type(selector, text[, options])输入指定的字符串，还可以在options中设置delay缓慢输入更像真人一些。也可以使用keyboard.down(key[, options])来一个字符一个字符的输入。

  2. 如果是通过cookie判断登录状态的可以通过page.setCookie(...cookies)，想要维持cookie可以定时访问。

Tip：有些网站需要扫码，但是相同域名的其他网页却有登录，就可以尝试去可以登录的网页登录完利用cookie访问跳过扫码。

简单例子


const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch({headless: false});const page = await browser.newPage();await page.goto('https://baidu.com');await page.type('#kw', 'puppeteer', {delay: 100});page.click('#su')await page.waitFor(1000);const targetLink = await page.evaluate(() => {return [...document.querySelectorAll('.result a')].filter(item => {return item.innerText && item.innerText.includes('Puppeteer的入门和实践')}).toString()});await page.goto(targetLink);await page.waitFor(1000);browser.close();
})()

records.gif

求赞，另外欢迎访问我的博客

小礼物走一走，来简书关注我

 


作者：任乃千
链接：https://www.jianshu.com/p/2f04f9d665ce
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

 

 

 

这篇关于Puppeteer的入门教程和实践的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/966034。

相关文章

基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
Prometheus与Grafana在DevOps中的应用与最佳实践

Prometheus与Grafana在DevOps中的应用与最佳实践

Prometheus 与 Grafana 在 DevOps 中的应用与最佳实践 随着 DevOps 文化和实践的普及，监控和可视化工具已成为 DevOps 工具链中不可或缺的部分。Prometheus 和 Grafana 是其中最受欢迎的开源监控解决方案之一，它们的结合能够为系统和应用程序提供全面的监控、告警和可视化展示。本篇文章将详细探讨 Prometheus 和 Grafana 在 DevO
阅读更多...
springboot整合swagger2之最佳实践

springboot整合swagger2之最佳实践

来源:https://blog.lqdev.cn/2018/07/21/springboot/chapter-ten/ Swagger是一款RESTful接口的文档在线自动生成、功能测试功能框架。 一个规范和完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务，加上swagger-ui，可以有很好的呈现。 SpringBoot集成 pom <!--swagge
阅读更多...
vue2实践：el-table实现由用户自己控制行数的动态表格

vue2实践：el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单，如图： 当我点击添加时，便添加一行；点击右边的删除时，便删除这一行。 至少要有一行数据，但是没有上限。 思路 这种每一行的数据固定，但是不定行数的，很容易想到使用el-table来实现，它可以循环读取:data所绑定的数组，来生成行数据，不同的是： 1、table里面的每一个cell，需要放置一个input来支持用户编辑。 2、最后一列放置两个b
阅读更多...
Weex入门教程之4，获取当前全局环境变量和配置信息(屏幕高度、宽度等)

Weex入门教程之4，获取当前全局环境变量和配置信息(屏幕高度、宽度等)

$getConfig() 获取当前全局环境变量和配置信息。 Returns: config (object): 配置对象；bundleUrl (string): bundle 的 url；debug (boolean): 是否是调试模式；env (object): 环境对象； weexVersion (string): Weex sdk 版本；appName (string): 应用名字；
阅读更多...
Weex入门教程之3，使用 Vue 开发 Weex 页面

Weex入门教程之3，使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下，详细看官方教程 Node.js 环境 Node.js官网 通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
阅读更多...
Weex入门教程之2，Android Studio安装Weex插件

Weex入门教程之2，Android Studio安装Weex插件

插件位置及描述 https://plugins.jetbrains.com/idea/plugin/8460-weex 貌似对windows还不是很支持，先放着吧。 安装 插件功能 先预览下都有什么功能 安装完成Weex插件后，如果在main toolbar找不到这些功能图标，那么就需要手动添加到main toolbar 添加到main toolbar 红框内就是
阅读更多...
Weex入门教程之1，了解Weex

Weex入门教程之1，了解Weex

【资料合集】Weex Conf回顾集锦：讲义PDF+活动视频！ PDF分享：链接：http://pan.baidu.com/s/1hr8RniG 密码：fa3j 官方教程：https://weex-project.io/cn/v-0.10/guide/index.html 用意 主要是介绍Weex，并未涉及开发方面，好让我们开始开发之前充分地了解Weex到底是个什么。 以下描述主要摘取于
阅读更多...
【HarmonyOS】-TaskPool和Worker的对比实践

【HarmonyOS】-TaskPool和Worker的对比实践

ArkTS提供了TaskPool与Worker两种多线程并发方案，下面我们将从其工作原理、使用效果对比两种方案的差异，进而选择适用于ArkTS图片编辑场景的并发方案。 TaskPool与Worker工作原理 TaskPool与Worker两种多线程并发能力均是基于 Actor并发模型实现的。Worker主、子线程通过收发消息进行通信；TaskPool基于Worker做了更多场景化的功能封装，例
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2