rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据

上文有讲到rpa从安装到第一个小例子的运行,这篇文章我们讲解rpa的两种元素选择方式说明:界面选取和界面库选取。

首先,我们需要知道为什么需要选取元素,以及选取了元素之后有什么作用?

现在有一种这样的场景:我们需要知道小红书某个领域有哪些作者,我们就需要先打开小红书的官网,找到搜索框再输入关键字,比如:rpa。

这里就出现了两个元素,一个搜索框、一个是搜索按钮,我们分别把这两个元素定义为a、b,后续的流程为:打开小红书网站、在a中输入关键字、点击b。最后出现的结果又是一个新的元素,我们可以将之定义为c,接上流程就是获取c。

总结:

  • 界面选取:要获取元素时实时从界面上获取,讲究实时。
  • 界面库选取:将元素提前选择并入库,之后直接使用即可,讲究方便。

我们就以这样一个案例来讲解界面选取和界面库选取两种元素选择方式的区别。

大概的流程如下:打开小红书网址、找到输入框输入关键字、点击搜索按钮、点击搜索结果的用户分类,获取第一页所有用户并导出excel。

1、我们打开creator,新建一个新的流程:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第1张图片

2、新建一个打开浏览器和关闭浏览器的流程:

我们快速把开启和关闭浏览器的流程拉一下,记得把打开浏览器流程中的hWeb变量删除并在全局变量添加,在上文我们有说到,大致流程如下:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第2张图片

3、打开小红书网站:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第3张图片

在打开小红书这个流程中我们将打开网页这个命令拖到中间,并在加载链接输入:https://www.xiaohongshu.com

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第4张图片

我们尝试启动一下流程,效果如下:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第5张图片

4、OK,现在开始我们找到搜索框和搜索按钮:

我们新建一个流程,叫输入和搜索,我们在这个流程里在搜索框输入要搜索的内容和点击搜索按钮:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第6张图片

编辑这个流程,我们添加如下命令:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第7张图片

我们点一下未指定文字,并将鼠标移动到搜索框上,当输入框变成这样后,我们点击鼠标左键选中这个输入控件,这就是在界面的选取方式:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第8张图片

选取的完整录像看下面gif

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第9张图片

选完后我们在写入文本这里写入:【rpa】:

我们试试效果:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第10张图片

OK!按我们预期输入了文字,接下来就是点击搜索了。

我们选择这个快级元素:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第11张图片

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第12张图片

试试效果:
 

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第13张图片

效果还是不错的,我们继续后续流程。

5、点击用户tab:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第14张图片

搜索时,默认的tab时全部,我们需要点击用户tab,切换到用户tab,再获取第一页所有用户,我们再加一个流程:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第15张图片

编辑:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第16张图片

选择用户tab块级元素:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第17张图片

我们再跑一遍流程:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第18张图片

OK,实现了我们想要的效果,最后就是获取数据并写入excel了。

6、获取数据并写入excel:

我们再新建一个流程:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第19张图片

在编辑之前,我们分析一下小红书的作者页长什么样:

打开一个作者的个人信息页,我们发现,有这样一串字符串,这个就是这个用户的唯一用户id,所以我们只需要拿到列表中的每个作者的用户id即可。

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第20张图片

这里我们再分析下列表有没有这个id:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第21张图片

可以看到html中是有用户id的,这里我们用一个js来获取这个id,js代码如下:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第22张图片

执行结果:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第23张图片

以源代码模式编辑完整代码:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第24张图片

我们运行看一下效果:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第25张图片

最终出来的excel文件:

rpa:小红书为例讲解界面选取和界面库选取两种元素选择方式的区别执行js获取数据_第26张图片

本文到此结束,有问题大家可以私信或者评论。

你可能感兴趣的:(javascript,rpa,前端)