CSS选择器定位——自动化测试学习

1.CSS ID选择器查找元素

注意：

如果元素的ID不唯一，或者是动态的
或者name以及linktext属性值也不唯一
我们就需要考利用xpath来查找元素了，然后再对元素执行操作

不管用什么方式查找元素，id、Name、Xpath、css等等 都需要在页面上查找到唯一的元素。都应该只找到一个匹配的node 除非想要查找一批元素放集合里，然后来操作集合

语法：

tag[='value']
"#"  --->id
"."  --->class

实例：

a[id='js-signin-btn']
#js-signin-btn
//a是标签名，虽然是唯一的，但能做到id一个页面下不重复很少网页能做到，这样写，还能加速搜索时间
a#js-signin-btn  

2.CSS 类选择器查找元素

示例：

.icon-shopping-cart
span.icon-shopping-cart
span[class='icon-shopping-cart']

如果定位的元素不是唯一就会报错，或者会默认选择第一个

3.CSS多个类选择器查找元素

追加类：

.class.class2.class3---> 直到找到唯一的元素

4.CSS选择器-通配符查找元素

在CSS选择器中使用通配符：

"^" --->代表以什么文本开始
"$" --->代表以什么文本结尾
"*" --->代表包含什么文本

语法：

tag[attribute<specialcharacter>='value']

举例：

div[class='search-area'] --->1个匹配的节点
div[class^='search'] --->2个匹配的节点
div[class='search-warp'] ---没有匹配的节点
div[class$='area'] --->1个匹配的节点
div[class*='warp'] --->1个匹配的节点

5.CSS选择器-查找子节点

查找子节点

//子节点可以是标签的名字、ID、class
li>#js-signin-btn div>.search-input -> 1个匹配的节点
div>h1 div>label ->1个匹配的节点
ul>li>a.shop-cart-icon