xpath对比css定位

xpath对⽐css定位## 元素找不到可能的原因(实战技巧)
- 元素定位的表达式不对。

- 没有等待，或者是等待时间太少
- 你根本不在这个页⾯。

（另外⼀个窗⼝，在⼀个iframe当中。

）
## 元素定位不要⽤动态⽣成值
如果属性存在以下特征，最好不要⽤该值作为元素定位的依据：
- 属性值有数字 12
- 不认识的莫名其妙的字符串，（加密），也有可能动态⽣成
- class ⾥⾯ active hidden
## xpath
1、为什么要⽤它
2、实战当中采取什么样的策略去编写 xpath 表达式
3、xpath 基础语法
- 绝对路径，相对路径
- 标签
- 属性
- text ⽂本
- 函数
- 索引
- 元素之间的关系
- ⽗⼦
- 祖先和⼦孙后代
- 同辈
- 轴运算
## 1、为什么要⽤它
- 没有 id, name 属性
- 通过 class ， tagname 找到的不是唯⼀的
- link text 只能去定位 a
xpath 为什么功能强：
可以组合多个条件，标签名，属性，text, 元素之间的关系
### 绝对路径和相对路径
// 相对路径
/ 绝对路径（不⽤）
## 相对路径
//*[@id="kw"]
* 是表⽰任意的标签名称 //input[@id="kw"]
完整xpath的基本语法:
```
//标签名[@属性名="属性值"]
```
xpath 验证：
在源码页⾯按 ctrl + f 会出现 xpath 输⼊框
后⾯能看到你的表达式具体能够得到多少个元素。

## 实战当中采取什么样的策略去编写 xpath 表达式
- 1、通过浏览器的右击，复制xpath 表达式
- 2、第三⽅⼯具chropath
## xpath 详细语法
//input[@id="kw"]
⽂本： //a[text()='抢投标'] ==>
套路包含某个⽂本 contains //a[contains(text(), '强投标')]
//a[contains(@id, 'kw')]
属性或text组合 //a[text()='抢投标' and @id="kw" and @name='wd']
xpath 索引是从1开头： (//input[@id and @name])[1]
通过祖先找⼦孙： //form[@id='form']//input[@name='wd']
通过⽗亲找⼉⼦： //form[@id='form']/input[@name='wd']
通过⼉⼦找⽗亲： //sub/..
通过⼉⼦找祖⽗： //sub/../..
轴运算：
找找哥哥姐姐： //input[@name='wd']/preceding-sibling::span 找找弟弟妹妹： //input[@name='wd']/following-sibling::span 找祖先： //input[@name='wd']/ancestor::span
- 绝对路径，相对路径
- 标签
- 属性
- text ⽂本
- 函数
- 索引
- 元素之间的关系
- ⽗⼦
- 祖先和⼦孙后代
- 同辈
- 轴运算
## 总结xpath
1、浏览器右击复制、chropath 第三⽅库
2、检查xpath好的xpath: 层级⽐较少 1-2
3、 xpath 找到元素验证：ctrl + f
4、 //input[@id='kw'] 基本
5、 //input[@id='kw' and @name='wd'] and
6、 //input[@id='kw' and text()='wd'] text
7、 //input[contains(text(), '')] contains
8、 (//*[contains(text(), '')])[1] 索引
9、 //form//input[] 通过祖先找⼦孙
## 找元素常见错误
mon.exceptions.NoSuchElementException
## css 选择器
css : html + css + JavaScript(js)
css 选择器
css 选择器的基本语法
id:
- xpath: //input[@id='kw']
- css: input#kw 或者 #kw 在css⾥⽤#表⽰id
class:
- xpath: //input[@class='s_ipt']
- css: input.s_ipt 或者 .s_ipt 在css⾥⽤.表⽰class
属性:
- xpath: //input[@name='wd']
- css: input[name=wd]
详细的在下⾯的⽹址
https:///cssref/css-selectors.html
## xpath vs css（⾯试题）
- css 整体上来说⽐ xpath 表⽰是更简洁的
- css 查找速度⽐ xpath 更快，
- xpath 的功能⽐ css 更强
- 对于复杂元素xpath返回会更简洁
- css ⽬前不⽀持通过⽂本， xpath 可以。