Python+Selenium+Unittest 之selenium8--元素定位7-CSS定位2

刘阿童木

已于 2023-08-02 00:00:09 修改

阅读量359

点赞数

分类专栏： web自动化文章标签： selenium css 测试工具

于 2023-08-01 23:56:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42893232/article/details/131416048

版权

web自动化专栏收录该内容

17 篇文章

订阅专栏

本文介绍了CSS中常用的四种定位方法：其他属性定位（如[元素属性=唯一元素]），组合属性定位（标签+属性），层级定位（类似XPath的/），以及CSS索引。还展示了如何在Selenium中应用这些定位技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来说下剩下的几种常用表达式。

一、其他属性定位("[元素属性='唯一元素']")

二、组合属性定位（标签+属性）

三、层级定位

四、css索引

表达式	含义
*	定位所有元素
.	定位class属性
#	定位id属性
tag_name	定位tag_name
[元素属性="元素"]	其他属性定位
标签#id、标签.class、标签[元素属性='元素']	标签+属性定位
A元素>B元素	层级定位、定位绝对路径（相当于xpath的/）
tag:first-child	定位第1个标签，且第1个标签必须为tag
tag:last-child	定位最后1个标签，且最后1个标签必须为tag
tag:nth-child(n)	定位第n个标签，且第n个标签必须为tag
tag:nth-last-child(n)	定位倒数第n个标签，且倒数第n个标签必须为tag

一、其他属性定位("[元素属性='唯一元素']")

在CSS中如果要定位其他元素属性的话，可以使用"[元素属性='唯一元素']"来进行定位，具体语法为。

find_element_by_css_selector('[元素属性="元素"]')

from selenium import webdriver  #导入selenium模块的webdriver
driver = webdriver.Chrome()     #webdriver.Chrome()是启动谷歌浏览器然后定义成变量driver
driver.get("https://www.baidu.com")   #打开百度浏览器
driver.find_element_by_css_selector('[name="wd"]').send_keys('放假安排')   #定位到输入框，然后输入框输入 放假安排

也可以使用两个其他属性进行定位。

from selenium import webdriver  #导入selenium模块的webdriver
driver = webdriver.Chrome()     #webdriver.Chrome()是启动谷歌浏览器然后定义成变量driver
driver.get("https://www.baidu.com")   #打开百度浏览器
driver.find_element_by_css_selector('[name="wd"][autocomplete="off"]').send_keys('放假安排')   #定位到输入框，然后输入框输入 放假安排

二、组合属性定位（标签+属性）

在css中也可以通过标签+属性的方式进行定位，常见的几种方式如下：

find_element_by_css_selector("标签#id")                 #使用标签+id的方式定位
find_element_by_css_selector("标签.class")              #使用标签+class的方式定位
find_element_by_css_selector("标签[元素属性='元素']")   #使用标签+其他属性的方式定位

使用这几种方式分别定为输入框。（后面两行加上注释了，想体验哪种方式，把注释去掉即可，因为会对输入框进行操作，所以同时只能使用一种方式定位）

from selenium import webdriver  #导入selenium模块的webdriver
driver = webdriver.Chrome()     #webdriver.Chrome()是启动谷歌浏览器然后定义成变量driver
driver.get("https://www.baidu.com")   #打开百度浏览器
driver.find_element_by_css_selector('input#kw').send_keys('放假安排')   #使用标签+id的方式定位
#driver.find_element_by_css_selector('input.s_ipt').send_keys('放假安排')  #使用标签+class的方式定位 
#driver.find_element_by_css_selector('input[name="wd"]').send_keys('放假安排')   #使用标签+其他属性的方式定位

三、层级定位

层级定位就和xpah中的一样，如果某个元素定位不到，就需要找他的上一级或者上上级开始查找，就是我们说的父级、爷爷级开始一层一层找，在css中连接各级之间的语法为" > "。

具体语法如下(第一级、第二级、第三级见下图具体标注位置)：

find_element_by_css_selector("爷爷级(第一级)>父级(第二级)>子级(第三级)")

from selenium import webdriver  #导入selenium模块的webdriver
driver = webdriver.Chrome()     #webdriver.Chrome()是启动谷歌浏览器然后定义成变量driver
driver.get("https://www.baidu.com")   #打开百度浏览器
driver.find_element_by_css_selector("form.fm>span>input.s_ipt").send_keys('放假安排')   #使用层级定位的方式找到输入框，然后输入放假安排

四、css索引

在css中索引的概念与xpath中的概念一样，下面看下具体的语法使用。

find_element_by_css_selector("div#s-top-left>a:first-child").click()    #定位第一个页签，并点击
find_element_by_css_selector("div#s-top-left>a:last-child").click()    #定位最后一个页签，并点击
find_element_by_css_selector("div#s-top-left>a:nth-child(3)").click()    #定位第三个页签，并点击
find_element_by_css_selector("div#s-top-left>a:nth-last-child(2)").click()    #定位倒数第二个页签，并点击

from selenium import webdriver  #导入selenium模块的webdriver
driver = webdriver.Chrome()     #webdriver.Chrome()是启动谷歌浏览器然后定义成变量driver
driver.get("https://www.baidu.com")   #打开百度浏览器
driver.find_element_by_css_selector("div#s-top-left>a:first-child").click()    #定位第一个页签，并点击
#driver.find_element_by_css_selector("div#s-top-left>a:last-child").click()    #定位最后一个页签，并点击
#driver.find_element_by_css_selector("div#s-top-left>a:nth-child(3)").click()    #定位第三个页签，并点击
#driver.find_element_by_css_selector("div#s-top-left>a:nth-last-child(2)").click()    #定位倒数第二个页签，并点击

下图为公众号二维码，内容会同步发出，大家可以关注一起学习！