前言

  CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。在CSS语言中有CSS选择器，Selenium中也可以使用CSS选择器来定位元素，然后进行一系列自动化的操作指令。CSS定位比Xpath速度快，相对不耗资源，而且稳定。在自动化中是推荐使用的一种定位方式。

元素八大定位简介

  • By.id
    根据元素的id属性来定位元素
  • By.name
    根据元素的name属性来定位元素
  • By.tagName
    根据元素的标签名来定位元素
  • By.className
    根据元素的class属性来定位元素
  • By.linkText
    根据超链接的完整文本值来定位元素
  • By.partialLinkText
    根据超链接的部分文本值来定位元素
  • By.cssSelector
    根据css选择器方式来定位元素
  • By.xpath
    根据xpath方式来定位元素

CSS定位方法

1、根据tagName

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


2、根据Id

driver.findElement(By.cssSelector("#kw"));
driver.findElement(By.cssSelector("input#kw")); // 标签拼接#Id


3、根据className, .class的样式

driver.findElement(By.cssSelector(".soutu-btn"));
driver.findElement(By.cssSelector("span.soutu-btn")); // 标签拼接className


4、根据元素属性,属性名=属性值,id,class,等都可写成这种形式

单属性：

driver.findElement(By.cssSelector("[id='kw']"));
driver.findElement(By.cssSelector("input[id='kw']")); 
// 标签拼接属性名和属性值，By.cssSelector("标签名[属性名='属性值']");


多属性：

driver.findElement(By.cssSelector("[id='kw'][name='wd']"));
driver.findElement(By.cssSelector("input[id='kw'][name='wd']"));
// 标签拼接属性名和属性值，By.cssSelector("标签名[属性名1='属性值1'][属性名2='属性值2']");


模糊匹配：

// ^表示以xxx开头，此处表示匹配id为s开头的input标签
driver.findElement(By.cssSelector("input[id^='s']"));

// $表示以xxx结尾，此处表示匹配id为u结尾的input标签
driver.findElement(By.cssSelector("input[id$='u']"));

// *表示包含xxx字符，此处表示匹配id包含k的input标签
driver.findElement(By.cssSelector("input[id*='k']"));

// ~表示匹配其中xxx值，此处表示匹配class中有s_btn值的input标签
driver.findElement(By.cssSelector("input[class ~= 's_btn']"));


5、层级定位

1）parent > child模式

概述：在给定的父元素下匹配所有的子元素


form标签的子标签为span标签，span标签的子标签为input标签，写法：

driver.findElement(By.cssSelector("form > span  > input[id='kw']"));

driver.findElement(By.cssSelector("form > * > input[id='kw']")); // 中间可以用*匹配


2）ancestor descendant模式

概述：在给定的祖先元素下匹配所有的后代元素


以上模式可以写成如下格式，把>换成空格，写法：

driver.findElement(By.cssSelector("form span input[id='kw']"));

也可以跳过span标签，直接用form和input标签属性组合，中间的元素也可用*进行匹配，写法：

driver.findElement(By.cssSelector("form input[id='kw']"));
driver.findElement(By.cssSelector("form * input[id='kw']")); // 中间可以用*匹配


3）prev + next模式

概述：匹配所有紧接在 prev 元素后的 next 元素


定位span后面同级的input元素，写法：

driver.findElement(By.cssSelector("span + input[id='kw']"));


4）prev ~ siblings模式

概述：匹配 prev 元素之后的所有 siblings 元素(同辈分的)


定位span后面的所有同级的input元素，写法：

driver.findElement(By.cssSelector("span  ~ input"));

定位span后面指定同级的input元素，写法：

driver.findElement(By.cssSelector("span  ~ input[id='kw']"));


6、多元素选择器 selector1,selector2,selectorN模式

概述：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内


定位className为layui-tab-title,列表为li,className为layui-tab-content元素，中间用,分割，写法：

driver.findElements(By.cssSelector(".layui-tab-title,li,.layui-tab-content"));


7、子元素定位

被测元素：

<ul class="layui-tab-title">
    <li class="layui-this">演示说明</li>
    <li>日期</li>
    <li>分页</li>
    <li>上传</li>
    <li>滑块</li>
</ul>
<span class="bg s_btn_wr">
  	<input type="submit" id="su" value="百度一下" class="bg s_btn">
</span>


1）:first-child

概述：匹配第一个子元素，':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素


定位li文本为“演示说明”的li标签元素，写法：

driver.findElement(By.cssSelector("ul li:first-child"));


2）:nth-child

概述：匹配其父元素下的第N个子或奇偶元素


定位li文本为“分页”的li标签元素，在ul下为第三个li标签，index为3，写法：

driver.findElement(By.cssSelector("ul li:nth-child(3)"));


3）:last-child

概述：匹配最后一个子元素，':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素


定位li文本为“滑块”的li标签元素，即为最后一个元素，写法：

driver.findElement(By.cssSelector("ul li:last-child"));


4）:only-child

概述：如果某个元素是父元素中唯一的子元素，那将会被匹配


定位span中的input标签元素，也是span标签下的唯一子元素，写法：

driver.findElement(By.cssSelector("span input:only-child"));


8、表单对象属性定位

1）:enabled

概述：匹配所有可用元素


定位所有可用的input标签元素，写法：

driver.findElement(By.cssSelector("input:enabled"));


2）:disabled

概述：匹配所有不可用元素


定位所有不可用的input标签元素，写法：

driver.findElement(By.cssSelector("input:disabled"));


3）:checked

概述：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)


查找所有选中的复选框元素，写法：

driver.findElement(By.cssSelector("input:checked"));


4）:selected

概述：匹配所有选中的option元素


查找所有选中的选项元素，写法：

driver.findElement(By.cssSelector("input:selected"));


9、基本的筛选选择器

1）:not(selector)

概述：去除所有与给定选择器匹配的元素


查找所有未选中的 input 元素，写法：

driver.findElement(By.cssSelector("input:not(:checked)"));

查找所有无name属性的input元素，写法：

driver.findElement(By.cssSelector("input:not([name])")); // 此处为中括号[]