转自公众号投稿：https://mp.weixin.qq.com/s/BOCFNRm2uicv5yjUkblKtA

在前端自动化中，元素定位少不了，尤其是使用JQuery方法的元素定位。本文主要讲述如何使用JQuery选择器进行元素定位。

图片

基本选择器简要介绍

JQuery选择器中使用最多的选择器，它由元素id、class、元素名、多个元素符组成。功能表如下表1所示：

图片

表1 JQuery基本选择器功能表

实践举例

以百度页面举例，说明基本选择器定位元素的方法。

图片

图1 百度首页

01

id定位方法

由图1可知，“百度一下“的前端代码为<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">，id=”su”。

使用id定位方法可以使用(“#id”))打印出了对应的”百度一下“按钮元素信息，使用id定位成功。

图片

图2 id定位“百度一下“按钮

小tips：如何判断元素定位是否正确？

可以使用浏览器面板的Console交互功能，使用console.log()功能打印使用选择器定位的元素。

02

element定位方法

“百度一下“按钮没有设定元素名name，无法使用element定位。

为了针对同一案例演示，使用编辑属性方法，临时为”百度一下“按钮元素添加了name=”baidu_btn”的属性。如下图3所示：

图片

图3

“百度一下“按钮元素临时添加name属性

然后，使用element定位方法，结果如下图4所示：

图片

图4

element方法定位“百度一下“按钮

03

class定位方法

“百度一下“按钮元素的class="btn self-btn bg s_btn"，使用class定位结果如下图5所示：

[图片上传失败...(image-a2c7e3-1625559013623)]

图5 class方法定位“百度一下“按钮

04

*定位方法

用于定位所有元素，并不适合某个具体元素定位。如使用定位，如下图6所示，会输出一个元素集合，很难快速定位到我们案例中的“百度一下“按钮。

图片

图6

*方法难以准确定位“百度一下“按钮

05

selector1、selector2、…、selectorN复合定位方法4中单独使用无法准确定位元素，现在使用和id复合方法定位“百度一下“按钮，成功定位到元素。结果如下图所示：

图片

图7 *和id符合方法定位“百度一下“按钮

图片

层次选择器简要介绍

通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。JQuery层次选择器功能表如下表2所示：

图片

表2 JQuery层次选择器功能表

实践案例

仍以百度首页举例，简要说明层次选择器的使用方法和定位结果。

图片

图8 百度首页

01

ancestor descendant定位方法

选取百度首页body元素的子元素，设置css样式为粉红色，JQuery命令为$("body div").css("backgroundColor","#FFB6C1")。结果如下图9所示。

图片

图9

使用ancestor descendant元素定位方法

设置百度首页背景为粉红色

02

parent>child定位方法

选取百度首页body元素的所有后代元素，设置css样式为粉红色，JQuery命令为$("body)div").css("backgroundColor","#FFB6C1")。结果如下图10所示。

图片

图10

使用parent>child元素定位方法

设置百度首页部分背景为粉红色

04

prev+next定位方法

以下图11为例，输出id= “s_btn_wr“的同辈元素，使用prev+next定位方法输出紧跟其后的元素，结果如图12所示。

图片

图11 id=”s_btn_wr”元素前端代码

图片

图12 prev+next方法定位结果

05

prev~siblings定位方法

以下图11为例，输出id= “s_btn_wr“的同辈元素，使用prev~siblings定位方法输出同辈元素，结果如图13所示。

图片

图13 prev~sibling方法定位结果

图片

属性选择器简要介绍

JQuery属性选择器是基于元素属性作为筛选条件的选择器JQuery属性选择器功能表如下表3所示：

图片

表3 JQuery属性选择器功能表

实践案例

同样以图1，定位“百度一下“按钮元素为例。

01

attribute定位元素

attribute选择器器和*以及类似，无法快速正确定位到某个元素，因为使用attribute定位不具有唯一性。在此暂不举例，后面再多属性选择器时联合使用举例。

02

attribute=value定位元素

“百度一下“按钮的前端代码为<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">，id=”su”。使用id=”su”属性定位，定位结果如下图14所示。

图片

图14

attribute=value方法定位结果

03

attribute!=value定位元素

使用id!=su定位所有id不等于su的元素，结果如下图15所示。

图片

图15

attribute!=value方法定位结果

04

attribute^=value定位元素

使用attribute^=value定位class="btn self-btn bg s_btn"属性的“百度一下“按钮元素。定位结果如下图16所示。

图片

图16

attribute^=value方法定位结果

05

attribute$=value定位元素

使用attribute$=value定位class="btn self-btn bg s_btn"属性的“百度一下“按钮元素。定位结果如下图17所示。

图片

图17

attribute$=value方法定位结果

06

attribute=value定位元素*

使用attribute*=value定位class="btn self-btn bg s_btn"属性的“百度一下“按钮元素。定位结果如下图17所示。

图片

图18

attribute*=value方法定位结果

07

[selector1][selector2][selectorN] 定位元素多属性联合定位元素，在本例中使用attribute和attribute*=value联合定位。元素定位结果如下图19所示。

图片

图19

[selector1][selector2][selectorN]方法

定位结果

图片

自动化实践

在前端自动化测试过程中，可以使用JQuery进行元素定位和操作。如robotframework中使用JQuery选择器模式定位元素。

本节以百度搜索输入框功能为例，模拟“在输入框中输入‘51testing’关键字并点击‘百度一下’按钮”。

结合robotframework提供了如下3种方法实现该样例。

• 使用js语句模拟百度搜索“51testing”；

• 使用rf+JQuery选择器定位元素方法模拟百度搜索“51testing”；

• 使用rf+自身选择器定位元素方法模拟百度搜索“51testing”。

3种方法的具体代码如下图20所示：

图片

图20

rf+JQuery定位元素自动化实践案例

图片

总结

本文主要介绍了JQuery定位元素的三种选择器使用方法，用于辅助元素定位。在判断元素定位是否正确的时候，可以使用浏览器开发者工具的Console面板进行在线定位，辅助分析。