软件测试/测试开发|Python selenium CSS定位方法详解

简介

CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活，是前端开发中常用的定位元素的方式。

selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法。CSS定位有以下显著优点：

1. 语法简洁
2. 对比其他定位方式，定位效率更快
3. 对比其他定位方式，定位更稳定

css选择器语法

基础选择器

选择器	格式	示例	示例说明
选择全部	*	*	选择全部元素
标签选择器	html标签	p	选择所有\ 元素
ID选择器	#id属性值	#su	选择所有id='su'的元素
类选择器	.class属性值	.s_btn	选择所有class='s_btn'的元素
属性选择器1	[属性名]	[type]	选择所有带type属性的元素
属性选择器2	[属性名='属性值']	[type="submit"]	选择所有type="submit"的元素
属性选择器3	[属性名~='属性值']	[type~="submit"]	选择所有type包含"submit"的元素
属性选择器4	[属性名|='属性值']	[type|="submit"]	选择所有type以"submit"开头的元素

备注：某些元素属性有多个值(如class属性)，值表现为以空格隔开，使用时需要单个取出使用

组合选择器

组合选择器就是同时使用多个基础选择器，从而更好地筛选出目标元素

选择器	格式	示例	示例说明
标签指定属性	标签加属性描述	input#su	选择所有id='su'的\元素
并集	元素1,元素2	div,p	选择所有\ 和\ 元素
父子	元素1>元素2	div>p	选择所有父级是\ 的\ 元素
后代	元素1 元素2	div p	选择\ 中的所有\ 元素
相邻	元素1+元素2	div+p	选择\ 同级后的相邻\ 元素
同级	元素1~元素2	div~p	选择\ 同级后的所有\ 元素

伪属性选择器

伪属性选择器是指元素在html中实际并不存在该属性，是由css定义的拓展描述属性

选择器	格式	示例	示例说明
唯一子元素	:only-child	p:only-child	选择所有\ 元素且该元素是其父级的唯一一个元素
第一子元素	:first-child	p:first-child	选择所有\ 元素且该元素是其父级的第一个元素
最后子元素	:last-child	p:last-child	选择所有\ 元素且该元素是其父级的最后一个子元素
顺序选择器	:nth-child(n)	p:nth-child(2)	选择所有\ 元素且该元素是其父级的第二个子元素
顺序类型选择器	:nth-of-type(n)	p:nth-of-type(2)	选择所有\ 元素且该元素是其父级的第二个\ 元素
倒序选择器	:nth-last-child(n)	p:nth-last-child(2)	选择所有\ 元素且该元素是其父级的倒数第二个子元素
倒序类型选择器	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有\ 元素且该元素是其父级的倒数第二个\ 元素

使用示例

1. 通过id选择器查找

通过css定位的id属性查找百度首页的输入框元素，代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '#kw')
print(element)

2. 通过class选择器查找

通过元素的.class属性值查找元素，我们还是以百度首页的输入框为例，代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '.s_ipt')
print(element)

3. 通过标签定位

我们继续使用百度首页输入框为例，输入框一般有input标签，代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'input')
print(element)

4. 层级选择器

根据元素的父子关系来选择，实例：直接子元素层级关系，使用>号，继续以百度首页的搜索框为例，代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '.bg.s_ipt_wr > input')
print(element)

注：如果两个元素之间不是直接的子元素关系，我们需要使用空格隔开，当有多级的层级关系时，我们可以使用duoge>符号，示例如下：

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'form input')
print(element)

------------------------------------

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'form > span > input')
print(element)

总结

CSS定位是非常高效的一种定位方式，代码也非常简洁，相对于xpath定位方法来说，它的定位速度快，在能够使用CSS定位的情况下，推荐使用CSS定位来实现元素的定位。希望本文能够帮到大家！