多测师是一家拥有先进的教学理念,强大的师资团队,业内好评甚多的接口自动化测试培训机构!

17727591462

联系电话

您现在所在位置:接口自动化测试培训 > 新闻资讯

CssSelector之selenium元素定位-自动化测试

更新时间:2022-03-28 09:38:05 作者:多测师 浏览:107

  CssSelector是我最喜欢的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))他比xpath更高效更准确更易编写,美中不足是根据页面文字时略有缺陷没有xpath直接。

CssSelector之selenium元素定位-自动化测试

  因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。

  CssSelector常用定位

  1.根据tagName

  driver.findElement(By.cssSelector("input")

  2.根据ID

  driver.findElement(By.cssSelector("input#username"));html标签和#id

  driver.findElement(By.cssSelector("#username"));只是#id

  3.根据className

  单一class:driver.findElement(By.cssSelector(".username"));.class

  复合class:driver.findElement(By.cssSelector(".username.**.***"));.classA.classB

  4.根据元素属性

  1)精准匹配:

  [A]  driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式

  [B]  driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性

  [C]  driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性

  2)模糊匹配:(正则表达式匹配属性)

  [A]  ^=  driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部 如ctrl_12

  [B]  $=  driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl

  [C]  *=  driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12

  更多正则匹配原则请查看CSS3 选择器——属性选择器  http://www.w3cplus.com/css3/attribute-selectors

  5.查询子元素

  1 <form id="form" class="fm" name="f">

  2   <span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">

  3     <input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">

  4   </span>

  5   <span id="s_btn_wr" class="btn_wr s_btn_wr bg">

  6     <input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">

  7   </span>

  8 </form>

  以上代码是百度首页搜索输入框和按钮的html,下面讲解以此为例

  1)子元素   A>B

  WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索输入框

  2)后代元素   A空格B

  WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索输入框

  3)第一个后代元素  :first-child

  WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

  可定位到三个元素:<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

  WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格,定位到form下所有级别的第一个input元素

  可定位到两个元素:<input id="kw"..../> <input id="su"........./>

  WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格,定位到form直接子元素中的第一个span元素

  可定位到一个元素:<span id="s_kw_wrap".../>

  4)最后一个子元素   :last-child  [类同:first-child]

  WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

  5)第2个子元素    :nth-child(N)  [类同:first-child]

  WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格,定位到form下所有级别的第二个子元素

  6.查询兄弟元素

  driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b

  深入学习cssselector可访问以下地址:

  http://www.w3.org/TR/css3-selectors/

  CSS3 选择器——基本选择器  http://www.w3cplus.com/css3/basic-selectors

  CSS3 选择器——属性选择器  http://www.w3cplus.com/css3/attribute-selectors

  CSS3 选择器——伪类选择器  http://www.w3cplus.com/css3/pseudo-class-selector

  常用方法:

  #input 选择id为input的节点

  .Volvo 选择class为Volvo的节点

  div#radio>input 选择id为radio的div下的所有的input节点

  div#radio input 选择id为radio的div下的所有的子孙后代input节点

  div#radio>input:nth-of-type(4) 选择id为radio的div下的第4个input节点

  div#radio>nth-child(1) 选择id为radio的div下的第1个子节点

  div#radio>input:nth-of-type(4)+label 选择id为radio的div下的第4个input节点之后挨着的label节点

  div#radio>input:nth-of-type(4)~labe 选择id为radio的div下的第4个input节点之后的所有label节点

  input.Vovlo[name='identity'] 选择class为.Volvo并且name为identity的input节点

  input[name='identity'][type='radio']:nth-of-type(1) 选择name为identity且type为radio的第1个input节点

  input[name^='ident'] 选择以ident开头的name属性的所有input节点

  input[name$='entity'] 选择以'entity'结尾的name属性的所有input节点

  input[name*='enti'] 选择包含'enti'的name属性的所有input节点

  div#radio>*.not(input) 选择id为radio的div的子节点中不为input的所有子节点

  input:not([type='radio']) 选择input节点中type不为radio的所有节点

  以上内容为大家介绍了自动化测试中的CssSelector之selenium元素定位,本文由多测师亲自撰写,希望对大家有所帮助。了解更多自动化测试相关知识:https://www.aichudan.com/xwzx/

联系电话

17727591462

返回顶部