Xpath元素定位


1.HTML基础知识

首先我们来看下案例网页,百度首页

 我们可以看到,一个网页,里面有各种各样的组件。比如,图片、输入框、下拉框、还有各种动画效果。那么,如果要开发一个网页,必须先掌握哪3个编程语言呢?开发网页的基础,就是HTML、CSS、Java Script三门语言。当然我们如果只是做自动化,那只需要稍微了解一下相关知识就可以了。

HTML,官方的全称呢,是超文本标记语言。这个名字有点冗长啊。我们只需要知道,HTML,本质上就是一个标签语言,就行了,它就是由各种各样的标签构成的。

标签语言,常见的标签有:
a: 超链接
img: 图片
input:输入框、文件上传
button:按钮
select:下拉框
iframe:窗体
p:文字
。。。。。
通用:li、div、span。。。

PS:div,可以做成文本框、可以做成按钮、可以做成下拉框,搭配到CSS就能实现各种效果

来看一下页面实际代码。我们按F12,打开开发者工具,这个开发者工具是我们做自动化经常要用的:

 我们看到这个开发者工具有许多功能页面,我们通常搞自动化测试的,只需要关注Elements这个页签就够了。这个页签里,装载着我们网页的页面代码。然后,我们可以使用左上角这个指针工具,左键点击网页上的任意地方,可以看到Elements里,会同步展现出你所指的地方对应的网页代码。

然后,我们可以使用左上角这个指针工具,左键点击网页上的任意地方,可以看到Elements里,会同步展现出你所指的地方对应的网页代码。那么让我们看下不同的页面元素,代码大概是个什么样子的。

百度搜索框

对应页面代码,使用了input标签:

 页面超链接

 对应页面代码,使用了a标签:

 整个网页,就是由各种各样的标签组成的。那么我们经常讲元素定位,元素定位。我们定位的页面元素到底是什么呢?就是我们刚刚看的这些标签。

页面元素 == 标签

大家不要被这满屏的标签代码给吓到了,下面我用最简单的方式教大家来认识这些标签。

标签基本格式:
text

tagName 就是标签名,attribute1、attribute2就是属性,引号里就是属性的值,尖括号之间的是文本,文本一般多用于超链接

标签还有另外一种简单的写法

这两个就是标签的语法,万变不离其宗。

元素定位,就等于定位页面标签

以上就是我们需要掌握的HTML基础知识。

2.XPATH元素定位基础

在UI自动化所有的元素在操作前都是需要定位的,在Python+Selenium中,定位元素都是基于find_element来实现的,在定位到元素之后,会返回一个WebElement对象,执行后续被操作的行为。

在自动化测试中,有且仅有八种元素定位的手段:
1. id
2. name
3. link text
4. partial link text
5. classname
6. tagname
7. cssselector
8. xpath

这8种不同的定位方法,目前最主流的元素定位是Xpath和CSSSELECTOR,为什么不用id、name进行定位呢,因为很多前端开发工程师开发过程中不太严谨,经常使用重名的id和name,或者甚至没有。

Xpath是非常强大的,我们之前也说了,它能解决9999种定位,唯一不能解决的就是伪元素,这个可以通过CSS定位解决。

接下来,我先给各位撸个简单的XPATH元素定位自动化代码案例

#导入第三方包
from selenium import webdriver
from time import sleep

#加载驱动
driver = webdriver.Chrome()
#打开网页
driver.get('http://www.baidu.com')

#输入关键字,并搜索
driver.find_element_by_xpath('//*[@id="kw"]').send_keys("赘婿")

这就是我们最简单的一个使用了xpath定位的自动化用例

什么是XPATH

Xpath 是一种用在 XML 文档中定位元素的语言,同样也支持 HTML 元素的解析。
所谓 Xpath,是指 XML path language。path 就是路径,那么 Xpath 主要是通过路径来查找元素。

HTML树状结构

先介绍一下HTML树状结构
HTML 的结构就是树形结构,HTML 是根节点,所有的其他元素节点都是从根节点发出的。其他的元素都是这棵树上的节点Node,每个节点还可能有属性和文本。而路径就是指某个节点到另一个节点的路线。

节点之间存在各种关系:

父节点(Parent): HTML 是 body 和 head 节点的父节点;
子节点(Child):head 和 body 是 HTML 的子节点;
兄弟节点(Sibling):拥有相同的父节点,head 和 body 就是兄弟节点。title 和 div 不是兄弟,因为他们不是同一个父节点。
祖先节点(Ancestor):body 是 form 的祖先节点,爷爷辈及以上??;
后代节点(Descendant):form 是 HTML 的后代节点,孙子辈及以下??。

xpath定位形式类似于文件系统,根据路径来查找页面元素

如电脑盘符
?C:\Users\Public\Win\QyConfig.ini

绝对路径和相对路径

绝对路径
D:/py3/CM..
相对路径
../

这个就是绝对路径和相对路径的一个基本形态。

那么我们自动化测试中,经常要碰到的绝对路径和相对路径是什么样子的呢,我用开发者工具,先复制一个绝对路径,我们来看一下。

绝对路径:/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input

自动化一般不用绝对路径来定位

我们看到就这个输入框,你要用绝对路径自己手写出来,得数个9到10层,因此维护的时候,如果出错,比较难判断。

最常用的还是相对路径,同样的,我先复制一个相对路径。

 相对路径: //*[@id="kw"] (复制搜索框的相对路径)

  // 任意节点出发
  * 所有的元素
  [] 筛选条件
  @ 通过属性来筛选
  text() 通过text文本筛选
  "" 查找的值

这个表达式的意思就是操作所有id='kw'的元素

开发者工具里,有专门验证xpath表达式的地方,按ctrl+f可以打开

 标黄的就是我们百度搜索框的页面元素代码,里头有input页签,id属性(值为kw),class属性(值为s_ipt)等等属性以及对应的值

然后说下刚刚我用的COPY的使用问题,有人可能会有疑问。既然可以直接拷贝生成Xpath代码,为什么还要学着写。这个是这样的,因为有时候拷贝的代码比较冗长,可读性不好。所以咱们大部分时候还是需要自己编写xpath代码来定位的。

3.XPATH元素定位进阶

实际编写自动化测试用例过程中,可能会碰到各种奇奇怪怪的标签,比如没有唯一的属性,或者属性值特别长(如超链接的herf属性),接下来学习一下各种不同姿势进行元素定位的方法

逻辑定位:
如果元素的某个属性无法精确定位到这个元素,我们还可以用逻辑运算符 连接多个属性进行定位,逻辑运算符有以下三个:
and :与
or : 或
| : 并集

例子:

and: //*[@id='kw' and @type='text']

//*[@id='kw'  or @name='不存在']

  //*[@id='kw'] | //*[text()='直播']

有多个结果,结果1:

 结果2:

谓语定位:
谓语是 Xpath 中用于描述元素位置。主要有
数字下标
最后一个子元素last()
元素下标函数position()。

例子:

数字下标://form/input[3]

 last():  例://form/span[1]/input[last()]

 倒数第几个://form/span[last()-2]/input

position函数:

//form/span[position()=2] 

//form/span[position()>2] 

超链接

 //*[text()="地图"]

xpath的函数
contains:通过模糊查找的行为查找元素的属性或者文本,继而查找到这个元素
//*[contains(@id,'kw')]

//*[contains(text(),'地')]

 当然还有starts-with、end-with函数,但是不推荐用,因为经常会报错