WebDriver 提供了8种元素的定位方法,分别是:
id 定位:find_element(By.ID, "kw")
name 定位: find_element(By.NAME, "")
tag 定位: find_element(By.TAG, "")
class 定位: find_element(By.CLASS_NAME, "")
link text 定位: find_element(By.LINK_TEXT, "")
partial link 定位: find_element(By.PARTIAL_LINK_TEXT, "")
XPath 定位: find_element(By.XPATH, "")
CSS_selector 定位: find_element(By.CSS_SELECTOR, "")
要使用这些定位方法,首先要了解页面元素的定位
了解html结构
打开一个页面,进入开发者模式,可以看到页面代码,这些html结构有下面这些特征:
1)它们由标签对组成
<html></html>
<body></body>
<div></div>
html、div是标签的标签名
2)标签有各种属性:id、name等
3)标签对之间可以有文本数据
4)标签有层级关系
<html>
<body>
</body>
</html>
<div>
<form>
<input />
</form>
<div>
如果把input看做子标签,那么form 就是它的父标签
如何定位元素
如果把页面上的元素看做人,那么在现实世界如何找人对应的人呢?
1)首先,可以通过人本身的属性进行查找,例如他的姓名、身份证号等;对应到页面元素上就是,id、name、class name、tag name。
2)其次,可以通过他的位置进行查找,例如,xx国、xx市、xx区、xx路、xx号;对应页面元素,可以使用XPath和css通过标签层级关系的方式进行查找。
3)最后,还可以借助相关人的属性来查找某人,例如,我可以通过小明爸爸联系到小明;XPath和css同样提供了相似的定位策略来查找元素
1、id定位
HTML规定,id在HTML文档中必须是唯一的,这类似与身份证号,具有唯一性。
2、name定位
HTML规定,name用来指定元素的名称,就像人名一样
3、class定位
HTML规定,calss 用来指元素的类名,用法跟id、name一样
4、tag定位
HTML用tag来定义不同页面的元素,例如,input一般用来定义输入框,a标签用来定义超链接等
标签往往用来定义一类功能,所以一个页面中一个标签就会有很多,所以通常不会用tag来定位元素
5、link定位
link专门用来定位文本链接
6、partial link定位
partial link是link定位的一个补充,有时候文本链接比较长,就可以取部分文本进行定位,只要这个文本可以唯一标识即可
7、XPath 定位
1)绝对路径
就是参考开发者工具所展示的代码层级结构,通过标签名的层级关系来定位元素的绝对路径;如果一个层级下有多个相同的标签名,那么就按照上下顺序确定是第几个,eg div[2]表示当前层级下第2个div标签
2)利用元素属性定位
eg,//input[@id='kw'] //input表示当前某个input标签,[@id='kw'] 表示这个元素的id是kw。也可以使用name 或者 class来定位
如果不想指定具体的标签名,可以使用*代替,eg,//*[@name='wd']
当然,使用的属性也不局限于这些,元素的任意属性都可以使用,只要它能唯一标识这个元素。
3)层级与属性结合定位
如果一个元素本身没有可以唯一标识的属性值,但是它的上一级元素可以唯一标识,,那就可以通过上一级 从而找到 改元素
eg,//span[@id='s_ipt_wr']/input 含义是,找到id是s_ipt_wr的span标签,从而找到它的子标签input
4)使用逻辑运算符定位
如果一个属性无法唯一区分元素,name可以使用逻辑运算符连接多个属性条件来查找元素
eg,//input[@id='kw' and @class='s_ipt']
5)使用contains方法
contains 方法用于匹配一个属性中包含的字符串,eg,//span[contains(@class, 's_ipt_wr')]/input
6)使用text()方法
用于匹配显示文本信息,eg,通过link text 定位文字链接://a[text(),'新闻']
该方法也可以跟contains方法配合使用
8、CSS定位
css是一种语言,用来描述HTML和XML文档的表现。css使用选择器为页面元素绑定属性。css选择器可以比较灵活的选择控件的任意属性,一般情况下,css的定位速度比XPath的定位速度快。
css的常见语法:
|---------------------|-------------------|-----------------------------|
| 选择器 | 例子 | 描述 |
| .class | .intro | class选择器,选择class为intro的所有元素 |
| #id | #firstname | id选择器,选择id为firstname的所有元素 |
| * | * | 选择所有元素 |
| element | p | 选择所有标签p的元素 |
| element>element | div>input | 选择所有父元素为div的所有input元素 |
| element+element | div+input | 选择同一级紧接在div元素后的所有input元素 |
| [attribute=value] | [target=_blank] | 选择所有target属性为_blank的元素 |
使用例如,find_element(By.CSS_SELECTOR,'.s_ipt')
也可以进行组合使用:find_element(By.CSS_SELECTOR,'form#form>span>input#kw')