首页 > 技术文章 > 层级定位

jshtest 2016-12-27 11:17 原文

在实际的项目测试中,经常会有这样的需求:页面上有很多个属性基本相同的元素,现在需要具体定位到其中的一个。由于属性基本相当,所以在定位的时候会有些麻烦,这时候就需要用到层级定位。先定位父元素,然后再通过父元素定位子孙元素。

Html代码示例:

level_locate.html

<html>


<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Level Locate</title>
<script type="text/javascript" async="
" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
rel="stylesheet" />
</head>

<body>
     <h3>Level locate</h3>
     <div class="span3">
            <div class="well">
                <div class="dropdown">
                       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Link1</a>
                       <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="dropdown1" >
                             <li><a tabindex="-1" href="#">Action</a></li>
                             <li><a tabindex="-1" href="#">Another action</a></li>
                             <li><a tabindex="-1" href="#">Something else here</a></li>
                             <li class="divider"></li>
                             <li><a tabindex="-1" href="#">Separated link</a></li>
                        </ul>
                 </div>
            </div>
    </div>


    <div class="span3">
           <div class="well">
                  <div class="dropdown">
                         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Link2</a>
                         <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" >
                               <li><a tabindex="-1" href="#">Action</a></li>
                               <li><a tabindex="-1" href="#">Another action</a></li>
                               <li><a tabindex="-1" href="#">Something else here</a></li>
                               <li class="divider"></li>
                               <li><a tabindex="-1" href="#">Separated link</a></li>
                         </ul>

                    </div>
             </div>
       </div>


</body>


<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>


</html>

将上面的代码保存为level_locate.html,通过浏览器打开将看到以下页面。

                                              图3.6

通过对上面代码的分析,发现两个下拉菜单中每个选项的link text 都相同,href 也一样,所以在这里就需要使用层级定位了。

具体思路是:先点击显示出1 个下拉菜单,然后再定位到该下拉菜单所在的ul,再定位这个ul 下的某个具体的link 。在这里,我们定位第1 个下拉菜单中的Another action 这个选项。

代码示例:

#coding=utf-8
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.action_chains import ActionChains
import time
import os

driver = webdriver.Firefox()
file_path = 'file:///' + os.path.abspath('level_locate.html')

driver.get(file_path)

#点击Link1 链接(弹出下拉列表)
driver.find_element_by_link_text('Link1').click()

#在父亲元件下找到link 为Action 的子元素
menu =driver.find_element_by_id('dropdown1').find_element_by_link_text('Another
action')


#鼠标移动到子元素上
ActionChains(driver).move_to_element(menu).perform()
time.sleep(5)


driver.quit()

 

driver.find_element_by_id('xx').find_element_by_link_text('xx').click()
这里用到了二次定位,通过对Link1 的单击之后,出现下拉菜单,先定位到下拉菜单,再定位下拉菜单中的选项。当然,如果菜单选项需要单击,可通过二次定位后也直接跟click()操作。

ActionChains(driver)
driver: wedriver 实例执行用户操作。
ActionChains 用于生成用户的行为;所有的行为都存储在actionchains 对象。通过perform()执行存储的行为。


move_to_element(menu)
move_to_element 方法模式鼠标移动到一个元素上,上面的例子中menu 已经定义了他所指向的是哪一个元素。


perform()
执行所有ActionChains 中存储的行为。

定位后的效果如下,鼠标点击Link1 菜单,鼠标移动下Another action 选项上,选项出现选中色。

 

 

知识扩展:

 

今天再给大家分享一个定位不到元素的原因——动态id。

没有打开新页面、没有alert、没有frame、加了等待时间,但是还是定位不到元素?很有可能是你要定位的元素的属性是动态的,即每次打开页面,这个元素的id或者class等元素属性是动态生成的。代码执行时,元素的属性已经与之前不同,用之前的属性值去定位自然是定位不到的,会抛出NoSuchElementException。

那么,怎么判断元素属性是否是动态?很简单,一般看到元素属性里有拼接一串数字的,就很有可能是动态的。想要分辨,刷新一下浏览器再看该元素,属性值中的数字串改变了,即是动态属性了。

如下:

<div id="btn-attention_2030295">...</div>

怎么定位这类型的元素呢?

1. 根据其他属性定位

如果有其他固定属性,最先考虑的当然是根据元素的其他属性来定位,定位方式那么多,何必在这一棵树上吊死。。

2. 根据相对关系定位

根据其附近的父节点、子节点、兄弟节点定位,关于这方面,博主之前的一篇文章可作为参考:Python selenium —— 父子、兄弟、相邻节点定位方式详解

3. 根据DOM顺序index定位

这个很简单,找到该元素在主文档或某级父节点中的index,然后根据index可轻松定位,不过这种方式可能不够稳定,如果可以,还是用其他的方法定位更加合适。

4. 根据部分元素属性定位

xpath中提供了三个非常好的方法来为我们定位部分属性值:

driver.find_element_by_xpath("//div[contains(@id, 'btn-attention')]")

driver.find_element_by_xpath("//div[starts-with(@id, 'btn-attention')]")

driver.find_element_by_xpath("//div[ends-with(@id, 'btn-attention')]") # 这个需要结尾是‘btn-attention’

 

contains(a, b) 如果a中含有字符串b,则返回true,否则返回false

starts-with(a, b) 如果a是以字符串b开头,返回true,否则返回false

ends-with(a, b) 如果a是以字符串b结尾,返回true,否则返回false

这里要多嘴一句,各种浏览器对xpath的支持情况不一样,像IE就差点,所以有时候会出现xpath在一个浏览器能定位到但在另一个浏览器定位不到的问题,不要惊讶。。

附上一个此类型问题:

Xpath “ends-with” does not work

推荐阅读