selenium的js中的css_selector定位的语法

定位方式的优先级

• 优先级最高：ID
• 优先级其次：name
• 优先级再次：CSS selector
• 优先级再次：Xpath

 

针对css selector和xpath的优先级做一个简单的说明

在项目中我们可能用的最多的是css或者xpath，那么针对这两种，我们优先选择css，原因在哪些？

• 原因1：css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀
• 原因2：语言简洁，明了，相对xpath
• 原因3：前段开发主要是使用css，不使用xpath，所以在技术上面，我们可以获得帮助的机会非常多

 

定位元素的注意事项（划重点）

• 找到待定位元素的唯一属性
• 如果该元素没有唯一属性，则先找到能被唯一定位到的父元素/子元素/相邻元素，再使用“>”," ","+"等进行辅助定位。
• 不要使用随机唯一属性定位
• 最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生。

 

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

 

我们做 web 自动化测试，只需关注选择器部分，帮我们找到元素

 

id 选择器

id 选择器可以选中具有特定 id 的 HTML 元素

CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1{text-align:center; color:red; }

 

 

class 选择器

class 选择器可以选中具有特定 class 属性的 HTML 元素

在 CSS 中，class 选择器以 "."号来定义

在以下的例子中，所有拥有 class 属性为 center 的 HTML 元素均为居中

.center{text-align:center;}

 

标签选择器

标签选择器可以选中同类型的 html 标签元素

在以下的例子中，将所有的 p 标签设置为红色

p.{color:red;}

 

另外，你可以将标签选择器与属性选择器结合起来使用

以下，会将所有 class 属性为 re 的元素变成红色

p.re{color:red;}

 

 

分组选择器

分组选择器可以选中一组 HTML 元素

在 css 中，分组选择器以 “,” 来定义

以下实例，会将所有的  h1 标签、h2 标签、p 标签的内容变成红色

h1,h2,p{color:green; }

 

属性选择器

属性选择器选择具有特定属性的 HTML 元素

以下实例将所有包含 title 属性的元素变为蓝色

[title]{color:blue; }

你也可以为属性指定值

以下实例将所有 title 属性为 wa 的元素变为蓝色

[title=“wa”]

{color:blue; }

你也可以为元素指定标签

以下实例将所有title 属性为 wa 的 p 标签变为蓝色

 p[title=“wa”]

{color:blue; }

我们还支持匹配单词边界

以下实例将所有 title 属性包含单词 hello 的标签变为蓝色

 p[title~=“hello”]

{color:blue; }

 

组合选择符

在 CSS3 中包含了四种组合方式:

• 后代选择器(以空格分隔)
• 子元素选择器(以大于号分隔）
• 相邻兄弟选择器（以加号分隔）
• 后续兄弟选择器（以小波浪号分隔）

 

后代选择器

后代选择器用于选取某元素的后代元素，无论层级有多深

以下实例将 <div> 元素中所有的 p 元素背景修改为黄色:

divp{background-color:yellow; }

 

子元素选择器

与后代选择器相比，子元素选择器只能选择其父元素的直接子元素

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p{background-color:yellow; }

 

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p{background-color:yellow; }

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> : 

div~p{background-color:yellow; }

 

伪类

nth-child(n)   匹配属于其父元素的第 N 个子元素

nth-last-child(n)，如字面意思：倒数第几个标签

nth-of-type(n)，第 N 个指定类型的标签

first-child,第一个标签

last-child,最后一个标签