利用Xpath和jQuery进行元素定位示例

利用Selenium在做前端UI自动化的时候，在元素定位方面主要使用了XPATH和jQuery两种方法。XPATH作为主要定位手段，jQuery作为补充定位手段。因为在通过XPATH进行定位的时候，Selenium是通过游览器原生的API进行操作，更接近模拟用户的操作；而通过jQuery作为定位的时候，实质是向游览器发送一段JavaScript代码，虽然可以达到目的，但模拟效果不如前者。

以下列举了一些常用的定位写法。

  • 通过id定位元素
<div class="input-outer" data-render="true">
    <input type="text" name="templateName2" id="tempdata" size="20" maxlength="20" class="input tuiRequired tuiUpper tuiTrim myRule" value="">
</div>

jQuery写法: $("input#tempdata")
XPATH写法: //input[@id="tempdata"]

  • 通过class定位元素
<span class="icon sm icon-cross hover"></span>

jQuery写法: $("span.icon.sm.icon-cross.hover")
XPATH写法: //span[@class="icon sm icon-cross hover"]

  • 通过文本内容定位元素
<span class="name">CA模板管理</span>

jQuery写法: $("span:contains(‘CA模板管理‘)")
XPATH写法: //span[contains(text(),"CA模板管理")]

  • 多属性组合定位元素
<div class="tab-title">模板规则列表</div>

定位思路：通过class和文本内容定位元素
jQuery写法: $("div.tab-title:contains(‘模板规则列表‘)")
XPATH写法: //div[@class="tab-title" and contains(text(),"模板规则列表")]

  • 匹配子元素
<div class="h-ctrl h-close">
    <span class="icon sm icon-cross hover">A</span>
</div>
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">A</span>
</div>

定位第二个A的思路：两个A的父元素不同，通过父元素定位子元素
写法1：
jQuery写法: $("div.x-ctrl.x-close > span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="x-ctrl x-close"]/span[@class="icon sm icon-cross hover"]
写法2：
jQuery写法: $("div.x-ctrl.x-close").children("span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="x-ctrl x-close"]/child::span[@class="icon sm icon-cross hover"]

  • 匹配到的元素的第一个
<div class="h-ctrl h-close">
    <span class="icon sm icon-cross hover">A</span>
</div>
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">A</span>
</div>

定位第一个A
jQuery写法一: $("span.icon.sm.icon-cross.hover").first()
jQuery写法二: $("span.icon.sm.icon-cross.hover").eq(0)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[1]

  • 匹配到的元素的最后一个
<div class="h-ctrl h-close">
    <span class="icon sm icon-cross hover">A</span>
</div>
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">A</span>
</div>

定位最后一个A
jQuery写法一: $("span.icon.sm.icon-cross.hover").last()
jQuery写法二: $("span.icon.sm.icon-cross.hover").eq(-1)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[last()]

  • 匹配到的元素的倒数第二个
<div class="h-ctrl h-close">
    <span class="icon sm icon-cross hover">A</span>
</div>
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">A</span>
</div>
<div class="y-ctrl y-close">
    <span class="icon sm icon-cross hover">A</span>
</div>

定位倒数第二个A
jQuery写法: $("span.icon.sm.icon-cross.hover").eq(-2)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[last()-1]

  • 匹配当前元素的后代元素(子、孙等)
<div class="x-window">
    <div class="h-ctrl h-close">
        <span class="icon sm icon-cross hover">A</span>
    </div>
</div>
<div class="y-window">
    <div class="h-ctrl h-close">
        <span class="icon sm icon-cross hover">A</span>
    </div>
</div>
<div class="z-window">
    <div class="h-ctrl h-close">
        <span class="icon sm icon-cross hover">A</span>
    </div>
</div>

定位中间的A
jQuery写法: $("div.y-window").find("span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="y-window"]/descendant::span[@class="icon sm icon-cross hover"]

  • 通过同级元素进行匹配
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">B</span>
    <div class="h-focus">
        <span class="icon sm icon-cross hover">A</span>
    </div>
</div>
<div class="x-ctrl x-close">
    <span class="icon sm icon-cross hover">C</span>
    <div class="h-focus">
        <span class="icon sm icon-cross hover">A</span>
    </div>
</div>

定位第二个A
jQuery写法: $("span:contains(‘C‘)").siblings("div.h-focus").children("span:contains(‘A‘)")
XPATH写法: //span[contains(text(),"C")]/following-sibling::div[@class="h-focus"]/span[contains(text(),"A")]

  • 稍微复杂一点的定位
<div class="x-window">
    <td class="rule">
        <span>A</span>
    </td>
    <td class="rule">
        <div class="button">"控制按钮"</div>
    </td>
</td>
<div class="x-window">
    <td class="rule">
        <span>B</span>
    </td>
    <td class="rule">
        <div class="button">"控制按钮"</div>
    </td>
</td>

举个例子，比如说页面上的A和B元素是动态的，但是有一个规律，A或者B的父元素的同级元素一定有一个"控制按钮"的子元素。
定位 "控制按钮"
jQuery写法: $("span:contains(‘B‘)").parent("td.rule").siblings("td").children("div:contains(‘控制按钮‘)")
XPATH写法: //span[contains(text(),"B")]/parent::td[@class="rule"]/preceding-sibling::td/child::div[contains(text(),"控制按钮")]

注：以上只是在工作时遇到比较典型的元素定位进行的举例，定位方式不是唯一，可能有多重定位方式。更多的定位方式请参考jQuery语法和XPath语法。

原文地址：https://www.cnblogs.com/Flylater/p/10438302.html

时间： 2024-10-09 14:40:33

利用Xpath和jQuery进行元素定位示例的相关文章

jquery 未来元素事件示例 on() delegate() live()

jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});$(document).delegate("#green", "click&quo

Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）

此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkText.tagName 的实战实例源代码演示 Selenium 元素定位的 8 种方法,源代码测试通过日期为:2015-01-26 00:18,请知悉.注意:其中通过 tagName 定位元素时,返回的是一个 WebElement 的数组,需要根据实际的测试需求对其进行进一步的处理. 希望能对初学 S

selenium+python自动化之元素定位

自动化按步骤拆分的话,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇接下来讲基本的八种元素定位方法.说的通俗一点,就是教大家找对象. 万物皆对象,所谓的对象,就是你喜欢的那个女神,她就是你的对象.既然是对象,她就有属性,比如眼睛大,头发长,皮肤白,颜值高.这些都是她的属性,每个属性又有对应的属性值,如眼睛="大",头发="长",颜值="高",对应的=后面就是它的属性的值. 同样的道

4、通过uiautomatorviewer实现appium元素定位

熟悉selenium自动化的小伙伴应该知道WebDriver 提供了八种元素定位方法: idnameclass nametag namelink textpartial link textxpathcss selector appium元素定位和WebDriver略微有些差异,具体差异在哪里,下面会具体介绍,在此之前,我们先打开uiautomatorviewer.bat(在sdk/tools路径下) appium元素定位一:通过 Id 定位 如上图所示resource-id 就是我们要找的 Id

Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例

此文主要对 Selenium2 的 Web 元素定位及 XPath 编写示例,敬请各位亲们参阅,共同探讨.若有不足之处,敬请各位大神指正,不胜感激! 通过 Firefox(火狐)浏览器的插件 Firebug + xpath checker ,结合三个示例来演示实现页面元素的定位及 xpath 路径编写.下面就一起开始我们的 Web 页面元素定位之旅吧... 首先,启动 Firefox(火狐)浏览器,并启动 Firebug 插件(按 F12 按键即可) 一.百度搜索框定位(元素的 ID) 网址输入

jquery元素定位方法

用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的相应代码,如上图的红框中所示. 点击console 在控制台输入命令:elements=jQuery.find('button.navbar-toggle') 目的是寻找jquery相应元素,并赋值对象属性到elements这个变量 运行后可以看到所有相应的元素,然后输入elements[0]之类的

Web元素定位方法_8大元素+xpath定位

元素定位,顾名思义就是根据元素的特征,来确认元素的条件,然后根据条件去找到唯一的那个元素. 一.八大元素 1.只根据元素的一个属性来找元素(6大) 1)id.name.class_name(只支持一个class值).tag_name 2)只针对a元素 link_text.partial_link_text 示例: 1 # class - 只能是class属性当中的一个值 2 driver.find_element_by_class_name("s_ipt") # 1个元素 - 匹配到的

元素定位XPath 简单操作分享

XPath 简单实用 学习Selenium2 为了学习元素定位开始学习xpath,现在把学习心得记录下,给大家参考下. 什么是 XPath? XPath 使用路径表达式在 XML 文档中进行导航 XPath 包含一个标准函数库 XPath 是 XSLT 中的主要元素 XPath 是一个 W3C 标准 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或者根节点. 下面列出了最有用的路径表达式

Java + selenium 元素定位（5）之By Xpath

这篇关于Xpath方法的文章和之前那篇CSS的方法一样,使用前,需要先掌握一些Xpath的相关知识.当然,网上也有各种工具可以帮助我们获取到元素的Xpath,但是这并不代表着我们就可以不用了解Xpath的相关知识,毕竟依赖工具永远没有依赖自己来着靠谱.但是我也会介绍一下如果简单快速的获取元素的Xpath. 我尝试过使用一些文章介绍的快速获取Xpath的工具,但是可能因为这些工具都是依赖于浏览器的扩展工具,更新换代比较快,所以文章介绍的工具我并没有成功找到.我在这里要介绍的方法,不需要使用额外的工