selenium的css选择器和xpath选择器

css定位元素

1.什么是css？

CSS(Cascading Style Sheets)层叠样式表，是一种语言，用来描述html或者xml的显示样式。在css语言中有css选择器，在selenium中同样适用。

提示：在selenium中相比较xpath，更推荐使用css选择器，因为css速度更快

2.css定位方法

driver.find_element_by_css_selector()

3.css定位常用策略

1. id选择器，通过id属性定位
2. class选择器，通过class属性定位
3. 元素选择器，通过元素定位
4. 属性选择器，通过属性定位
5. 层级选择器，用空格或者大于号表示层级关系

3.1 id选择器

以百度首页为例，通过id选择就只需要：#su

driver.find_element_by_css_selector(‘#su’)

#表示后面跟的是id的属性值，’#su’意思是id属性为’su’的元素

3.2 class选择器

上面的例子可以找到“百度一下”这个按钮，如果想通过class属性找的话，就：.bg s_btn

‘.’这个点表示后面跟的是class属性的值，driver.find_element_by_css_selector(‘.bg s_btn’)就是通过class属性查找属性值为’bg s_btn’的元素

3.3元素选择器

input就是查找所有input元素

driver.find_element_by_css_selector(‘input’)

3.4 属性选择器

[id = ‘su’]查找id属性为‘su’的元素，等同于#su

driver.find_element_by_css_selector(‘[name='ie']’)

3.5 层级选择器

根据元素的父子关系来选择，格式为 element > element 大于号可以用空格代替

driver.find_element_by_css_selector(‘div > [name='ie']’)这个就是查找div下的name属性为ie的元素

注意：直接子节点才可以用>

3.6 css延伸

input[type^=’P’]  找一个input元素，type属性的值以P开头

input[type$=’d’]  找一个input元素，type属性的值以d结尾

input[type*=’w’]  找一个input元素，type属性的值包含w

xpath路径选择器定位元素

xpath简介

使用路径表达式来定位xml或者html中文档中选取节点。在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）

假设xml文档为：

<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book>
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author> 
  <year>2005</year>
  <price>29.99</price>
</book>

</bookstore>

• 文档节点：<bookstore>
• 元素节点：<author>J K. Rowling</author>
• 属性节点：lang="en"
• 文本：2005
• 父节点（Parent）：每个元素以及属性都有一个父。book 元素是 title、author、year 以及 price 元素的父
• 子节点（Children）：节点可有零个、一个或多个子节点。title、author、year 以及 price 元素都是 book 元素的子
• 同胞（Sibling）：拥有相同的父的节点。title、author、year 以及 price 元素都是同胞
• 先辈（Ancestor）：某节点的父、父的父，等等。title 元素的先辈是 book 元素和 bookstore 元素
• 后代（Descendant）：某个节点的子，子的子，等等。bookstore 的后代是 book、title、author、year 以及 price 元素

基础语法

路径表达式

谓语（Predicates）

放在方括号[]中，相当于筛选条件，用来查找[]中指定的特定节点或者包含某个指定的值的节点。在下面的表格中，列出了带有谓语的一些路径表达式，以及表达式的结果：

XPath 通配符可用来选取未知的 XML 元素。

在下面的表格中，列出了一些路径表达式，以及这些表达式的结果：

xpath轴

亲属关系匹配

例如有一段html的内容如下

<div>

<span>text</span>

<input id = ‘123’>

</div>

此时如果想要获取第二个span标签，可以这样写：

//input[@id='123']/preceding-sibling::span

input标签比较好找，先找到input标签，然后找它的兄弟节点。preceding-sibling表示找前面的元素的同级元素，后面的::span表示找的是span标签。

Xpath运算符

1. 在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：

   路径表达式	结果
   //book/title | //book/price	选取 book 元素的所有 title 和 price 元素。
   //title | //price	选取文档中的所有 title 和 price 元素。
   /bookstore/book/title | //price	选取属于 bookstore 元素的 book 元素的所有 title 元素，以及文档中所有的 price 元素。

   实例	返回值
   last()	返回当前上下文中的最后一个节点的位置号码数
   position()	返回当前节点的位置的数字，位于第多少个

   //book[position()=2]等价于//book[2]

   

   例子：

   路径表达式	结果
   //div[last()]	最后一个div
   //div[last()-1]	倒数第二个div
   //div[position()<3]	前两个div
   //div[@id='id3']//p[last()]	第三个div中最后一个p标签对象
   //div[@href='http://www.baidu.com']	选取连接为http://www.baidu.com的属性
   //*[@id='id3']//p[contain(.,'20')]	在第3个div中找包含20的文本节点
   //*[@id='id3']//p[contain(.,'20')]//fowing-sibiling::p	选取包含字符串20文本节点的下一个节点的p节点

   补充几个常用方法

    contains

   包含，比如//div[contains(@class,'xx')]

   查找div元素，元素的class属性值包含xx

    starts-with

   以某某开头，例如

   //input[starts-with(@class,'xx')]

   查找input元素，元素的class属性值以xx开头

    ends-with

   以某某结尾，例如：

   //input[ends-with(@class,'xx')]

   查找input元素，元素的class属性值以xx结尾

    not

   否定的意思，比如：

   input[not（id='123'）]

   查找id值不是123的input元素。

   //span[not(contains(text(),'123'))]

   查找一个文本内容不包含123的span标签。

    *通配符

   *表示通配符，比如：//span[@*='123']

   span标签的任何属性为123的元素

    定位原则

   以百度首页为例

   1)	用id定位，比如//input[@id="su"]
   2)	用元素文本 比如//input[@value="百度一下"]
   3)	用元素的唯一属性,找到这个元素的唯一属性，写法同上
   4)	用元素的多个属性组合，比如//*[@id="kw" and @name ="wd"]
   5)	contains模糊匹配，比如//div[@id="u"]/a[contains(.,"录")]。或者可以写//div[@id="u"]/a[contains(@href,"passport")]
   6)	找到已查找的元素，然后基于此元素的相对位置定位，比如先找到一个div，再通过找到的这个div找他的父亲或者兄弟，子女。//div[@id="u"]/child::node()，先找到一个id属性为u的div，再找到这个div的所有孩子节点，后面跟[1]，就是这些孩子节点的第一个节点。
   

   css元素定位和xpath元素定位的对比

   定位方式	xpath	css
   元素名	//input	input
   id	//input[@id=’su’]	#su
   class	//input[@class=’su’]	.su
   属性	//*[starts_with(@属性名,’XXX’)] //*[contains(@属性名,’XXX’)] //*[text()=””]	input[type$=’XXX’] input[type*=’XXX’] input[type^=’XXX’]