Selenium定位—XPath

XPath定位

浏览器检查元素定位方法

示例：https://www.12306.cn/index/index.html

　　定位，出发地输入框元素

• 在Console输入 $x() ，括号中填写XPath定位语句

  • 查询结果显示为1条

　　　　　　如图：输入 $x('//*[@id="fromStationText"]') ，点击回车，即可显示查询结果

　　　　　　　　鼠标放在查询结果 0:  上面，则会在web界面上高亮显示该位置

　　　　　　　　鼠标点击查询结果 0:  ，则会跳到 Elements 界面，并高亮显示定位的元素

• • 查询结果显示为多条

　　　　　　如图：输入 $x('//*[@class="form-bd"]/div[@class="input-box input-city"]/input') ，点击回车，即可查看查询结果

　　　　　　当结果不唯一时，就需要重新找到唯一定位

• 在 Elements 界面，键盘点击 Ctrl + F ，在查询框内输入 XPath 语句

  • 查询结果显示为1条

　　　　　　如图：输入 //*[@id="fromStationText"] ，若存在该元素，则定位到该元素位置，并高亮显示

　　　　　　查询结果如果只有一条，则会显示 1 of 1

• • 查询结果显示为多条　　

　　　　　　如图：输入 //*[@class="form-bd"]/div[@class="input-box input-city"]/input 即可查看查询结果

　　　　　　当结果不唯一时，会高亮显示第一个结果，查询结果处 1 of 12 是指，该查询结果共 12 个，当前高亮显示为第 1 个

　　我们清楚了，在浏览器检查元素的定位方法，那么就开始我们的XPath的定位之旅吧　　

 

XPath是什么？

• XPath 使用路径表达式在 XML 文档中进行导航
• XPath 包含一个标准函数库
• XPath 是 XSLT 中的主要元素
• XPath 是一个 W3C 标准

简单理解，就是通过元素的路径来查找（定位）该元素

说到路径，我们直接就能想到 相对路径 和 绝对路径

• 绝对路径：从根目录（根节点）出发，来定位（通往）某一元素的路径
• 相对路径：从当前目录（当前节点），来定位（通往）某一元素的路径　　

我们应当如何表示根节点和当前节点？

　　以百度首页为例，定位输入框元素：

• 根节点（ / ）：/html/body/div/div/div/div/div/form/span/input

　　　　/ 表示 某一节点的直接子节点，如果以 / 开头，表示根节点的直接子节点有且只有一个 html

　　　　一般不建议使用

• 当前节点（ // ）：//span/input

　　　　// 表示非直接子节点

• 通配符（ * ）：//form/span/*

　　　　* 表示通配符，可理解为全部=====>即form的直接子节点span下面所有的元素

定位方法：

• 根据属性及属性值定位

  • 语法：//标签名[@属性名=“属性值”]

  • 注意：@必不可少

  • 以百度首页输入框示例：

    • //input[@id="kw"]

    • //input[@class="s_ipt"]

    • //input[@name="wd"]

    • //input[@type="text"]

    • //input[@maxlength="100"]

    • ......

 

• 根据属性定位结果如果存在多条，可使用序号来准确定位

  • 以百度首页 消息 为例：

    • //div[@id="s_icons"]/a[@onclick="return false;"]　　结果显示为2条，消息在第2条中

    • //div[@id="s_icons"]/a[@onclick="return false;"][2]　　准确定位到该元素信息

• 根据文本信息定位

  • 以百度首页 消息 为例：

    • 准确定位

      • //div//span[text()="消息"]

• • • 模糊定位

      • //div//span[contains(.,'消')]　　　　当前节点包含 “消”

• • • • //div//span[contains(text(),'消')]　　当前节点的text(0属性包含“消”
      • //div//span[contains(@class,'title')]　　当前节点的class属性包含了属性值“title”

 

• 通过子元素选择

• • 选择属于其父元素的第N个某个 类型 的子元素

    • 限定元素：//*[@id="form"]/span[2]

      • 选择 id="form" 的子元素为span的第2个元素

• • • 不限定元素：//*[@id="form"]/*[2]

      • 选择 id="form" 的第2子元素

• • 选择属于其父元素的倒数第n个 类型 的子元素

    • //*[@id="form"]/span[last()]

      • 选择 id="form" 的子元素为span的倒数第1个元素

• • • //*[@id="form"]/span[last()-1]

      • 选择 id="form" 的子元素为span的倒数第2个元素

• • 通过子元素，定位其兄弟元素

    • 有时候，我们可以定位到某一子元素，但我们想要操作该子元素附近的元素，而此时父元素无法准确定位，我们可以通过子元素查找父元素

    • 例：无法定位父元素时，需要操作第3个input

      • //*[@type="hidden"]/../input[3]　　    可以通过 /.. 返回到父元素

 

• 结合逻辑运算符定位（and  or）

  • 以百度输入框为例：

    • //input[@class="s_ipt" and @id="kw"]

　

相关注意点：　

1.  优先使用 id 

2. 操作 id 时，注意 id 是否为动态，如果为动态，则避免使用

3. 定位元素一定要做到精准定位（唯一定位结果）

4. 通过下标定位，尽量少的使用