元素定位
第一步,导入selenium模块的webdrivier包
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
窗口最大化
driver=maximize_window()
第二步,调用webdriver包的Chrome类,返回chrome浏览器对象
driver=webdriver.Chrome()
第三步,如使用浏览器一样开始对网站进行访问
设置等待3秒后打开目标网页
driver.implicitly_wait(3)
使用get方法访问网站
driver.get("https://www.baidu.com")
driver.find_element(By.ID,"kw").send_keys("selenium")
driver.find_element(By.ID,"su").click()
time.sleep(3)
退出浏览器
driver.quit()
常用元素定位方式
1.By.ID
通过id定位,By.ID
id属性在HTML中是唯一的,因此使用id定位可以确保找到页面上唯一的元素。
由于id是唯一的,浏览器在查找元素时可以快速定位到目标元素,提高了定位的效率
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.find_element(By.ID,"kw").send_keys("selenium")
driver.find_element(By.ID,"su").click()
time.sleep(3)
driver.quit()
2.By.CLASS_NAME
通过类名定位,By.CLASS_NAME
CLASS_NAME唯一或第一个
drive.find_element(By.CLASS_NAME,"nav-search-input").send_keys("yyds")
drive.find_element(By.CLASS_NAME,"nav-search-btn").click()
CLASS_NAME不唯一,查具体一个
drive.find_elements(By.CLASS_NAME,"channel-link")[4].click()
CLASS_NAME不唯一,
for ele in drive.find_elements(By.CLASS_NAME,"channel-link"):
print(ele.text)
3.By.TAG_NAME
通过标签名定位,By.TAG_NAME
一个网页,相同的标签的元素的概率非常高,因为我们尽量少通过tag_name定位单个元素
drive.find_element(By.TAG_NAME,"input").send_keys("yyds")
4.By.NAME
通过名称定位,By.NAME
name属性为表单中客户端提交数据的标识,一个网页中name值可能不是唯一的。所以要根据实际情况进行判断
drive.find_element(By.NAME,"wd").send_keys("yyds")
5.By.LINK_TEXT
通过链接文本定位,By.LINK_TEXT
使用链接的全部文字定位元素
drive.find_element(By.LINK_TEXT,"更多").click()
有多个时可用下角标选择具体一个
drive.find_elements(By.LINK_TEXT,"更多")[1].click()
6.By.PARTIAL_LINK_TEXT
通过链接部分文本定位,By.PARTIAL_LINK_TEXT
drive.find_element(By.PARTIAL_LINK_TEXT,"美食").click()
7.By.CSS_SELECTOR
通过css_selector定位,By.CSS_SELECTOR
当一个元素无法直接定位,也就是没有id,name等确定标识,这个时候我们需要考虑使用css selector定位器。
它是一种通过CSS样式选择器来定位元素的方法
CSS常用汇总
选择器 格式 示例 示例说明
标签选择器 html标签 input 选择所有元素
ID选择器 #id属性值 #kw 选择所有id='kw'的元素
类选择器 .class属性值 .nav-search-input 选择所有class='nav-search-input'的元素
属性选择器1 [属性名] [name="wd"] 选择所有name等于"wd"的元素
组合选择器 标签加属性描述 input.s_ipt 选择所有class='_ipt'的元素
父子关系 元素1>元素2 div>a 选择所有父级是
后代关系 元素1 元素2 div a 选择中的所有元素
第一子元素 :first-child a:first-child 选择所有元素且该元素是其父级的第一个元素
最后一个元素 :last-child a:last-child 选择所有元素且该元素是其父级的最后一个元素
顺序选择器 :nth-child(n) a:nth-child(2) 选择所有元素且该元素是其父级的第二个子元素
使用id属性定位,id前面要加#号
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, '#kw').send_keys("yyds")
通过class属性定位,class前面要加.
driver = webdriver.Chrome()
driver.get('https://www.bilibili.com')
driver.find_element(By.CSS_SELECTOR, '.nav-search-input').send_keys('yyds')
根据name属性定位,属性值为[name="wd"]
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, '[name="wd"]').send_keys("yyds")
根据标签属性定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, 'a[href="http://image.baidu.com/"]').click()
模糊匹配-包含
driver.find_element(By.CSS_SELECTOR, 'a[href*="image.baidu.com"]').click()
模糊匹配-匹配开头
driver.find_element(By.CSS_SELECTOR, 'a[href^="http://image.baidu"]').click()
模糊匹配-匹配结尾
driver.find_element(By.CSS_SELECTOR, 'a[href$="image.baidu.com/"]').click()
组合定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
input+name
driver.find_element(By.CSS_SELECTOR, 'input[name="wd"]').send_keys("软件测试老白")
input+class
driver.find_element(By.CSS_SELECTOR, 'input.s_ipt').send_keys("软件测试老白")
定位子元素
一般根据最近一个id属性往下找,可以根据class或者标签。
s-top-left > a
:nth-child(3)代表第几个子元素,下标从1开始
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
百度首页新闻,以下三种方式皆可
driver.find_element(By.CSS_SELECTOR, 'div.s-top-left-new.s-isindex-wrap a' ) # 根据class
driver.find_element(By.CSS_SELECTOR, 'div#s-top-left a') # 根据id
driver.find_element(By.CSS_SELECTOR, '#s-top-left a') # 简写
百度首页地图,以下2种方式皆可
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:nth-child(3)')
driver.find_elements(By.CSS_SELECTOR, '#s-top-left a')[2]
a:first-child 第一个标签
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:first-child')
a:last-child 最后一个标签
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:last-child')
8.By.XPATH
通过xpath定位,By.XPATH
xpath是什么?XPath 是一门在 XML 文档中查找信息的语言
xml是什么?XML(可扩展标记语言),主要用于传输数据
为什么可以使用xpath定位html?
XPath(XML路径语言)是一种用于在XML文档中定位元素的语言,它可以用于定位HTML文档中的元素。尽管XML和HTML是两种不同的标记语言,但HTML文档实际上可以视为XML文档的一种特定形式。
HTML文档的结构和标签嵌套遵循XML的基本规则,因此XPath可以有效地用于在HTML文档中定位元素。XPath通过使用元素的标签名、属性、层级关系等来指定元素的位置,从而实现定位。
XPath定位HTML元素的基本原则是,将HTML文档视为XML文档,并使用XPath表达式来描述元素的位置关系。XPath表达式可以使用标签名、属性、父子关系、索引等来选择特定的元素或元素集合。
XML知识参考:
https://www.runoob.com/dom/dom-nodetree.html
Xpath可以通过相对路径与绝对路径去定位元素,绝对路径从 HTML 根节点开始算,相对路径从任意节点开始。
说明 举例
从根节点开始选取(绝对路径) /html/div/
从任意节点开始选取(相对路径) //div,列举出所有div标签
选取当前节点的父节点 //input/.. 会选取 input 的父节点
选取属性,或者根据属性选取
使用id属性定位 //div[@id='id_value']
使用class属性定位 //a[@class="mnav"]
使用name属性定位 //div[@name='wd']
多个属性定位 //input[@name="wd" and @class="s_ipt"]
第n个元素,使用index定位 //div[@id="s-top-left"]/a[3]
最后一个元素 //a[@class="mnav"][last()]
属性包含某字段 //div[contains(@title,'text')]
属性以某字段开头 //div[starts-with(@title,'text')]
属性以某字段结尾 //div[ends-with(@title,'text')]
文本包含 //a[contains(text(),"网盘")]
文本等于 //span[text() = "菜单"]
同级弟弟元素 //div[@id'id']/following-sibling::div
同级哥哥元素 //div[@id'id']/preceding-sibling::div
使用绝对路径,一般不推荐绝对路径,因为写起来太麻烦了
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
定位百度首页的新闻
driver.find_element(By.XPATH, '/html/body/div/div/div[3]/a')
time.sleep(2)
下面使用相对路径定位
使用id属性定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.XPATH, '//input[@id="kw"]').send_keys("yyds")
使用class属性定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
class中间有空格,需要全部写上
driver.find_element(By.XPATH, '//a[@class="mnav c-font-normal c-color-t"]')
根据name属性定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.XPATH, '//input[@name="wd"]').send_keys("yyds")
由子元素定位父元素
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
定位输入框的父元素
driver.find_element(By.XPATH, '//input[@id="kw"]/..')
多个属性组合定位 支持and or
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.XPATH, '//input[@name="wd" and @class="s_ipt"]').send_keys("软件测试老白")
多组数据使用下标定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
定位百度首页地图
driver.find_element(By.XPATH, '//div[@id="s-top-left"]/a[3]')
根据文本内容定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
定位百度首页网盘
driver.find_element(By.XPATH, '//a[contains(text(),"网盘")]')
其它定位方式,轴定位
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
最后一个子元素,last()
driver.find_element(By.XPATH, '//a[@class="mnav c-font-normal c-color-t"][last()]')
动态ID
https://element.eleme.cn/#/zh-CN/component/cascader
driver.find_element(By.XPATH, '//span[text() = "默认 click 触发子菜单"]/following-sibling::div/div/input')
元素定位最佳顺序
1.ID(唯一标识):如果元素具有唯一的ID属性,优先使用ID进行定位,因为它是最快和最可靠的定位方式。
2.CSS选择器:如果元素没有唯一的ID,可以考虑使用CSS选择器进行定位。CSS选择器具有灵活的语法,并且在性能上通常比XPath更高效。
3.类名(class):如果元素没有唯一的ID或合适的CSS选择器,可以使用元素的类名进行定位。尽量选择具有明确含义的类名,并避免选择过于通用的类名。
4.Name属性:如果元素具有唯一的name属性,可以使用name属性进行定位。但要注意,name属性并不是所有元素都具有的,所以不是一种通用的定位方式。
5.XPath:如果前面的方式都无法定位元素,可以使用XPath进行定位。XPath提供了强大的定位功能,但在性能上相对较低,因为XPath需要遍历整个文档,直到找到匹配的元素。暂无性能对比数据,我觉得好用就用,及时行乐。
6.标签名(TagName):如果元素无法使用上述方式进行定位,可以考虑使用标签名进行定位。但要注意,标签名定位方式通常会返回多个匹配的元素,需要结合其他条件来缩小范围。
元素定位建议
1.在定位列表的元素时,尽量根据文本信息定位而不是下标(比如百度首页的左上角,可能顺序会打乱,后台配置)
2.相对定位时,尽量选择不易改变的元素作为锚点,比如拥有id的元素或者一个目录。比如后台管理系统中的主菜单,比如H5页面的tab
3.如果关系好,可以让开发多加一些id,不要勉强。现在的前端开发都用的框架,html,css,js等都是由框架定义的了