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定位常用策略
- id选择器，通过id属性定位
- class选择器，通过class属性定位
- 元素选择器，通过元素定位
- 属性选择器，通过属性定位
- 层级选择器，用空格或者大于号表示层级关系
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
例子：
|-------------------------------------------------------------|------------------------------|
| 路径表达式 | 结果 |
| //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的元素
定位原则
以百度首页为例
bash
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'] |