puppeteer使用示例云顶之弈官网

自己从0到1开发的,微信小程序【云顶宝藏】求求点个5星好评吧!

需求:拿到所有英雄的信息

在这里插入图片描述

思路:点击每个英雄,进入英雄详情页,拿信息,并返回,继续下一个英雄**

在这里插入图片描述

最终效果

在这里插入图片描述


本地环境 window系统 node版本:v18.16.1

puppeteer中文技术文档: https://pptr.nodejs.cn/guides/query-selectors
英文技术文档:https://pptr.dev/api/puppeteer.mouse.click
示例源码下载:https://chaozhenrihuajianhang.oss-cn-hangzhou.aliyuncs.com/csdn/demo-puppeteer.zip

安装puppeteer

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install puppeteer

引入

const puppeteer = require('puppeteer')

puppeteer使用

const main = async () => {// 启动浏览器const browser = await puppeteer.launch({headless: false,defaultViewport: null,args: ['--start-maximized'],ignoreDefaultArgs: ['--enable-automation']});  // 创建一个新页面  const page = await browser.newPage();  // 获取Vue组件的HTML// const html = await page.evaluate(() => document.querySelector('#app').innerHTML)// 同步英雄await initYingxiong(page)// 截取网页的屏幕截图// await page.screenshot({path: 'example.png'});// 关闭浏览器  await browser.close();
}
const initYingxiong = async (page) => {// 访问一个网址  await page.goto('https://lol.qq.com/tft/#/champion');// 等待Vue组件加载完毕await page.waitForSelector('#app');// 延迟1秒await new Promise(resolve => setTimeout(resolve, 1000))await setYingxiong(page)
}
const setYingxiong= async (page) => {// 获取所有英雄的dom元素const elements = await page.$$('.champion-list .champion-item-big');for (let i = 0; i < elements.length; i++) {// 点击每个英雄,进入英雄详情await elements[i].click()// 获取父容器const obj = await page.$('.champion-detail-info')// 费用const grade = await obj.$eval('.component-champion .champion-price', node => node.innerText)// 头像const head_image = await obj.$eval('.component-champion .champion-pic img', node => node.src)// 背景头像let bg_image = await obj.$eval('.detail-info-1 .champion-big-pic', node => node.style.backgroundImage)bg_image = bg_image.replace('url("', 'https:')bg_image = bg_image.replace('")', '')// 名称const name = await obj.$eval('.champion-name', node => node.innerText)const nameArr = name.split(' ')// 技能图const skill_image = await obj.$eval('.champion-skill .skill-pic img', node => node.src)// 技能名称const skill_name = await obj.$eval('.champion-skill .skill-txt .skill-name', node => node.innerText)// 技能被动或主动const skill_trigger = await obj.$eval('.champion-skill .skill-txt .skill-type', node => node.innerText)// 技能描述const skill_details = await obj.$eval('.champion-skill .skill-desc', node => node.innerText)// 羁绊图片const jibanImg = await obj.$$eval('.detail-info-3 img', node => node.map(n => n.src))// 属性let jibenshuxing = await obj.$eval('.detail-info-2 .detail-info-desc', node => node.innerText)jibenshuxing = jibenshuxing.split('\n').map(i => i.replace(':', '/')).map(i => i.split('/'))let info = {grade,head_image,name,nameArr,skill_image,skill_name,skill_trigger,skill_details,jibanImg,jibenshuxing}// 跑数据库逻辑if (false) {console.log('【英雄】已存在执行修改', info)} else {console.log('【英雄】不存在执行新增', info)}// 点击右上角返回,英雄列表const search_btn = await page.$(`.page-btn-title:nth-child(2)`)await search_btn.click()}
}

请开始你的表演…

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

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

相关文章

如何搭建DolphinScheduler服务并结合内网穿透公网远程任务调度

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…

C语言学习 四、选择与循环

4.1关系表达式与逻辑表达式 算术运算符的优先级高于关系运算符关系运算符的优先级高于逻辑与 和 逻辑或运算符相同优先级的运算符从左到右进行结合 【例】 表达式 5 > 3 && 8 < 4 - !0 的最终值为多少 4.2 if-else语句 4.2.1 if-else单分支语句 if判断条件&am…

力扣日记3.21【贪心算法篇】45. 跳跃游戏 II

力扣日记&#xff1a;【贪心算法篇】45. 跳跃游戏 II 日期&#xff1a;2024.3.21 参考&#xff1a;代码随想录、力扣 45. 跳跃游戏 II 题目描述 难度&#xff1a;中等 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转…

C语言例:设 int x; 则表达式 (x=4*5,x*5),x+25 的值

代码如下&#xff1a; #include<stdio.h> int main(void) {int x,m;m ((x4*5,x*5),x25);printf("(x4*5,x*5),x25 %d\n",m);//x4*520//x*5100//x2545return 0; } 结果如下&#xff1a;

网络仿真3-NS2协议修改和移植

Ns2实现原理 OTcl与C关联 执行路径&#xff1a;Tcl->Otcl->C 返回路径&#xff1a;C->Otcl->Tcl NS2协议修改和移植 NS2中的各种网络协议在底层通过C实现&#xff0c;在网络仿真过程中最终通过调用底层C代码实现网络行为、算法、功能等各种仿真 NS2协议修改&…

牛客NC403 编辑距离为一【中等 模拟法 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/0b4b22ae020247ba8ac086674f1bd2bc 思路 注意&#xff1a;必须要新增一个&#xff0c;或者删除一个&#xff0c;或者替换一个&#xff0c;所以不能相等1.如果s和t相等&#xff0c;返回false,如果s和t长度差大于1…

【数据库系统】SQL和T-SQL

第四章 SQL 基本内容 系统结构、DDL、DML、视图、数据控制、嵌入式SQL SQL介绍 特点 一体化&#xff1b;面向集合操作&#xff1b;非过程化语言&#xff1b;可以单独写&#xff0c;也可以作为嵌入式语言&#xff08;JDBC&#xff09; 体系结构 数据库存储结构 逻辑存储结构 面…

在vscode中使用git-新手向

Git 应该是必学的版本同步工具&#xff0c;是代码管理的好帮手。 可是对新手来说上手还是有一丢丢门槛&#xff0c;结合 vscode 同步非常方便。 可实现可视化代码变化&#xff0c;提醒自己记录版本修改内容。非常好用。 在 VSCode 中将项目上传至 GitHub 私有仓库基本步骤 确保…

基于ssm电子竞技管理平台的设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本电子竞技管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

Prometheus(四):VMware Vsphere监控及数据展示

目录 1 vmware exporter安装配置1.1 vmware exporter介绍1.2 安装 - 使用kubernetes部署1、下载2、修改配置文件3、执行安装4、查看 1.3 安装-使用docker的方式1.4 Prometheus配置1.5 Grafana配置&#xff08;模板页面还需要修改&#xff09; 总结 1 vmware exporter安装配置 …

cloudflare 应用例子几则

Cloudflare&#xff08;以下简称 CF&#xff09; 堪称互联网活菩萨&#xff0c;造就一大批高质量的互联网基础技术服务&#xff0c;更难得的是&#xff0c;几乎所有的服务都有对应的免费的套餐&#xff0c;而且出手大方&#xff0c;基本上有足够的容量或请求次数。 CDN CF 最…

MySQL的基本操作

目录 引言 一、SQL语句简介 &#xff08;一&#xff09;SQL通用语法 &#xff08;二&#xff09;SQL分类 &#xff08;三&#xff09;数据类型 1.数值类型 2.字符串类型 3.日期/时间类型 4.修饰符 二、登录mysql服务 三、SQL语句操作 &#xff08;一&#xff09;DD…

深度学习500问——Chapter04:经典网络解读(1)

文章目录 4.1 LeNet-5 4.1.1 模型介绍 4.1.2 模型结构 4.1.3 模型特性 4.2 AlexNet 4.2.1 模型介绍 4.2.2 模型结构 4.2.3 模型特性 4.3 ZFNet 4.3.1 模型介绍 4.3.2 模型结构 4.3.3 模型特性 4.4 Network in Network 4.4.1 模型介绍 4.4.2 模型结构 4.4.3 模型特性 4.1 LeNet-…

java面试:常见的限流算法有哪些

1 什么是限流算法 限流算法是一种用于限制流量请求的频率或速率的算法&#xff0c;其目的是在高并发或大流量请求的情况下&#xff0c;保护系统服务的安全性和可用性。限流算法可以应对热点业务带来的突发请求、调用方bug导致的突发请求以及恶意攻击请求等情况。是一种系统保护…

金融知识分享系列之:出场信号RSI指标

金融知识分享系列之&#xff1a;出场信号RSI指标 一、出场信号RSI指标二、RSI指标原理三、 指标用法四、RSI指标总结 一、出场信号RSI指标 名称&#xff1a;相对强弱指标参数&#xff1a;(默认14)组成&#xff1a;RSI线以及30轴、50轴、70轴构成 0-30是极弱&#xff1a;0-30的…

jmeter接口自动化测试框架

接口测试可以分为两部分&#xff1a; 一是线上接口&#xff08;生产环境&#xff09;自动化测试&#xff0c;需要自动定时执行&#xff0c;每5分钟自动执行一次&#xff0c;相当于每5分钟就检查一遍线上的接口是否正常&#xff0c;有异常能够及时发现&#xff0c;不至于影响用…

服务器病毒木马通用排查处理应急响应流程

目录 一、勒索病毒发作的特征 二、勒索病毒的应急响应 三、勒索病毒预防与事后加固 一、勒索病毒发作的特征 如果发现大量统一后缀的文件&#xff1b;发现勒索信在Linux/home、/usr等目录&#xff0c;在Windows 桌面或者是被加密文件的文件夹下。如果存在以上特…

四十八岁男子心慌心悸,失眠,喉咙有异物,刘家峰告诉你怎么办!

植物神经功能紊乱&#xff0c;通常简称为植物神经紊乱&#xff0c;是一种涉及自主神经系统的失调疾病。自主神经系统负责控制人体内许多自动功能&#xff0c;如心率、血压、消化和体温调节。植物神经功能紊乱是指由于自主神经系统失衡导致的一系列症状和体征的综合症。 植物神经…

windows DCMTK编译使用(qt) 医学图像

由于项目需要生成DICOM格式的图片&#xff0c;需要使用到第三方开源库DCMTK&#xff0c;于是研究了一番&#xff0c;该库是C编写的&#xff0c;DICOM主要用于医疗体系中&#xff0c;除了可以保存图片信息外&#xff0c;还可以储存患者信息&#xff0c;病例信息&#xff0c;医疗…

【Emgu CV教程】10.2、轮廓之外接矩形、面积计算

文章目录 一、轮廓的外接矩形二、轮廓的面积三、两个函数的简单应用1.原始素材2.代码3.运行结果 一、轮廓的外接矩形 轮廓的外接矩形&#xff0c;函数是&#xff1a; public static Rectangle BoundingRectangle (IInputArray points // 输入的轮廓 )函数返回的是一个矩形&am…