Selenium——对象定位

最新推荐文章于 2023-02-21 15:44:07 发布

Wall-Ecko

最新推荐文章于 2023-02-21 15:44:07 发布

阅读量881

点赞数

分类专栏：自动化测试

自动化测试专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本节重点：

简单对象的定位

　　　　　　-----自动化测试的核心

　　对象的定位应该是自动化测试的核心，要想操作一个对象，首先应该识别这个对象。一个对象就是一个人一样，他会有各种的特征（属性），如比我们可以通过一个人的身份证号，姓名，或者他住在哪个街道、楼层、门牌找到这个人。

那么一个对象也有类似的属性，我们可以通过这个属性找到这对象。

定位对象的目的一般有下面几种

· 操作对象

· 获得对象的属性，如获得测试对象的class属性，name属性等等

· 获得对象的text

· 获得对象的数量

webdriver提供了一系列的对象定位方法，常用的有以下几种

· id
· name
· class name
· link text
· partial link text
· tag name
· xpath
· css selector

我们可以看到，一个百度的输入框，可以用这么用种方式去定位。

#coding=utf-8

from selenium import webdriver
import time

browser = webdriver.Firefox()

browser.get("http://www.baidu.com")
time.sleep(2)

#########百度输入框的定位方式##########

#通过id方式定位
browser.find_element_by_id("kw").send_keys("selenium")

#通过name方式定位
browser.find_element_by_name("wd").send_keys("selenium")

#通过tag name方式定位
browser.find_element_by_tag_name("input").send_keys("selenium")

#通过class name 方式定位
browser.find_element_by_class_name("s_ipt").send_keys("selenium")

#通过CSS方式定位
browser.find_element_by_css_selector("#kw").send_keys("selenium")

#通过xphan方式定位
browser.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")

############################################

browser.find_element_by_id("su").click()
time.sleep(3)
browser.quit()

OK~！通过上面一个例子，就帮我们展示了几种定位方式，下面来介绍每种定位方式：

id 和 name

id 和 name 是我们最最常用的定位方式，因为大多数控件都有这两个属性，而且在对控件的id 和name命名时一般使其有意义也会取不同的名字。通过这两个属性使我们找一个页面上的属性变得相当容易

我们通过前端工具，找到了百度输入框的属性信息，如下：

<input id="kw" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

id=”kw”

通过find_element_by_id("kw") 函数就是捕获到百度输入框

name=”wd”

通过find_element_by_name("wd")函数同样也可以捕获百度输入框

tag name 和class name

从上面的百度输入框的属性信息中，我们看到，不单单只有id 和 name两个属性，比如class 和 tag name(标签名）

<input>

input 就是一个标签的名字，可以通过find_element_by_tag_name("input") 函数来定位。

class="s_ipt"

通过find_element_by_class_name("s_ipt")函数捕获百度输入框。

但是，碰下面的一组控件属性，我们就哭了。

<th width="95"></th>
<th width="">文件名</th>
<th class="c1">创建时间</th>
<th class="c1">状态</th>
<th class="c1">文件大小</th>
<th class="c1">时长</th>

下面的css 和 XPath就没有上面的那么直观，如果不懂前端的话可能不太好理解

CSS定位

CSS(Cascading Style Sheets)是一种语言，它被用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。

CSS的比较灵活可以选择控件的任意属性，上面的例子中：

find_element_by_css_selector("#kw")

通过find_element_by_css_selector( )函数，选择取百度输入框的id属性来定义

也可以取name属性

<a href="http://news.baidu.com" name="tj_news">新 闻</a>

driver.find_element_by_css_selector("a[name=\"tj_news\"]").click()

可以取title属性

<a onclick="queryTab(this);" mon="col=502&pn=0" title="web" href="http://www.baidu.com/">网页</a>

driver.find_element_by_css_selector("a[title=\"web\"]").click()

也可以是取..:

<a class="RecycleBin xz" href="javascript:void(0);">

driver.find_element_by_css_selector("a.RecycleBin").click()

虽然我也没全部理解CSS的定位，但是看上去应该是一种非常灵活和牛X 的定位方式

扩展阅读：

http://www.w3.org/TR/css3-selectors/

http://www.w3school.com.cn/css/css_positioning.asp

XPath

什么是XPath：http://www.w3.org/TR/xpath/
XPath基础教程：http://www.w3schools.com/xpath/default.asp

selenium中被误解的XPath ： http://magustest.com/blog/category/webdriver/

XPath是一种在XML文档中定位元素的语言。因为HTML可以看做XML的一种实现，所以selenium用户可是使用这种强大语言在web应用中定位元素。

XPath扩展了上面id和name定位方式，提供了很多种可能性，比如定位页面上的第三个多选框。

xpath:attributer （属性）

driver.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")

#input标签下id =kw的元素

 

xpath:idRelative （id相关性）

driver.find_element_by_xpath("//div[@id='fm']/form/span/input").send_keys("selenium")

#在/form/span/input 层级标签下有个div标签的id=fm的元素

driver.find_element_by_xpath("//tr[@id='check']/td[2]").click() 

# id为'check' 的tr ，定闪他里面的第2个td

 

xpath:position （位置）

driver.find_element_by_xpath("//input").send_keys("selenium") 

driver.find_element_by_xpath("//tr[7]/td[2]").click()

#第7个tr 里面的第2个td

 

xpath: href （水平参考）

driver.find_element_by_xpath("//a[contains(text(),'网页')]").click()

#在a标签下有个文本（text）包含（contains）'网页' 的元素

 

xpath:link

driver.find_element_by_xpath("//a[@href='http://www.baidu.com/']").click()

#有个叫a的标签，他有个链接href='http://www.baidu.com/ 的元素

link 定位

有时候不是一个输入框也不是一个按钮，而是一个文字链接，我们可以通过link

#coding=utf-8

from selenium import webdriver
import time

browser = webdriver.Firefox()

browser.get("http://www.baidu.com")
time.sleep(2)
    
browser.find_element_by_link_text("贴 吧").click()
time.sleep(2)
browser.quit()

一般一个那页面上不会出现相同的文件链接，通过文字链接来定位也是一种简单有效的定位方式。

Partial Link Text 定位

通过部分链接定位，这个有时候也会用到，我还没有想到很好的用处。拿上面的例子，我可以只用链接的一部分文字进行匹配：

browser.find_element_by_partial_link_text("贴").click()

#通过find_element_by_partial_link_text() 函数，我只用了“贴”字，脚本一样找到了"贴 吧" 的链接

如何定位一组元素？

场景

从上一节的例子中可以看出，webdriver可以很方便的使用findElement方法来定位某个特定的对象，不过有时候我们却需要定位一组对象，

这时候就需要使用findElements方法。

定位一组对象一般用于以下场景：

· 批量操作对象，比如将页面上所有的checkbox都勾上

· 先获取一组对象，再在这组对象中过滤出需要具体定位的一些对象。比如定位出页面上所有的checkbox，然后选择最后一个

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Checkbox</title>
        <script type="text/javascript" async="" src="https://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" />
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h3>checkbox</h3>
        <div class="well">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="c1">checkbox1</label>
                    <div class="controls">
                        <input type="checkbox" id="c1" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="c2">checkbox2</label>
                    <div class="controls">
                        <input type="checkbox" id="c2" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="c3">checkbox3</label>
                    <div class="controls">
                        <input type="checkbox" id="c3" />
                    </div>
                </div>    
        
                <div class="control-group">
                    <label class="control-label" for="r">radio</label>
                    <div class="controls">
                        <input type="radio" id="r1" />
                    </div>
                </div>
                
                <div class="control-group">
                    <label class="control-label" for="r">radio</label>
                    <div class="controls">
                        <input type="radio" id="r2" />
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

将这段代码保存复制到记事本中，将保存成checkbox.html文件。（注意，这个页面需要和我们的自动化脚本放在同一个目录下）

第一种方法：

通过浏览器打个这个页面我们看到三个复选框和两个单选框。下面我们就来定位这三个复选框。

# -*- coding: utf-8 -*-
from selenium import webdriver
import time
import os

dr = webdriver.Firefox()
file_path =  'file:///' + os.path.abspath('checkbox.html')
dr.get(file_path)

# 选择页面上所有的input，然后从中过滤出所有的checkbox并勾选之
inputs = dr.find_elements_by_tag_name('input')
for input in inputs:
    if input.get_attribute('type') == 'checkbox':
        input.click()
time.sleep(2)

dr.quit()

你可以试着把input.get_attribute('type') == 'checkbox' 中的checkbox 变成radio ，那这个脚本定位的会是两个单选框。

第二种定位方法：

# -*- coding: utf-8 -*-
from selenium import webdriver
import time
import os

dr = webdriver.Firefox()
file_path =  'file:///' + os.path.abspath('checkbox.html')
dr.get(file_path)

# 选择所有的checkbox并全部勾上
checkboxes = dr.find_elements_by_css_selector('input[type=checkbox]')
for checkbox in checkboxes:
    checkbox.click()
time.sleep(2)

# 打印当前页面上有多少个checkbox
print len(dr.find_elements_by_css_selector('input[type=checkbox]'))
time.sleep(2)

dr.quit()

第二种写法与第一种写法差别不大，都是通过一个循环来勾选控件；如果你学过上一章的话，细心的你一定发现用的定位函数不一样，

第一种用的name ，第二种用的CSS 。

如何去掉勾选：

还有一个问题，有时候我们并不想勾选页面的所有的复选框（checkbox），可以通过下面办法把最后一个被勾选的框去掉。如下：

# -*- coding: utf-8 -*-
from selenium import webdriver
import time
import os

dr = webdriver.Firefox()
file_path =  'file:///' + os.path.abspath('checkbox.html')
dr.get(file_path)

# 选择所有的checkbox并全部勾上
checkboxes = dr.find_elements_by_css_selector('input[type=checkbox]')
for checkbox in checkboxes:
    checkbox.click()
time.sleep(2)

# 把页面上最后1个checkbox的勾给去掉
dr.find_elements_by_css_selector('input[type=checkbox]').pop().click()
time.sleep(2)

dr.quit()

其实，去掉勾选表也逻辑也非常简单，就是再次点击勾选的按钮。可能我们比较迷惑的是如何找到“最后一个”按钮。pop() 可以实现这个功能。

好吧！在web自动化的学习过程中，我们必须要知道一些前端的东西，这里扩展一下：

http://www.w3school.com.cn/js/jsref_pop.asp

尝试：

把find_elements_by_css_selector('input[type=checkbox]').pop().click() 中的checkbox 变成radio 会是什么效果，自己尝试一下吧！

Wall-Ecko

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Selenium——对象定位

本节重点：简单对象的定位　　　　　　-----自动化测试的核心　　对象的定位应该是自动化测试的核心，要想操作一个对象，首先应该识别这个对象。一个对象就是一个人一样，他会有各种的特征（属性），如比我们可以通过一个人的身份证号，姓名，或者他住在哪个街道、楼层、门牌找到这个人。那么一个对象也有类似的属性，我们可以通过这个属性找到这对象。定位对象的目的一般有下面几种· 操
复制链接

扫一扫