Web自动化,如何使用选择器定位元素?

发表于:2021-7-02 09:32

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:刘晓佳Rachel    来源:51Testing软件测试网原创

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

  基本选择器
  简要介绍
  Jquery选择器中使用最多的选择器,它由元素id、class、元素名、多个元素符组成。功能表如下表1所示:
表1 Jquery基本选择器功能表

  实践举例
  以百度页面举例,说明基本选择器定位元素的方法。
图1 百度首页

  id定位方法
  由图1可知,“百度一下“的前端代码为<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">,id=”su”。
  使用id定位方法可以使用$(“#id”),如下图2所示,使用console.log($(“#id”))打印出了对应的”百度一下“按钮元素信息,使用id定位成功。
图2 id定位“百度一下“按钮

  小tips:如何判断元素定位是否正确?
  可以使用浏览器面板的Console交互功能,使用console.log()功能打印使用选择器定位的元素。

  element定位方法
  “百度一下“按钮没有设定元素名name,无法使用element定位。
  为了针对同一案例演示,使用编辑属性方法,临时为”百度一下“按钮元素添加了name=”baidu_btn”的属性。如下图3所示:
图3“百度一下“按钮元素临时添加name属性

  然后,使用element定位方法,结果如下图4所示:
图4element方法定位“百度一下“按钮

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

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

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

  层次选择器
  简要介绍
  通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。Jquery层次选择器功能表如下表2所示:
表2 Jquery层次选择器功能表

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

  ancestor descendant定位方法
  选取百度首页body元素的子元素,设置css样式为粉红色,Jquery命令为$("body div").css("backgroundColor","#FFB6C1")。结果如下图9所示。
图9使用ancestor descendant元素定位方法,设置百度首页背景为粉红色

  parent>child定位方法
  选取百度首页body元素的所有后代元素,设置css样式为粉红色,Jquery命令为$("body)div").css("backgroundColor","#FFB6C1")。结果如下图10所示。
图10 使用parent>child元素定位方法,设置百度首页部分背景为粉红色

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

图12 prev+next方法定位结果

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

  属性选择器
  简要介绍
  Jquery属性选择器是基于元素属性作为筛选条件的选择器Jquery属性选择器功能表如下表3所示:
表3 Jquery属性选择器功能表

  实践案例
  同样以图1,定位“百度一下“按钮元素为例。

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

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

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

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

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

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

  [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所示:
图20rf+jquery定位元素自动化实践案例

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

      版权声明:本文出自51Testing会员投稿,51Testing软件测试网及相关内容提供者拥有内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号