使用CSS选择器定位页面元素

  之前总结了使用ID，Name，Xpath等方式来定位页面元素，其实CSS选择器也是一个非常好用的定位元素的方法，甚至比Xpath强大。在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则：唯一定位，通常使用CSS选择器修改样式时会尽量多的选择元素，但是，在自动化里，必须要唯一定位到元素，否则自动化很可能因为找不到页面元素而失败。CSS选择器有很多，像标签选择器、类选择器、ID选择器、关系选择器、伪类选择器、分组选择器等等，但是只需要掌握常用的几种就可以满足定位元素的需求。

以下述HTML为例，总结下CSS选择器的用法：

<div id="menu" class="menu" title="menu">
<ul>
<li id="first" class="catagory book">
<a id="book"></a>
</li>
<li id="second" class="catagory food">
<a id="food"></a>
</li>
<li>
<a id="clothes"></a>
</li>
<li title="submenu">
<a id="furniture"></a>
</li>
</ul>
<a href="....">Welcome to Our Store</a>
</div>

1. 标签选择器

使用HTML标签来选择元素，例如： 

driver.findElement(By.cssSelector("li"));   //将选择所有li元素

driver.findElement(By.cssSelector("a")); //将选择所有a元素

2. 类选择器

使用类名来选择元素，使用方法：.class， 例如：

driver.findElement(By.cssSelector("div.menu")); //将选择class为menu的div元素driver.findElement(By.cssSelector(".catagory"));
//将选择id为first的元素和id为second的元素，因为这两个元素的class里都含有catagory

3. ID选择器

使用ID来选择元素，使用方法：#id，例如：

driver.findElement(By.cssSelector("a#clothes")); //将选择id为clothes的a元素

也可以写成：

driver.findElement(By.cssSelector("#clothes"));
//因为id是唯一的所以还是会选择id为clothes的a元素

3. 关系选择器

a.div,p 作用：选择所有div元素和p元素

b.div>p 作用：选择div的直接子元素中的所有p元素

c. div p   作用：选择div的后代元素中的所有p元素

4. 属性选择器

a. [title]   作用：选择所有具有title属性的元素

b.
[title='menu']   作用：选择所有title属性值等于'menu'的元素

c. [title~='menu']   作用：选择所有title属性值包含menu的元素，注意：menu必须是一个word，

且有空格与其他单词分开

d. [title*='menu']   作用：选择所有title属性值包含menu的元素，注意：此时menu为substring，而不是word

e. [title|='menu']   作用：选择所有title属性值以menu开头或者等于menu的元素

f. [title^='menu']   作用：选择所有title属性值以menu开头的元素

g. [title$='menu']   作用：选择所有title属性值以menu结尾的元素

h. div[title='menu']   作用： 选择所有title属性值等于menu的div元素

4. 通用选择器

方法：*

例如： div ul *; //选择div ul 下的所有子元素，包括li和a元素

5. 伪类选择器

伪类选择器很多，只总结下用过的:nth-child(n)

例如：p:nth-child(2) 作用：选择作为第二孩子的p元素