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来缩小过滤的范围,只有条件都符合时才能定位到
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 只需要多个[] 连接 就可以