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;结合内…

由vue2版本升级vue3版本遇到的问题

一、vuedraggable 由vue2版本升级vue3版本后,可能会遇到以下几种bug: 1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’):这个一般是因为插件使用语法有问题,vue3版本的插件使用时,v-for不能 自己手写,由插件提供的语法实…

与AI机器共存的三个层次

概述 当前我们无法不与AI机器共存。 或者说&#xff0c;在不远的近日&#xff0c;不能与AI机器和谐共处的人&#xff0c;就有可能会被淘汰。 新的生产革命&#xff0c;或许已经到来&#xff0c;只是我们身在此山中&#xff0c;当局者迷而已。 三个层次 API(Application Pr…

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…

AOP+MySQL实现一个简历的日志收集工具

一、自定义日志注解 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/*** Description 日志监控自定义注解*/ Target({ElementType.METHOD, ElementTyp…

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

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

AES对称和RSA非对称加密登录接口参数

使用RSA非对称加密AES对称加密 加密类型&#xff1a; RSA&#xff1a;是一种非对称加密算法。它使用一对密钥&#xff08;公钥和私钥&#xff09;&#xff0c;其中公钥可以公开给任何人&#xff0c;用于加密数据&#xff1b;而私钥需要保密&#xff0c;用于解密数据。AES&#…

小程序 转发 功能

mina/pages/food/info.wxml <import src"../../wxParse/wxParse.wxml" /> <view class"container"> <!--商品轮播图--> <view class"swiper-container"><swiper class"swiper_box" autoplay"{{autop…

在vscode中使用git-新手向

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

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

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

2024上半年软考报名时间及费用汇总!最新!

2024上半年软考考试时间为5月25-28日&#xff0c;2024年上半年软考全国报名平台入口3月18日开通&#xff0c;由此可知各地报名时间将会从3月份陆续开始。各地报名时间不同&#xff0c;且部分地区报名持续时间很短&#xff0c;请大家尽早报名&#xff0c;以免错过。 2024上半年…

java:基于BeanDeserializer实现自定义的Java bean 解析器

JsonDeserializer 关于jackson实现自定义的对象解析器&#xff0c;最常用的方式就是继承顶级抽象类(com.fasterxml.jackson.databind.JsonDeserializer) 来实现,比如下面的代码实现 // 自定义的JavaBean class Person {private String name;private int age;// 标准的getter和…

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安装配置 …

基于docker commit和Dockerfile为镜像添加ssh服务

系统管理员可以通过SSH服务来远程登录管理服务器 本文介绍基于docker commit和Dockerfile为镜像添加ssh服务 docker commit 该命令支持用户对容器自定义 1.获取镜像ubuntu&#xff1a;18.04&#xff0c;并创建一个容器 [rootnode2 db]docker pull ubuntu:18.04 [rootnode2 …

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…