Selenium学习005-元素选择之xpath

Selenium学习笔记目录

---

xpath:树型结构

1. 基本概念

• 使用方法：find_element_by_xpath("...")

• 根节点：/

• 子节点：/html/body/...

  • 直接子节点 /body
  • 所有子节点（包括直接子节点和非直接子节点）//body

• 当前节点用“.”表示 ./body/...

• 当前节点的上一层节点用“..”表示 ../body/...

• 从根节点开始查找/a/b/c/d

• 不从根节点开始查找（查找所有节点）//c //b/d

• 通配符用*表示，*可以是任何一种类型//b//* 查找节点b下的所有元素

  • xpath与css方法对比

    xpath	css
    //div/*	div > *

• 根据属性查找

  1. 所有属性，包括id和class
  2. 示例01：查找属性含style的所有元素//*[@style]
  3. 示例02：查找p节点下属性spec=len2的元素//p[@spec='len2']

  • xpath与css方法对比

    xpth属性的值必须加引号，css如果没有空格可以不加引号

    xpath	css
    //*[@style]	*[style]
    //p[@spec='len2']	p[spec=len2]

2. 举例应用

• 根据id选择//*[@id='food']

• 选择属于其父元素的第二个p

  • xpath与css方法对比

    xpath	css
    //p[2]	nth-of-type(2)

• 选择属于其父元素的倒数第几个元素

  • 最后一个p类型的子元素//p[last()]
  • 倒数第二个p类型的子元素//p[last(-1)]
  • 所有元素的倒数第二个//*[last()]

• 根据位置选择

  position表示位置

  • 所有元素中的前两个元素 //*[position()<=2]

  • 除了第一个元素外的其他所有元素 //*[position()>1]

  • 所有元素中的最后三个元素 //*[position()>last()-3]

  • xpath与css方法对比

    • xpath:选择所有的p和所有的button(先选择所有的p再选择button)//p | //button
    • css:选择所有的p和所有的button(按结构顺序选择)p,button

• 当前节点下的所有直接子节点

  • css:food下面所有的直接子节点中的div#food ~ div
  • xpath://*[@id='food']/following-sibling::div
  • id为food的节点的子节点的第一个节点//*[@id='food']/following-sibling::*[1]
  • id是food的上一个节点的div节点//*[@id='food']/preceding-sibling::div
  • id为food的父节点(上层节点)//*[@id='food']/..

• 当前目录与子目录

  • 从根目录下开始查找所有的p：'//p'
  • 从当前目录下开始查找所有的p：'.//p'
  • 从当前节点的父节点开始查找所有的p：'..//p'
  • 从当前目录下开始查找直接子节点的p：'./p'

3. 在浏览器中确认查找的元素是否正确

• 浏览器按F2进入开发者模式，点击console
  • xpath与css方法对比

    方法	路径前的符号	示例
    xpath	$x	$x("//span")
    css	$$	$$('span')

• 浏览器按F2进入开发者模式，点击elements，按ctrl+F进入搜索模式，输入xpath或css参数路径

4. 浏览器端根据html查看xpath

• 选中某个路径，点击鼠标右键，依次选择copy-->copy xpath即可复制该元素的xpath