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. 通过下标定位,尽量少的使用

posted @ 2019-05-23 16:44  落晨  阅读(847)  评论(0编辑  收藏  举报