Selenium八种元素定位方法
不论是做web项目还是app项目的UI自动化,都是去操作页面中的元素,首先我们要找到这些元素,才能操作这些的元素,那这些元素我们应该怎么来定位呢?selenium官网
一、元素定位
1、什么叫作元素?
1)元素:
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
2)标签:
标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,
绝大部分的标签都是成对出现的,如<table></talbe>、<form></form>。
当然还有少部分不是成对出现的,如<br>、<hr>等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
3)属性:
为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。
示例:
<html>
<head> <title>示例标题</title> </head>
<body bgcolor="red">
<p>这是示例页面</p>
</body>
</html>
在这个示例中,<p>这是示例页面</p>就是HTML元素,其中“这是示例页面”就是元素的具体内容了。
<head><title><body>等就是HTML标签,这是标签构成了HTML元素。
<body bgcolor="red">中的bgcolor="red"就是标签的属性,它定义了标签应该如何具体配置。
元素定位:就是通过元素的信息或元素层级结构来定位元素的。
谷歌浏览器,按F12出现右侧的检查栏,点击鼠标,然后再点击页面中的元素,则可以找到该元素的组成代码。
二、元素定位方式
Selenium提供了八种定位元素方式
1、id
2、name
3、class_name:class属性
4、tag_name:标签名称
5、link_text:超链接 a标签
6、partial_link_text:超链接 a标签(模糊)
7、xpath:路径(绝对路径、相对路径)
8、CSS:选择器
汇总:
1、基于元素属性特有定位方式(id、name、class_name)
2、基于元素标签名称定位(tag_name)
3、定位超链接文本(link_text、partial_link_text)
4、基于元素路径定位(xpath)
5、基于选择器(css)
注:结合百度的页面来使用不同的定位方式
1、id定位
说明:id定位就是通过元素的id属性来定位元素,HTML 规定id属性在整个HTML文档中必须是唯一的;
前提:元素有id属性
- id定位的方法
driver.find_element_by_id(id)
- 实例
百度首页搜索框属性中,有个id="kw"的属性,我们可以通过这个id定位到这个搜索框,在搜索框输入selenium
import time
from selenium import webdriver
# 打开浏览器驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过id定位搜索框,并输入selenium
driver.find_element_by_id('kw').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()
2、name定位
说明:name定位就是根据元素name属性来定位。HTML文档中name的属性值是可以重复的。
前提:元素有id属性
- name定位的方法
driver.find_element_by_name(name) --页面唯一name
driver.find_elements_by_name(name)[下标] --页面多个name重复,使用下标,下标从0开始
- 实例
百度首页的搜索框属性中,有个name="wd"的属性,我们可以通过这个name定位到这个搜索框,在搜索框输入selenium
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过name定位搜索框,并输入selenium
driver.find_element_by_name('wd').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()
3、class name定位
说明: class name定位就是根据元素class属性值来定位元素。HTML通过使用class来定义元素的样式
前提:元素有class属性
注意:如果class有多个属性值,只能使用其中的一个
class="bg s_ipt_wr new-pmd quickdelete-wrap" class一共4个值bg、s_ipt_wr、new-pmd、quickdelete-wrap
- class name定位的方法
driver.find_element_by_class_name(class_name) --页面唯一class name
driver.find_elements_by_class_name(class_name)[下标] --页面多个class name重复,使用下标,下标从0开始
- 实例
搜索框属性中,有个class="s_ipt"的属性,我们可以通过这个class定位到这个搜索框,在搜索框输入selenium
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过class name定位搜索框,并输入selenium
driver.find_element_by_class_name('s_ipt').send_keys('selenium')
# 等待5秒
sleep(5)
# 退出
driver.quit()
4、tag name定位
说明: tag name定位就是通过标签名来定位;查看元素时尖括号(<)紧挨着的单词或字母就是标签名;
HTML本质就是由不同的tag组成,每一种标签一般在页面中会存在多个,所以不方便进行精确定位,一般很少使用。
- tag name定位的方法
driver.find_element_by_tag_name(tag_name) --如果存在多个相同标签,则返回符合条件的第一个标签
driver.find_elements_by_tag_name(tag_name)[下标] --页面多个tag name重复,使用下标,下标从0开始
- 实例
注:如下图我们定位百度页面的左上角的新闻是a标签,从上往下数第5个a标签,所以得出下标为4,使用find_elements_by_tag_name(tag_name)[下标]
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过tag name标签a定位"新闻",并点击
driver.find_elements_by_tag_name("a")[4].click()
# 等待5秒
sleep(5)
# 退出
driver.quit()
5、link_text定位
说明:link_text定位超链接标签(a标签)--精准匹配
注意:link_text只能使用精准匹配(a标签的全部文本内容)
- link_text定位的方法
driver.find_element_by_link_text(a标签的全部文本内容)
- 实例
此处定位百度首页的新闻a标签,则需要用新闻的a标签中的全部文本内容:"新闻"
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过link_text定位"新闻"的a标签,并点击
driver.find_element_by_link_text("新闻").click()
# 等待5秒
sleep(5)
# 退出
driver.quit()
6、partial_link_text定位
说明:partial_link_text定位超链接标签(a标签)--模糊匹配
注意:
1.可以使用精准或模糊匹配,如果使用模糊匹配最好使用能代表唯一的关键词;
2.如果有多个值,默认返回第一个值;
- partial_link_text定位的方法
driver.find_element_by_partial_link_text(a标签的部分文本内容)
- 实例
有时候一个超链接的文本很长很长,我们如果全部输入,既麻烦,又显得代码很不美观,这时候我们就可以只截取一部分字符串,用这种方法模糊匹配了。
我们用这种方法来定位百度首页的"新闻"超链接,取其中一个"闻"字来进行匹配.
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过partial_link_text定位搜索框,并点击
driver.find_element_by_partial_link_text("闻").click()
# 等待5秒
sleep(5)
# 退出
driver.quit()
7、xpath定位
为什么使用xpath和css定位?
1、id,name,class:依赖于元素这三个对应的属性,如果元素没有以上三个属性,定位方法不能使用;
2、link_text,partial_link_text:只适合超链接;
3、tag name: 页面中相同元素太多,定位比较复杂
1)xpath介绍
xpath(全称:XML Path Language)即 XML 路径语言,它是一门在 XML 文档中查找信息的语言,最初被用来搜寻 XML 文档,同时它也适用于搜索 HTML 文档。
2)xpath常用定位
- 路径
- 绝对路径:以单斜杠开头逐级开始编写,不能跳级。如: /html/body/div/p[1]/input
- 相对路径:以双斜杠开头,双斜杠后边跟元素名称,不知元素名称可以使用代替。如://input或者// *
- 路径结合属性:在Xpath中,所有的属性必须使用@符号修饰如: //*[@id='id值']
- 路径结合逻辑(多个属性)://*[@id='id值' and @属性='属性值']
- 路径结合层级://*[@id='父级id属性值']/input
Xpath拓展
//* [text()='XXX'] # 定位文本值等于XXX的元素
提示:一般适合p标签,a标签
//* [contains(@属性,'xxx')] # 定位属性包含xxx的元素【重点】
提示:contains为关键字,不可更改。
//* [starts-with(@属性,'xxx')] # 定位属性以xxx开头的元素
提示:starts-with为关键字不可更改
3)提示
- 一般建议使用指定标签名称,不使用*代替,效率比较慢
- 无论是绝对路径和相对路径,/后面必须为元素的名称或者*
- 如果能使用相对路径绝对不使用绝对路径
- xpath定位的方法
driver.find_element_by_xpath(xpath)
- 实例
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过xpath绝对定位搜索框,并输入adb
driver.find_element_by_xpath("/html/body/div/div/div[5]/div/div/form/span/input").send_keys("adb")
# 通过xpath路径结合属性定位搜索框,并输入adb
driver.find_element_by_xpath("//*[@id='kw']").send_keys("adb")
# 等待5秒
sleep(5)
# 退出
driver.quit()
8、CSS定位
说明:
1.css一种标记语言,焦点:数据的样式。控制元素的显示样式,就必须先找到元素,在css标记语言中找元素使用css选择器;
2.css定位就是通过css选择器工具进行定位。
3.极力推荐使用,查找元素的效率比xpath高,语法比xpath更简单。
1)CSS定位常用策略(参考百度首页输入框)
-
id 选择器
- 前提:元素是必须有id属性
- 语法:#id
- 如:#kw
-
class 选择器
- 前提:元素是必须有class属性
- 语法:.class
- 如:.s_ipt
-
元素选择器
- 语法:element
- 如:input
-
属性选择器
- 语法:[属性名=属性值]
- 如:[autocomplete="off"]
-
层级选择器
- 语法:
- p>input
- p input
提示:>与空格的区别,>后面跟的必须为子元素,空格则并不一定为子元素
css拓展
[属性^='开头的字母'] # 获取指定属性以指定字母开头的元素
[属性$='结束的字母'] # 获取指定属性以指定字母结束的元素
[属性*='包含的字母'] # 获取指定属性包含指定字母的元素
百度首页搜索框:
绝对路径xpath:/html/body/div/div/div[5]/div/div/form/span/input
路径结合属性xpath:// * [@id='kw']
css:#kw
- css定位的方法
driver.find_element_by_css_selector(css)
- 实例
import time
from selenium import webdriver
# 驱动文件路径
driverfile_path = r'D:\pydemo\login\chromedriver.exe'
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r'https://www.baidu.com/')
# 通过css中的id定位搜索框,并输入adb
driver.find_element_by_css_selector("#kw").send_keys("adb")
# 通过css中的class name定位搜索框,并输入adb
driver.find_element_by_css_selector(".s_ipt").send_keys("adb")
# 等待5秒
sleep(5)
# 退出
driver.quit()