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("http://span")
    css	$$	$$('span')

• 瀏覽器按F2進入開發者模式，點擊elements，按ctrl+F進入搜索模式，輸入xpath或css參數路徑

4. 瀏覽器端根據html查看xpath

• 選中某個路徑，點擊鼠標右鍵，依次選擇copy-->copy xpath即可復制該元素的xpath