Xpath 和Css Selector使用

Xpath是xml的路径语言，就是通过元素的路径来查找标签元素。

Xpath直接在火狐浏览器的firebug中练习，49版本一下的火狐才能用firebug插件。

Xpath的使用方法

注：//*   代表页面下的所有元素      *代表所有的可以被其他的标签代替    @后面是属性定位

1、Xpath 支持ID/Class/Name 定位功能

通过ID定位

//*[@id='inner']     查找id =inner的标签

通过Class定位

//*[@class='class1']   查找class=class1的标签

通过Name定位

//*[@type='text']

2、如果标签没有id/class/Name 三种属性，Xpath孩子吃属性定位功能

//*[@value='用户名']     @后面可以跟任何属性

3、当标签属性重复时，Xpath提供了通过标签进行过滤

可以将*换成任意标签名，则可根据标签进行过滤

//input[@palceholder='用户名']

4、当标签页重复时，Xpath提供了层级过滤

跟dom一样找不到child就找兄弟，再不行找爸爸

//div/input[@placeholder='用户名']

当层级都重复时，可以单个层级结合属性定位

//form/div[@class='login-passwd']/input

5、一个元素他的兄弟元素跟他的标签一样，这时候无法通过层级直接定位，但是可以结合下标筛选；

不过Xpath是从1开始的

//form/div[@class='login-passwd']/input[1]

6、Xpath还提供了 and和or 逻辑元算定位

//通过and来缩小过滤的范围，只有条件都符合时才能定位到

//select[@name='city' and @size='4' and @multiple="multiple"]

 

or就相反了，只要这些筛选中，其中一个出现那么久匹配到了

//select[@name='city' or @size='4']

Css Selector使用方法

//xpath运行效率最慢，代码冗余最高的
//Cssselector  推荐(w3cshool   byid  byname全部转成css运行
//都是Css selector运行)

Css  Selector 定位实际就是HTML的Css选择器的标签定位

css Selector 在火狐浏览器，下载firefinder结合firebug使用

使用方法：

1、Css Selector 支持ID/Class定位与 html中css的定位方法一样

#id  代表id定位

.后面跟class名字带白哦class定位还提供了多个class同时定位

.c1.c2.c3

2、css Selector 支持标签和属叠加定位

input[value='用户名']

还可以标签叠加  id和class使用

input.c1    叠加class

input#i1   叠加id

3、Css  Selector支持杜仲属性组合

Css Selector 的多属性组合选择过滤 没有and 只需要多个[] 连接 就可以

select[name='city'][size='4'][multiple="multiple"]

 

4、支持层级定位

与Xpath的不同 Css Selector通过 > 来区分层级的界定

select>option[value='3']

 

5、支持模糊匹配

 

^= 匹配元素属性以什么开头

input[value^="登"]

$= 匹配属性以什么结尾

input[value$="录"]  

*= 匹配属性包含什么值 input

[value*="录"]