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[]  通过祖先找子孙


## 找元素常见错误
selenium.common.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://www.runoob.com/cssref/css-selectors.html


## xpath vs css（面试题）
- css 整体上来说比 xpath 表示是更简洁的
- css 查找速度比 xpath 更快，
- xpath 的功能比 css 更强
- 对于复杂元素xpath返回会更简洁
- css 目前不支持通过文本， xpath 可以