selenium中Xpath和CSS Selector的使用方法

一、selenium中Xpath的使用方法

1. 什么是xpath?

  Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素

2. 练习Xpath的工具

  火狐浏览器,下载插件FireBug和FirePath

3. Xpath使用方法

  注:默认死格式,先写//*代表定位页面下的所有元素  

  (1)Xpath支持ID、class和name定位功能

    通过id定位: //*[@id='i1']

    通过class定位://*[@class='classname']

    通过name定位: //*[@name='name']

  (2)如果便签没有id,class和name三个综述性,Xpath还支持属性定位功能

    @代表以属性定位,后面看而已接标签中的任意属性,比如:

    //*[@placeholder='请通过XPATH定位元素']

  (3)当标签的属性重复时,Xpath提供了通过标签来进行过滤,//input显示所有的input标签

    //input[@placeholder='请通过XPATH定位元素']

  (4)当标签页重复时,Xpath提供了层级过滤

    例如:找不到儿子,那么久先找他的父级,实在不行可以找他的祖父级

    //div/div[@id='dis']

  (5)当层级都重复时,可以通过单个层级的属性进行定位

    //div/div[@id='w']/div

  (6)一个元素它的兄弟元素跟它的标签一样,这时候无法通过层级定位,因为都是一个父亲生的,多胞胎儿子,Xpath提供了索引过滤,索引从1开始,而非0

    //select[2]

  (7)上面几种如果都用上了惠州还重复,我们就可以使用Xpath提供的终极神器,逻辑运算定位。and或or

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

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

二、selenium中CSS Selector的使用方法

1. 什么是CSS Selector?

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

2. 工具

  火狐浏览器,下载插件FireBug和FirePath

3. CSS Selector的使用方法

(1)Css selector支持id、class的定位,与html中的css定位相同

  通过id定位  #i1

  通过class定位  .classname

  通过class定位多个class  .classname.c2.c3

(2)通过属性定位,Css Selector支持任意属性定位

  [name='name']

(3)单单属性定位不足以满足我们的定位需求,Css Selector提供了标签属性组合定位

  input[name='name']   input标签下name属性等于‘name’的

  input#i1   input标签下id是i1的

  input.classname  input标签下class是classname的

  div.inner>input  div标签下class是inner的 带有input标签的(注意尖角号)

  Div.inner下有多个,但是不能用索引定位,要结合尖角号+属性使用

(4)Css selector多属性组合过滤,没有and,只需要多个[]连接就可以

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

(5)Css selector模糊匹配

  ^= 匹配元素属性以什么开头    input[value^="登"]

  $= 匹配属性以什么结尾    input[value$="录"]

  *= 匹配属性包含什么值     input[value*="录"]

上一篇:面试指南」JS 模块化、组件化、工程化相关的 15 道面试题


下一篇:第三方web ide开发环境下vuejs开发HMR环境搭建-码农这样开发是快乐的!