这里我们专门开一个文章来写如何在rpa中执行js获取页面元素。
个人觉得,复杂点的需求用js会方便很多,所以后续的文章我都会重点使用js去获取页面元素。
好,正文开始,我们先看一下rpa为我们提供的自带的方便的抓取元素的方式,我们还是以小红书为例,还是以上一个例子为例,上个例子我们使用执行js的方式获取用户列表,这次我们新建一个流程:
![](https://file.jishuzhan.net/article/1750084512362008578/0791d51f293cd050ca2a68a5ea545db3.webp)
使用自带的抓取方式作为对比,我们点击编辑->数据抓取:
![](https://file.jishuzhan.net/article/1750084512362008578/6c4a3241982d8887c9dcc12e93cfdacc.webp)
点击选择目标:
![](https://file.jishuzhan.net/article/1750084512362008578/ab74dd34ec48a47ba95b98f537df0f9e.webp)
这里局限性就来了,还选中了认证的图标,到时候我们看看输出的是什么。
![](https://file.jishuzhan.net/article/1750084512362008578/138a2eeb5f8cc36ea0686791863efc21.webp)
提示我们需要再抓一下同样层级的元素:
![](https://file.jishuzhan.net/article/1750084512362008578/8358f8f05aa78ca88683239133b93a5d.webp)
我们选择第二个用户的名称:
![](https://file.jishuzhan.net/article/1750084512362008578/0116995083cfaa3c4902211093c1a8c5.webp)
然后就抓到数据了:
![](https://file.jishuzhan.net/article/1750084512362008578/e7d953817c7f10aad1191d3b538dd4a2.webp)
我们调试一下:
![](https://file.jishuzhan.net/article/1750084512362008578/0e815224d2e142d9c757a215780ebed1.webp)
数据有了:
![](https://file.jishuzhan.net/article/1750084512362008578/06b219e71f90331804f4d7b0b1c2aa6d.webp)
我们看看rpa的源码,可能不够直观吧,要是下次要改的话,都不知从何下手,还得重新选取。
![](https://file.jishuzhan.net/article/1750084512362008578/17faa5db231550de652fda25d2b012ce.webp)
所以这里如果你的需求只是简单获取列表数据,且并不会二次修改,那么就用自带的选取方式,但如果你需要更精准的数据获取方式,则推荐直接使用运行js的方式获取。
所以这里我们重点讲解下运行js的方式来精准的抓取数据。
在rpa中有提供一个执行js的方法:
![](https://file.jishuzhan.net/article/1750084512362008578/3509573c9b3e948a2891af8a1fc13f6b.webp)
![](https://file.jishuzhan.net/article/1750084512362008578/75bb92f6080d1f24180875534ad7723a.webp)
可以设置是否同步执行以及js执行出错时是否还能往下执行等。
我们一般获取数据时都是使用同步js,使用默认配置即可,我们还是用小红书举例,我们这次获取小红书作者信息:
![](https://file.jishuzhan.net/article/1750084512362008578/28859a54bb9dc36db786d0cf0cd39f34.webp)
我们这里来获取这个小红书作者的昵称、小红书号、关注数、粉丝数、获赞数这五个数据。
我们先在浏览器中写js代码尝试获取,没问题再复制到rpa中。
我们按下f12,切换到console,并清空控制台:
![](https://file.jishuzhan.net/article/1750084512362008578/7e1da23e4ef056f1a1a0fe5bbf94f1e9.webp)
用浏览器自带的工具确定下要抓取的元素:
![](https://file.jishuzhan.net/article/1750084512362008578/8da2b5706f4b4941c96d19caff0e1847.webp)
为class为info-part的div,第一步先拿到整体块的元素:
![](https://file.jishuzhan.net/article/1750084512362008578/96693fabc88ef19efa964e9e704db3e8.webp)
我们再精细化到下一级元素:
![](https://file.jishuzhan.net/article/1750084512362008578/d5682ff7a270d75a652af2bfe9b024e8.webp)
再确定一下需要抓取的元素在那个div下:
![](https://file.jishuzhan.net/article/1750084512362008578/6e48c1d094ca809f5299e4c8bf0ea101.webp)
我们先从昵称和小红书号开始:
昵称的div是:
![](https://file.jishuzhan.net/article/1750084512362008578/c4eea5f4faad5007e2596ea41268365f.webp)
js:
![](https://file.jishuzhan.net/article/1750084512362008578/6829e76945ed2a4257389ebbcce863d0.webp)
拿到了昵称,再是小红书号:
![](https://file.jishuzhan.net/article/1750084512362008578/d97c86a6236e6859b310ea7a996f1b48.webp)
注意标签是span了,replace函数将【小红书:】删除,只保留账号。
接下来是关注数和粉丝数以及点赞数,我就一起获取了,先看看结构:
![](https://file.jishuzhan.net/article/1750084512362008578/66aae1baa34f00ad588e05542aeb8fc5.webp)
可以看到三个值所在的大的div叫user-interactions,该div下还有三个小div,就是存放三个数值的地方了:
![](https://file.jishuzhan.net/article/1750084512362008578/96a154a9b6c924bf5d367d352363a218.webp)
我们直接用下标的方式取:
![](https://file.jishuzhan.net/article/1750084512362008578/79f7123e01710fd9ce48a8dff6aa2415.webp)
最后我们用一个函数返回这些五个字段:
![](https://file.jishuzhan.net/article/1750084512362008578/fd105f680a3f8ad04f2341bb561251d0.webp)
结果:
![](https://file.jishuzhan.net/article/1750084512362008578/aa71a8af5029e742afb1176542589d36.webp)
这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。
想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。
感谢你的阅读与支持,期待在未来的文章中与你再次相遇!