标签：定位 标签 元素 driver cssSelector findElement input 选择器 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定位方法
- 根据tagName
driver.findElement(By.cssSelector("input"));
- 根据Id
driver.findElement(By.cssSelector("#kw"));
driver.findElement(By.cssSelector("input#kw")); // 标签拼接#Id
- 根据className, .class的样式
driver.findElement(By.cssSelector(".soutu-btn"));
driver.findElement(By.cssSelector("span.soutu-btn")); // 标签拼接className
- 根据元素属性,属性名=属性值,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']"));
- 层级定位
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']"));
-
多元素选择器 selector1,selector2,selectorN模式
概述：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
定位className为layui-tab-title,列表为li,className为layui-tab-content元素，中间用,分割，写法：
driver.findElement(By.cssSelector(".layui-tab-title,li,.layui-tab-content"));
-
子元素定位
被测元素：
<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"));
-
表单对象属性定位
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"));
-
基本的筛选选择器
1）:not(selector)
概述：去除所有与给定选择器匹配的元素
查找所有未选中的 input 元素，写法：
driver.findElement(By.cssSelector("input:not(:checked)"));查找所有无name属性的input元素，写法：
driver.findElement(By.cssSelector("input:not([name])")); // 此处为中括号[]
标签：定位,标签,元素,driver,cssSelector,findElement,input,选择器,CSS 来源： https://www.cnblogs.com/91boge/p/16119699.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。