【某机构vip教程】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

总结

如果你对此文有任何疑问，如果你也需要接口项目实战，如果你对软件测试、接口测试、自动化测试、面试经验交流感兴趣欢迎加入我们，加入方式在文章的最后面

自动化测试相关教程推荐：

2023最新自动化测试自学教程新手小白26天入门最详细教程,目前已有300多人通过学习这套教程入职大厂！！_哔哩哔哩_bilibili

2023最新合集Python自动化测试开发框架【全栈/实战/教程】合集精华，学完年薪40W+_哔哩哔哩_bilibili

测试开发相关教程推荐

2023全网最牛，字节测试开发大佬现场教学，从零开始教你成为年薪百万的测试开发工程师_哔哩哔哩_bilibili

postman/jmeter/fiddler测试工具类教程推荐

讲的最详细JMeter接口测试/接口自动化测试项目实战合集教程，学jmeter接口测试一套教程就够了！！_哔哩哔哩_bilibili

2023自学fiddler抓包，请一定要看完【如何1天学会fiddler抓包】的全网最详细视频教程！！_哔哩哔哩_bilibili

2023全网封神，B站讲的最详细的Postman接口测试实战教学，小白都能学会_哔哩哔哩_bilibili

总结：

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

​​​

​​​

如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。

如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步

在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。

我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，

测试开发视频教程、学习笔记领取传送门！！

​

​