首页 > 其他分享> > 元素定位之CSS选择器

元素定位之CSS选择器

2022-04-09 11:03:06 作者：互联网

前言

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