Katalon系列十九:元素相同或无法定位时的定位技巧

Stella981
• 阅读 1004

经常看到有人问元素属性都相同,怎么定位,这里总结一下。
下面以Xpath为例讲解,CSS其实也是一样的,只是语法不一样罢了。网上说CSS会比Xpath快一些,但在Katalon主用Xpath,感觉也还行。另外Katalon做为一个产品,他们选择主打Xpath,相信也是有原因的。当然了,也有极小可能他们的骨干对Xpath比较熟。Katalon也支持CSS,但不会像Xpath那样智能提示你多种自动定位语法。

想要定位的得心应手,首先要对Xpath语法了如指掌,可以看我之前的一篇文章:https://www.cnblogs.com/songzhenhua/p/10260945.html
这里单独列一些比较技巧性的定位语法加深印象:
//span[text()=""] 完全匹配文本
//span[contains(text(),"")] 包含文本
//div[contains(@class,'xxx')] 属性包含
//input[not(@id='123')] 找id不为123的input
//input[starts-with(@class,'xxx')] 开头匹配
//span[substring(@name,3,5)='xxxxx'] name属性第3个字符开始的5个字符是xxxxx的
//span[sbustring-before(@class,"-")="spanclass1"] class属性中-字符前面的字符是spanclass1
//span[sbustring-after(@class,"-")="spanclass1"] class属性中-字符后面的字符是spanclass1
//div[@class='xxx' and @type='xxx'] 多个属性定位,也能or
//span[position()<3] 索引位置小于3的所有span
//span[last()-1] 倒数第二个span
//div[div[@id='xxx']] 依靠子节点定位
//li[.//a[contains(., 'Mandarin')]]//a[contains(., 'Outstanding')] 包含文本

在编写Xpath定位语句时,可以先在Chrome里调试:按F12打开开发者工具,在下面的Console中输入如$x('//a[@class="mnav"]'),注意定位的时候内外层单/双引号均可,但不能重复。如果Console没打开可以按ESC键打开。Chrome里定位好后,再去Katalon编写。

一、但凡元素有1个属性有区别,我们就可以拿这个属性来定位,如id、name、class、type、href、text()、自定义的属性等等。

二、元素所有属性完全一样。
(1)元素集中在一起,如一个div下有10个a,可以用下标定位
如同样定位百度首页的新闻链接,Chrome和Katalon分别如下:
Katalon系列十九:元素相同或无法定位时的定位技巧

Katalon系列十九:元素相同或无法定位时的定位技巧

实例:
(//a[@class="mnav"])[1] 定位第1个
(//a[@class="mnav"])[last()] 定位最后1个
(//a[@class="mnav"])[last()-1] 定位倒数第2个

(2)元素散落在各处,可以用下标,也可以用相对路径或Xpath轴定位
我编写了一个特殊的HTML以方便讲解:
Katalon系列十九:元素相同或无法定位时的定位技巧
相对路径,如定位最后一个div:
//div[img[@src='b.gif']] 依靠子节点定位
//img[@src='b.gif']/.. 依靠子节点取父节点
(//li[@class='node1']/div)[3] 依靠父节点取子节点

Xpath轴定位,这里只说几个最有用的:
following,选取文档中当前节点结束标签后的所有节点(不分层级),如定位倒数第3个img:
//li[@class='node1']/following::img[1] 先定位第2个li,再往后数第1个img

preceding,选取文档中当前节点开始标签前的所有节点(不分层级),如定位倒数第2个img:
//img[@src='b.gif']/preceding::img[1] 先定位最后1个img,再往前数第1个img

following-sibing,选取当前节点之后的兄弟节点,如定位第4个div:
//div[@id='div1']/following-sibing::div[1] 先定位第3个div,再往后数第1个兄弟div

preceding-sibling,选取当前节点之前的兄弟节点,如定位第2个div:
//div[@id='div1']/preceding-sibling::div[1] 先定位第3个div,再往前数第1个兄弟div

我们注意到上面讲下标的时候,有时候下标在()内,有时候下标在()外:
在()内时表示找路径中的第X个,下标从1开始;如下图,//li/div[1]表示找li下的第1个div,只不过在我们这个例子中有2个符合条件的。
Katalon系列十九:元素相同或无法定位时的定位技巧

在()外时,表示按()内的条件找到的元素的列表中的第X个,在Chrome中下标从0开始,在Katalon中下标从1开始;如下图,(//li/div)[1]表示找li下的div的列表中的第1个,在这个例子中//li/div一共找到7个div,会返回一个列表,里面有7个元素,()[1]表示取第1个,和Python的列表一样。
Katalon系列十九:元素相同或无法定位时的定位技巧

以上都是讲的元素相同时定位某一个元素,如果要相同元素全都操作一遍,可以看katalon系列十六:https://www.cnblogs.com/songzhenhua/p/10202327.html

三、无法定位的元素靠其他元素的偏移量点击
有时候Xpath写的没错,但就是定位不到;有时候要点svg或flash内的某点,但这些元素都不支持定位。这时候我们可以先定位它们旁边的一个基准元素,然后通过点击这个基准元素的一个偏移点来实现目标的点击。
Katalon中提供了Click Offset关键字,可实现偏移点击。在Object中放入基准元素,在Input里输入偏移量坐标。
Katalon系列十九:元素相同或无法定位时的定位技巧
注意偏移的基点是基准元素的左上角。比如输入10,100:表示点击基准元素左上角往右10元素,再往下100元素的那个位置;-50,-50:表示点击基准元素左上角往左50元素,再往上50元素的那个位置。
在selenium中可以用ActionChains实现。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Python进阶者 Python进阶者
2年前
网页结构的简介和Xpath语法的入门教程
相信很多小伙伴已经听说过Xpath,之前小编也写过一篇关于Xpath的文章,感兴趣的小伙伴可以戳这篇文章以及。今天小编继续给大家介绍一些Xpath知识点,希望对大家的学习有帮助。1、Xpath让我们可以使用一种类似于Windows下的文件路径的方式,让我们可以定位到HTML或者XML结构中的具体元素。Xpath本身包含标一些准函数库,可以让我们的Xpath语
Stella981 Stella981
2年前
Selenium 详解CSS定位
xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点一、属性定位1、可以通过元素的id,class,tag标签这三个属性直接定位  表示id属性,如:kw.  表示class属性,如:.s\_ipt直接用标签名称,如:inpu
Stella981 Stella981
2年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
2年前
Selenium2学习(六)
前言大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。一、css:属性定位    
Stella981 Stella981
2年前
Python+Selenium练习篇之5
前面介绍了,XPath,id,class,linktext,partiallinktext,tagname,name七大元素定位方法,本文介绍webdriver支持的最后一个方法:by\_css。css和XPath类似,也需要掌握一些语法,才能写出正确的,完整的css选择表达式。相关脚本代码如下:codingu
Stella981 Stella981
2年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Stella981 Stella981
2年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
2年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
小万哥 小万哥
2星期前
XML文档节点导航与选择指南
XPath(XMLPathLanguage)是XSLT标准的主要组成部分。它用于在XML文档中浏览元素和属性,提供了一种强大的定位和选择节点的方式。XPath的基本特点代表XML路径语言:XPath是一种用于在XML文档中导航和选择节点的语言。路径样式语法