WEB UI自动化之CSS高级语法

一、元素定位方式优先级

推荐的元素定位优先级：

优先级最高：ID

优先级其次：name

优先级再次：css selector

优先级最次：xpath

link_text、class_name、tag_name基本不用

二、选择CSS的原因

1、CSS是配合HTML工作的，CSS的实现原理是匹配对象；xpath是配合xml工作的，xpath的实现原理是遍历

2、大部分人认为css的语法更加简洁明了

3、前端开发主要用的是CSS，不使用xpath

三、CSS构成

css由两部分构成：选择器，一条或多条声明

1、id选择器，选中具有特定id的HTML元素

id选择器以#来定义，如：#abc {color: #0044bb}

2、class选择器，选中具有特定class属性的HTML元素

class选择器以 . 来定义，如.ab1 {color: #cc0000}

3、标签选择器，选中特定类型的HTML元素

标签选择器，直接就是标签的名称，如：

p {

font-size:20px

}

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

分组选择器，以 , 来定义，如：a, span {background: #51a7e8}

5、属性选择器，选取具有特定属性的HTML元素

属性选择器，以 [] 来定义，如：[class="li"] {color: #cc0000}

我们也可以不为属性指定值：[title] {background: #4d4d4d}

也可以指定标签：a[title] {font-size:30px}，具有title属性的a标签

还支持匹配单词边界：a[title~="hello"] {background: #cc0000}

6、组合选择符

1. 后代选择器，以空格分隔

用于选取某元素的后代元素，无论层级有多深，例：#ab1 p {color:#cc0000}

     2.子元素选择器，以大于号分隔

与后代选择器相比，只能选中直接子元素，例：#ab1 > p {background:#51a718}

     3.相邻兄弟选择器，以加号分隔

可选择紧挨在另一元素后的一个元素，且两者拥有相同的父元素，例：#xyz + .hello {color:yellow}

     4.后续兄弟选择器，以小波浪线分隔

选取指定元素之后的所有弟弟元素，例：#xyzz ~ li {color:blue}

注意：

我们在做UI自动化时，经常会出现 NoSuChElementException，也就是找不到元素异常
这个报错的原因有四个：
1、表达式确实写错了或元素的确不存在
a：表达式所描述的元素的确是不存在的
b：循环元素列表的时候，列表里的每一个都找一遍，但是并不是列表里的每个元素都有，比如，列表里有十个P标签，但只有前五个拥有子元素a标签，所以你在循坏到第六个的时候，就会报错，找不到a标签
2、元素未加载，用显示等待或隐式等待（注意，xpath效率极慢，所需时间更久）
3、内嵌网页
4、多标签页
关于什么时候用什么等待
元素未加载而导致的问题，用显示等待或隐式等待
浏览器或电脑性能不高，反应不过来，用强制等待