<div name='name' value='value1' id="1">
  <div value='value' id="2">
    <div id="3">text</div>
  </div>
  <div id="4">
    <svg>
      <circle></circle>
    </svg>
  </div>
</div>

1. 根据 inner 元素的文字查找，第一和第二个div会被选中

//div[.//div[text()='text']]

2. 根据 inner 元素的文字查找，只有第二个div会被选中, 和第一个的区别就是 .// 和 ./

//div[./div[text()='text']]

3. 根据多个属性查找，第一个div会被选中

//div[.//div[text()='text']][@name='name']

4. 根据属性查找，第一个div会被选中

//div[@name='name']

5. 根据文字内容查找，三个div都会被选中

//div[text()='text']

6. 查找兄弟元素, 第四个div会被选中

//div[@name='name']/following-sibling::div

7. 查找svg

//div[@name='name']/following-sibling::div//*[name()='svg']

8. 查找svg内的元素

//div[@name='name']/following-sibling::div//*[name()='svg']/*[name()='circle']

9. 多属性查找

//div[@name='name'][@value='value1']
or
//div[@name='name' and @value='value1']

10. console 用JQuery 测试 xPath

$($x('xPath').click()

11. 查找子孙节点, svg会被选中

//*[@id='1']/descendant::svg