首页 > 其他分享 >使用rpa打开浏览器并执行js抓取页面元素详情步骤

使用rpa打开浏览器并执行js抓取页面元素详情步骤

时间:2024-01-24 13:22:48浏览次数:35  
标签:抓取 js rpa 获取 div 我们

这里我们专门开一个文章来写如何在rpa中执行js获取页面元素。

个人觉得,复杂点的需求用js会方便很多,所以后续的文章我都会重点使用js去获取页面元素。

好,正文开始,我们先看一下rpa为我们提供的自带的方便的抓取元素的方式,我们还是以小红书为例,还是以上一个例子为例,上个例子我们使用执行js的方式获取用户列表,这次我们新建一个流程:

 

使用自带的抓取方式作为对比,我们点击编辑->数据抓取:

 

点击选择目标:

 

这里局限性就来了,还选中了认证的图标,到时候我们看看输出的是什么。

 

提示我们需要再抓一下同样层级的元素:

 

我们选择第二个用户的名称:

 

然后就抓到数据了:

 

我们调试一下:

 

数据有了:

 

我们看看rpa的源码,可能不够直观吧,要是下次要改的话,都不知从何下手,还得重新选取。

 

所以这里如果你的需求只是简单获取列表数据,且并不会二次修改,那么就用自带的选取方式,但如果你需要更精准的数据获取方式,则推荐直接使用运行js的方式获取。

所以这里我们重点讲解下运行js的方式来精准的抓取数据。

在rpa中有提供一个执行js的方法:

 

 

可以设置是否同步执行以及js执行出错时是否还能往下执行等。

我们一般获取数据时都是使用同步js,使用默认配置即可,我们还是用小红书举例,我们这次获取小红书作者信息:

 

我们这里来获取这个小红书作者的昵称、小红书号、关注数、粉丝数、获赞数这五个数据。

我们先在浏览器中写js代码尝试获取,没问题再复制到rpa中。

我们按下f12,切换到console,并清空控制台:

 

用浏览器自带的工具确定下要抓取的元素:

 

为class为info-part的div,第一步先拿到整体块的元素:

 

我们再精细化到下一级元素:

 

再确定一下需要抓取的元素在那个div下:

 

我们先从昵称和小红书号开始:

昵称的div是:

 

js:

 

拿到了昵称,再是小红书号:

 

注意标签是span了,replace函数将【小红书:】删除,只保留账号。

接下来是关注数和粉丝数以及点赞数,我就一起获取了,先看看结构:

 

可以看到三个值所在的大的div叫user-interactions,该div下还有三个小div,就是存放三个数值的地方了:

 

我们直接用下标的方式取:

 

最后我们用一个函数返回这些五个字段:

 

结果:

 

这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。

想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。

感谢你的阅读与支持,期待在未来的文章中与你再次相遇!

标签:抓取,js,rpa,获取,div,我们
From: https://www.cnblogs.com/shuinanxun/p/17984470

相关文章

  • vue print.js 批量打印功能
    批量打印 :1.用到print.js  自行安装  安装完成后 引用  importprintJSfrom'print-js';2.用到深拷贝深拷贝代码:(可以将此代码放在一个页面中,对此进行引用即可,例如:放在until文件中,引用代码 import{deepClone}from'@/utils/index')exportfunctiondeepClone......
  • 【转载】L2Dwidget.js网页二次元看板娘的用法
    最近新建了博客,https://yellowgg.cn,许久不更新的博客园想引个流,可以关注一波嗷。发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫,除了萌,还可以监听鼠标的行为,产生互动的现象。1.关于脚本的生成L2Dwidget.min.js的源码:https://github.com/xiazeyu/live2d-wid......
  • js如何在一个数组内找到特定值,再在这个特定值前后截取十个数得到新数组
     //剪切原原始曲线getSplitTend(){consttimeCompare=[]this.trendOption.series[0].data.forEach(item=>{timeCompare.push(item[0])})//console.log('timeCompare',timeCompare)constindex=timeCompare......
  • nodejs多版本管理
    github下载包               https://sites.ipaddress.com/raw.githubusercontent.com/     https://sites.ipaddress.com/github.com/            1.下载安装包到本地wgethttps://github.com/nvm-sh/nvm/ar......
  • # yyds干货盘点 # 解析json数据,指定列去解析报错如何破?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【哎呦喂 是豆子~】问了一个Python解析的问题。问题如下:大佬们请问下这个是啥情况呀 解析json数据 指定列去解析报错JSONDecodeError:Expecting','delimiter:line1column73(char72)数据不多我就一个个去试指......
  • jsjiami.v7介绍
    jsjiami.v7介绍jsjiami.v7是一款在线的JavaScript加密工具,它可以对JavaScript代码进行混淆、压缩、加密等操作,提高代码的安全性和运行效率。jsjiami.v7是jsjiami.v6的升级版,它在2023年1月17日发布,支持新版ES语法,破解难度相对于之前的版本高得多[1][1]。jsjiami.v7的优势jsjiami.v7......
  • 前端歌谣-第陆拾陆课-html+css+js实现计算器效果
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解计算器的讲解index.css/*Basicreset*/*{ margin:0; padding:0; box-sizing:border-box; /*Bettertextstyling*/ font:bold14pxArial,sans-serif;}/*FinallyaddingsomeIE9......
  • 二、nextjs API路由如何做好JWT登录鉴权、身份鉴权,joi字段校验,全局处理异常等(c-shoppi
    介绍在这篇文章中,我们将学习如何在C-Shopping电商开源项目中,基于Next.js14,处理所有API路由中添加身份验证和错误处理中间件的思路与实现。这篇文章中的代码片段取自我最近开源项目C-Shopping,完整的项目和文档可在https://github.com/huanghanzhilian/c-shopping地址查看。Next......
  • 这一次,弄明白JS中的文件相关(二):HTTP请求头和响应头
    (一)前置知识开始前,我们先来复习一下HTTP的基础知识。HTTP请求分为:请求行、请求头、空行、请求体(也叫正文、请求实体、请求主体)。HTTP响应分为:状态行(也叫响应行)、响应头、空行、响应体(也叫正文、响应实体、响应主体)。在HTTP请求中,最常见的GET请求是没有请求体的(GET的查询字符串......
  • 如何进行H.265视频播放器EasyPlayer.js的中性化设置?
    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC、fmp4等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直播等功能......