Selenium(7):元素定位_css_selecto定位
Css_selector是什么
CSS是一个被用来描述如何在屏幕等处渲染HTML和XML文档的语言。CSS使用选择器来为文档中的元素绑定样式属性。
选择器(selector)是用来在树中匹配元素的模式,选择器对HTML和XML进行了优化,被设计用来在注重性能的代码中执行。Selenium官网的Document里极力推荐使用Css_selector,而不是XPath来定位元素。
Css_selector常用如下6种定位元素的方法(不支持文本定位)
1、通过绝对路径定位
绝对路径是从网页的根节点html开始,逐层去查找需要定位的元素。
此方法缺点显而易见,当页面元素位置发生改变时,都需要修改,因此,并不推荐使用。
代码如下:
以百度首页搜索框为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 绝对路径定位 # 以html body为开头,使用空格分开层次结构 遇到id使用# 遇到class使用. driver.find_element(By.CSS_SELECTOR,'html body div#wrapper.wrapper_new div#head div#head_wrapper.head_wrapper.s-isindex-wrap.nologin div.s_form.s_form_nologin div.s_form_wrapper.soutu-env-nomac.soutu-env-index form#form.fm span.bg.s_ipt_wr.new-pmd.quickdelete-wrap input#kw.s_ipt').send_keys('python')
备注:当同一层次有多个相同的元素时,使用id或class区分,遇到id用#号,遇到class用.号
2、通过相对路径定位
相对路径表示文件中所有符合模式的元素都会被选出来,即使是处于树中不同的层级也会被选出来。
代码如下:
以百度首页搜索框为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 相对路径定位 driver.find_element(By.CSS_SELECTOR,'input#kw').send_keys('python') driver.find_element(By.CSS_SELECTOR,'span input#kw').send_keys('python')
备注:以上都可以定位到百度搜索框,相对路径的长度和开始位置并不受限制,可以采用从后往前逐层定位直到定位到即可的方式去定位。
3、使用元素属性定位
元素属性定位要求属性能够定位到唯一一个元素,如果存在多个相同条件的标签,默认定位第一个;
具体格式:标签名[属性="属性值"]
支持使用多个属性一起定位元素:标签名[属性1="属性值1"][属性2="属性值2"]
代码如下:
以百度首页搜索框为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 元素属性定位 # 语法格式:标签名[属性名="属性值"] 标签名[属性名1="属性值1"][属性名2="属性值2"] driver.find_element(By.CSS_SELECTOR,'input[maxlength="255"]').send_keys('python') driver.find_element(By.CSS_SELECTOR,'input[maxlength="255"][name="wd"]').send_keys('python')
4、使用部分属性值匹配(也称为模糊方法定位)
属性值如果太长或网页中的元素属性动态变化,可以使用此方法
元素属性值比对字符串开头:^=
元素属性值比对字符串结尾:$=
元素属性值比对字符串包含:*=
代码如下:
以百度首页的链接为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 部分属性值定位 # ^=比对字符串开始 *= 比对字符串包含 $= 比对字符串结尾 driver.find_element(By.CSS_SELECTOR,'a[href^="https://haokan"]').click() driver.find_element(By.CSS_SELECTOR,'a[href*="haokan"]').click() driver.find_element(By.CSS_SELECTOR,'a[href$="sfrom=baidu-top"]').click()
5、查询子元素
1)子元素 A>B
driver.find_element(By.CSS_SELECTOR,'form>span>input')
2)后代元素 A空格B(类似>)
driver.find_element(By.CSS_SELECTOR,'form span input')
3)第一个后代元素:first-child
driver.find_element(By.CSS_SELECTOR,'form input:first-child')
4)最后一个后代元素:last-child
driver.find_element(By.CSS_SELECTOR,'form input:last-child')
5)第n个子元素:nth-child(N)[类同:nth-of-type(N)]
driver.find_element(By.CSS_SELECTOR,'form input:nth-child(5)')
driver.find_element(By.CSS_SELECTOR,'form input:nth-of-type(15)')
代码如下:
以百度首页为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 查询子元素 # >表示子元素 driver.find_element(By.CSS_SELECTOR,'form>span>input').send_keys('python') # 空格表示后代元素(类似>) driver.find_element(By.CSS_SELECTOR,'form span input').send_keys('python') # 第一个后代元素 :first-child a = driver.find_element(By.CSS_SELECTOR,'form input:first-child').get_attribute('name') print( a ) # ie # 最后一个后代元素 :last-child 如果是儿子/孙子都存在,是孙子在最后面一个 b = driver.find_element(By.CSS_SELECTOR,'form input:last-child').get_attribute('value') print( b ) # 百度一下 # 第N个子元素 :nth-child(N)等同于:nth-of-type(N) c = driver.find_element(By.CSS_SELECTOR,'form input:nth-child(5)').get_attribute('name') d = driver.find_element(By.CSS_SELECTOR,'form input:nth-of-type(15)').get_attribute('name') print( c ) # ch print( d ) # rsv_dl
6、查询兄弟元素
1)同层级下一个元素 +
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a')
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a+a+a')
2)选择同层级多个相同标签的元素 ~
driver.find_elements(By.CSS_SELECTOR,'div#s-top-left a~a')
代码如下:
以百度首页为例
import os from selenium import webdriver from selenium.webdriver.common.by import By current_path = os.path.dirname(os.path.abspath(__file__)) # 当前路径 driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe') # driver路径 driver = webdriver.Chrome(executable_path=driver_path) # Firefox,Ie等 driver.get('https://www.baidu.com/') # 打开网站 # 兄弟元素 # 同层级下一个元素 + driver.find_element(By.CSS_SELECTOR,'div#s-top-left a').click() # 新闻 driver.find_element(By.CSS_SELECTOR,'div#s-top-left a+a+a').click() # 地图 # 选择同层级多个相同标签的元素 ~ s = driver.find_elements(By.CSS_SELECTOR,'div#s-top-left a~a') s[0].click() # hao123
备注:+号可以多次使用 ,~号一般返回的是多个元素,要用find_elements接收