WebDriver八种基本定位方式详解（xpath+css）

本文链接：https://blog.csdn.net/lianisgood/article/details/85545197

WebDriver提供八种元素定位方法，在python语言中对应方法如下：

id →name
class name →tag name
link text →partial link text
xpath→css selector
find_element_by_id()→find_element_by_name()
find_element_by_class_name()→find_element_by_tag_name()
find_element_by_link_text()→find_element_by_partial_link_text(
find_element_by_xpath()→find_element_by_css_selector()

1、id定位

HTML规定id属性在HTML中必须是唯一的，这类似于公民的身份证号，具有很强的唯一性，WebDriver提供的id定位方式就是通过元素的id属性来查找元素，通过id定位百度的输入框和搜索按钮，用法如下:
在这里插入图片描述

find_element_by_id(“kw”)
find_element_by_id(“su”)

2、name定位

HTML规则name来指定元素的名称，因此他的作用更像是人的姓名，name的属性值，在HTML文档中可以不唯一，通过name定位百度输入框：

find_element_by_name(“wd”)

3、class定位

HTML规定class来指定元素的类名，用法和id、name类似，通过class定位百度输入框和搜索按钮：

find_element_by_class_name(“s_ipt”)
find_element_by_class_name(“bg_s_btn”)

4、tag定位

HTML的本质就是通过tag来定义实现不同的功能，每一个元素本质上就是一个tag。因为一个tag往往用来定义一类功能，所以通过tag识别某个元素的概率比较低，例如我们打开一个页面，会看到大量的<div> <input>等tag，故使用tag定位百度的搜索框以及按钮时候，会发现都是<input>

find_element_by_tag_name(“input”)

这样定位到的元素是不唯一的。

5、link定位

link专门用来定位文本链接，例如百度的新闻、地图链接等可以这样定位：

find_element_by_link_text(“新闻”)
find_element_by_link_text(“地图”)

6、partial link定位

partial link定位是link定位的一种补充，有些文本链接比较长，这时可以取文本链接的一部分定位，只有这一部分信息可以唯一地标识这个链接：
eg:

<a calss=“xxx” name=“xxxx” herf="#">一个非常长的文本链接xxxxxxxx<\a>

通过partial link定位：

find_element_by_partial_link_text(“一个非常长的”)
find_element_by_partial_link_text(“文本链接”)

理想状态下，页面中每个元素都有一个唯一的id name属性值，我们可以使用 id 、name属性定位元素，然而，现实并没有这般美好，很多时候元素并没有id name属性，或者多个元素的name属性值相同，又或者每次刷新页面，id都会随机变化，这些情况下，使用上述定位方式略显尴尬，我们需要使用Xpath CSS定位

7、xpath定位

xpath 是一种再XML文档中定位元素的语言。因为HTML可以看做XML的一种实现，所以可以使用xpath定位方式。

7.1 xpath 基本概念：

XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档（根）节点。XML 文档是被作为节点树来对待的。树的根被称为文档节点或者根节点。

节点之间：父子同胞先辈后代

最常用的路径表达式：

表达式	描述
/	从根节点选取
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置
.	选取当前节点
…	选取当前节点的父节点
@	选取属性

谓语（Predicates）
谓语用来查找某个特定的节点或者包含某个指定的值的节点。
谓语被嵌在方括号中。

选取未知节点
XPath 通配符可用来选取未知的 XML 元素。

通配符	描述
*	匹配任何元素节点
@*	匹配任何属性节点
node()	匹配任何类型的节点

7.2 xpath 常用方式

7.2.1绝对路径定位

绝对路径就是写出元素的绝对路径，如果把元素看成一个人的话，，假设这个人没有任何属性特征（手机号、姓名、身份证号），但是这个人一定存在于某个地理位置，如中国xx省xx市xx区xx路xx号，对应页面元素而言，也会有这样一个绝对地址。
如：

find_element_by_xpath("/html/body/div/div[2]/div/div/div/form/span/input")

绝对路径是从最外层html/body文本内，一级一级的向下查找，如果一个层级下有多个相同的标签名，那么就按上下顺序确定是第几个，例如 div[2]表示当前层级下的第二个标签。

7.2.2 利用元素属性定位

xpath可以使用元素的属性值来定位，属性值使用@
eg(百度搜索框):

find_element_by_xpath("//input[@id=“su”]")
find_element_by_xpath("//*[@id=“su”]")

其中：//表示当前路径下，input表示定位元素的标签名，如果不想使用标签名，可以使用（*）代替，因为选用的属性id属性值时唯一的，[@id=“su”]表示元素的属性值等于kw

7.2.3 层级与属性结合

如果一个元素本身没有可以唯一表述的属性值，那么可以找其上一级的元素，如果上一级元素有唯一标识的属性值，也可以使用，如：#file-class-contain > ul:nth-child(1) > li

find_elemet_by_xapth("//*[@id=“datasHtml”]/div[1]/div[1]/button[6]")
find_elemet_by_xapth(“file-class-contain > ul:nth-child(1) > li”)

如果父级不能唯一定位，也可以再向上找，意思就是只要找到一个可以唯一定位的层级，然后又向下定位要定位的元素。

7.2.4 使用逻辑运算符

还可以使用逻辑运算符连接多个属性值来查找元素，如and

find_elemet_by_xapth("//input[@id=‘kw’ and @class=‘su’]/span/input")

7.3 xpath 定位实例

谷歌火狐浏览器自带的开发者工具都可以很方便的使用xpath定位元素。
如谷歌浏览器：
打开F12，定位到元素，copy --> copy xpath可以直接获取xpath定位方式。如果拷贝出来特别长的话，自己修改后，复制到F12的搜索框（Ctrl+F调出）中回车验证是否可以选中元素，标黄部分代表可以选中。如果定位的元素不是唯一值时，回车时会在多个值之间切换显示。

在这里插入图片描述

其实，我们很多时候，并不是希望只是单纯的可以定位到这个元素，尤其是处理界面上添加的数据的时候，我们很希望可以作为参数，添加的数据，可以通过name或者其他属性定位到，以便进行后续的其他操作。
例如：
这是某个软件的某个页面，界面可以添加数据，添加完可以进行编辑、删除操作。
在这里插入图片描述
通过xpath我们可以将此元素定位到：

#tableData > tr > td:nth-child(2)

可是这样的定位方式太局限了，我们并不是每次都知道它准确的处于第几个位置，此时可以使用属性值来定位：
在这里插入图片描述

#tableData > tr > td[title=‘CPU利用率’]

同理，在实际使用中， td[title=‘CPU利用率’] 中可替换为参数，如下所示，这样就可以直接定位到界面上新添加的元素了，也方便后续的编辑删除操作。

" #tableData > tr > td[title=’ " + kpiName + " '] "

8、CSS定位

CSS （Cascading Style Sheets）是一种语言，它用来描述HTML XML文档的表现，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> 元素
[attribute]	[target]	选择带有 target 属性所有元素