【官方】【新手必看】认识浏览器元素以及元素的定位方式

智友RPA-技术支持

一个HTML（网页）元素由标签、属性名、属性值三部分组成，如下图所示。

在智多星RPA设计器中，我们支持多种浏览器元素定位方式。

元素定位方式	举例	说明
按ID查找元素	searched_content	元素的id属性
按name查找元素	w	元素的name属性
按标签查找元素	input	元素的标签
按class查找元素	box	元素的class属性
按XPath查找元素	//input[@id=”searched_content”]    //input[@name=”w”]    //input[@class=”box”]    //input[@placeholder=”	满足XPath语法：    //标签名称[@属性名称="属性值"]
按querySelector查找元素	input#searched_content    input.box    input[name=”w”]    input[placeholder=”	满足querySelector语法：    l  标签名称#元素id值    l  标签名称.元素class    l  标签名称[属性名称="属性值"]

方式一：使用智多星RPA设计器直接定位元素

在元素操作上，找到“获取xpath”按钮

在弹出的“网页元素”窗口，点击“捕获元素“按钮，激活元素捕获。

将鼠标移动到要捕获的元素可以看到高亮的红框，此时按住ctrl键点击元素，即可完成元素捕获。

元素捕获成功后，在“网页元素”窗口可以看到捕获到的元素信息，点击完成即可。

返回设计器看到回填的“元素搜素参数”。

方式二：在HTML文档中找到要操作的元素，并获取浏览器元素的XPath、querySelector

使用Chrome/Edge/Firfox浏览器，打开YonBIP登录首页（https://yonbip.diwork.com），我们来看一下如何定位“邮箱/账号”输入框、“密码”输入框以及“登录”按钮。

Step1：打开浏览器的开发者工具

通常敲击键盘上的“F12”，即可打开开发者模式。有些电脑需要功能键（fn键）辅助，即同时按下“fn+F12”。

或者

Step2：选择页面元素，查看HTML元素。

点击“开发者调试”窗口左上脚的“选择”按钮；

然后，将鼠标移动到要定位的元素上并点击，例如“邮箱/账号”输入框；

在“开发者调试”窗口的“Elements”页签，看到高亮的区域，如下图红框所示；

这样，我们就找到了“邮箱/账号”输入框在HTML文档中的位置。

右键该高亮区域，

l  点击“copy”->“copy XPath”可以获取到元素的Xpath【//*[@id="username"]】

l  点击“copy”->“copy selector”可以获取到元素的querySelector【#username】

在RPA设计器中，使用获取到的XPath或者querySelector。

总结：

一般情况下，我们可以直接使用“方式一”自动捕获元素的定位方式，但某些场景下，当自动捕获无法满足的情况下，可以使用“方式二”作为补充，此时就需要我们对XPath和querySelector有一定的了解。