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标签：

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

页面元素 == 标签

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

标签基本格式：

<tagName attribute1="xxxx" attribute2="www">text</tagName>

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

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

<tagName1 attribute1="xxxx" 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 的祖先节点，爷爷辈及以上