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

id和name定位

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

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

html源码:

 输入框:
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
搜索按钮:
<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就是通过"家庭住址"这种层级关系找到元素的。

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

 <html>
<head>
<body link="#0000cc">
<div id="wrapper" style="display: block;">
<div id="debug" style="display:block;position:absolute;top:30px;right:30px;border:1px solid;padding:5px 10px;"></div>
<div id="u">
<div id="head">
<div id="content" style="display: block;">
<div id="u1" style="display: block;">
<div id="m">
<p id="lg">
<p id="nv">
<div id="fm">
<form id="form1" class="fm" action="/s" name="f1">
<span class="bg s_ipt_wr">
<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定位也可以这么玩,通过布尔运算来定位:

依旧举例百度输入框:

 输入框:
<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" 开头的所有元素。

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

 上级元素:
<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">

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必须学好其中的任意一个,方能开展自动化测试。

RobotFramework自动化测试之元素定位的更多相关文章

  1. Selenium自动化测试之元素定位

    步骤: 1.通过前端工具,查看元素的属性 2.通过属性定位 iddriver.findElement(By.id("kw")) namedriver.findElement(By. ...

  2. appium自动化测试之元素定位

    方法一 使用SDK中附带的uiautomatorviewer来定位 在SDK安装目录下的tools下有个uiautomatorviewer.bat批处理文件点击运行 运行后(注意appium desk ...

  3. Appium移动端自动化测试之元素定位(三)

    1.name定位 driver.find_element_by_id(') driver.find_element_by_id(') driver.find_element_by_name('登录') ...

  4. selenium+python自动化之元素定位

    自动化按步骤拆分的话,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇接下来讲基本的八种元素定位方法.说的通俗一点,就是教大家找对象. ...

  5. UI自动化之元素定位(xpath、css)

    很早之前就已经写过自动化了,不过点着功能久了就会容易忘记元素定位,尤其是xpath和css定位,所以就花点时间做下总结收集. xpath有两种定位: 一.绝对路径(不推荐使用,除非已经使用了所有方式仍 ...

  6. python3+Appium自动化12-H5元素定位环境搭建

    前言 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原生控件进行元素 ...

  7. RF自动化测试之元素封装

    自动化测试均需要遵循由点到面的规则,然而对于UI自动化,点是最容易发生变化的,如果使用硬链接,那么每次元素的修改都必须修改代码,这对于代码功底薄弱的测试工程师来说,是较为困难的,所以自动化测试需要对底 ...

  8. python ui自动化之元素定位和常用操作

    做ui自动化的最基础的就是页面元素定位了,如果连页面元素都定位不到,自动化从何谈起呢?接下来我们就看看页面元素定位的方法吧!(这里就用百度页面来进行演示) 一.最通用的几种定位方式: 1.通过id定位 ...

  9. App自动化《元素定位方式、元素操作、混合应用、分层设计、代码方式执行Pytest 命令》

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.App 元素定位方式 二.元素操作 三.测试混合应用 四.以代码的方式执行 Pytest 命 ...

随机推荐

  1. iOS GIF图片转UIImage

    多平台保持统一风格的UI设计,少不了一些动态图片的使用 1.本地GIF图片使用 1.1 将本地GIF转为NSdata类型 NSData *tempdata = [NSData dataWithCont ...

  2. GraphicsLab Project 之 Curl Noise

    作者:i_dovelemon 日期:2020-04-25 主题:Perlin Noise, Curl Noise, Finite Difference Method 引言 最近在研究流体效果相关的模拟 ...

  3. 技术周刊 · 0202 年了,你还不学一下 WASM 么?

    蒲公英 · JELLY技术周刊 Vol.04 「蒲公英」期刊全新升级--JELLY技术周刊!深度挖掘业界热点动态,来自团队大咖的专业点评,带你深入了解团队研究的技术方向. 登高远眺 天高地迥,觉宇宙之 ...

  4. 手机app抓包[小米]

    方案一:(手机电脑在同一wifi下) 打开burp设置代理 这里的ip为电脑的ip 手机手动设置代理为电脑的ip+8080 导入证书 电脑上下载下证书(http://burp) 传到手机上

  5. 009.Ansible模板管理 Jinja2

    一 Jinja2简介 Jinja2是基于python的模板引擎. 假设说现在我们需要一次性在10台主机上安装redis,这个通过playbook现在已经很容易实现.默认情况下,所有的redis安装完成 ...

  6. Pytorch中自定义神经网络卷积核权重

    1. 自定义神经网络卷积核权重 神经网络被深度学习者深深喜爱,究其原因之一是神经网络的便利性,使用者只需要根据自己的需求像搭积木一样搭建神经网络框架即可,搭建过程中我们只需要考虑卷积核的尺寸,输入输出 ...

  7. 【三剑客】sed命令

    1. Sed 简介 sed 是Stream Editor(流编辑器)的缩写,是操作.过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行.   sed 是一种新型的,非交互式的编辑器. 它能执 ...

  8. webpack前端构建angular1.0!!!

    webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...

  9. 怎样借助Python爬虫给宝宝起个好名字

    每个人一生中都会遇到一件事情,在事情出现之前不会关心,但是事情一旦来临就发现它极其重要,并且需要在很短的时间内做出重大决定,那就是给自己的新生宝宝起个名字.因为要在孩子出生后两周内起个名字(需要办理出 ...

  10. CF--思维练习--CodeForces - 221C-H - Little Elephant and Problem (思维)

    ACM思维题训练集合 The Little Elephant has got a problem - somebody has been touching his sorted by non-decr ...