RobotFramework自动化测试之元素定位

前言：最近在做基于RF框架的Web自动化测试，其中涉及到元素的定位，主要用到id、name、xpath、css四中定位方法，尤其后面的两种方法特别有效，可以解决大部分的定位问题。

id和name定位

假设把一个元素看做是一个人的话，那么name就相当于人的姓名、id近似于人的身份证号；当然，id和name的属性值是否唯一是需要看前端工程师是怎么进行设计的。

这里我们使用大家常用的百度首页输入框和搜索按钮进行验证：

html源码：

1 输入框：
2 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
3 搜索按钮：
4 <input type="submit" id="su" value="百度一下" class="bg s_btn">

输入框：

如上，百度输入框有id和name两个属性，我们可以取id或者name进行定位。（前提条件是id和name属性的值在页面上是唯一的）

如果我们想在百度搜索框中输入"秦朗的天空",在Robotframework中我们的代码可以这样写：

其中1和2是或的关系，任选一个都可以。

搜索按钮：

百度的搜索按钮只有id一个属性，因此我们只能通过id来定位并点击按钮，在Robotframework中代码如下：

XPATH定位

如果一个人没有身份证也没有名字，你也不知道他的电话，但是你知道他的家庭住址为武汉市洪山区xxx街xx小区xx层xx单元xx号，假设你想找他出去蹦迪恰巧他也在家，那是不是可以通过家庭住址直接去找到他的人呢？同样在前端Web元素定位中我们的xpath就是通过"家庭住址"这种层级关系找到元素的。

百度输入框在整个页面的位置：

 1 <html>
 2     <head>
 3     <body link="#0000cc">
 4     <div id="wrapper" style="display: block;">
 5         <div id="debug" style="display:block;position:absolute;top:30px;right:30px;border:1px solid;padding:5px 10px;"></div>
 6         <div id="u">
 7         <div id="head">
 8         <div id="content" style="display: block;">
 9             <div id="u1" style="display: block;">
10             <div id="m">
11                 <p id="lg">
12                 <p id="nv">
13                 <div id="fm">
14                     <form id="form1" class="fm" action="/s" name="f1">
15                         <span class="bg s_ipt_wr">
16                             <input id="kw" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

1、xpath绝对路径

Xpath = /html/body/div[1]/div[4]/div[2]/div/form/span[1]/input

绝对路径是从整个页面的顶端开始寻找，html下的body下的div下的第四个div下的第二个div下的div下的form下的第一个span下的input标签，通过一层一层的定位到元素。

2、xpath相对路径

由于使用绝对路径对前端页面的架构要求较高，只要前端工程师随意改动一个标签的位置，通过绝对路径定位就定位不到，因此我们可以使用相对路径来定位。

2.1通过元素属性

xpath可以通过元素自身的属性进行定位：

Xpath = //*[@id="kw"]

解析：//是层级通配符表示某个层级下；*是标签名通配符表示某个标签名；@id=kw表示定位的这个元素有个id=kw。

当然这里我们也可以指定标签名来定位：

xpath = //input[@id="kw"]

元素的属性并不只局限于id以及name，也可以是type、class、autocomplete等，但是必须要保证这个元素的属性值是唯一的。

这里我们也可以通过autocomplete属性来定位：

Xpath = //input[@autocomplete="off"]

2.2通过上级元素

可以这样去理解，打个比方说，你的朋友又想找你蹦迪，恰巧又找不到你的人，那他可以通过什么途径来找呢，是不是可以通过找你爸妈来找你？（当然这里这是打个比方，如果现实中真的这样，估计你会被你爸妈打死），实际上我们的xpath也可以这样通过上级元素来定位。

依旧拿百度的输入框来举例：

上级元素：
<form id="form" name="f" action="/s" class="fm">
    <span class="bg s_ipt_wr quickdelete-wrap">
输入框：        
        <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

找上层：

xpath = //span[@class="bg s_ipt_wr quickdelete-wrap"]/input

如果上层没有唯一的属性值可以找上上层：

xpath = //form[@id="form"]/span/input

如果还没有的话就往更上一层查找，知道html，那么这样就是一个绝对路径了。

2.3通过布尔运算

若一个人的名字不是唯一、身份证号不是唯一，但是名字和身份证号两个加起来可以确认一个人的身份，同样我们xpath定位也可以这么玩，通过布尔运算来定位：

依旧举例百度输入框：

1 输入框：
2 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

这里主要运用到布尔运算中的and，or的实际意义不大：

xpath = //input[@id="kw"and@name="wd"]

CSS定位

css定位相对于上面的几种定位方式来看更灵活，因为它用到更多的匹配符，类似于正则表达式。

注：在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

下面来看看常用的一些CSS选择器：

选择器	例子	例子描述
.class	.intro	选择 class="intro" 的所有元素。
#id	#firstname	选择 id="firstname" 的所有元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内部的所有 <p> 元素。
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。

这里我们还是拿百度输入框来做实验：

1 上级元素：
2 <form id="form" name="f" action="/s" class="fm">
3     <span class="bg s_ipt_wr quickdelete-wrap">
4 输入框：        
5         <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

1.id定位

css = #kw

2.class定位

css = .s_ipt

3.其他属性定位

css = [name=wd]

css = [autocomplete=off]

4.层级定位

css = span>input

css = form>span>input

5.标签定位

css = input

以上只是举例了部分css定位方式，实际情况下同一个元素根据css的不同规则可以有几十种，甚至几百种写法。

总结：

元素的定位方法远远不止以上这些，据不完全统计元素定位方法有18种，但是万变不离其中，大部分是根据这四类进行衍生。在日常工作中，主要掌握好以上几种方法，根据实际情况进行选择；css相对于xpath来说定位速度更快更灵活，比较强大，但是学习成本比xpath成本更高，因此根据个人的特点和喜好，xpath和css必须学好其中的任意一个，方能开展自动化测试。