元素定位之CSS选择器
前言
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])")); // 此处为中括号[]
