本篇文章给大家带来了关于Selenium使用CSS定位总结的相关知识，css定位也有它的价值，css定位更快，语法更简洁，希望对大家有帮助。
大部分人在使用selenium定位元素时，用的是xpath定位，css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。
我们先来看看css定位与xpath定位的区别在哪？
CSS与Xpath定位的区别
属性定位
CSS
css可以通过元素的id、class、标签这三个常规属性直接定位
①. css用#号表示id属性，如：
id=“kw” 可以写成：#kw
②. css用.表示class属性，如：
class="s_ipt"可以写成：.s_ipt
③. css直接用标签名称，无任何标识符，如：input
Xpath
xpath也可以通过元素的id、name、class这些属性定位
①. 用xpath通过id属性定位
driver.find_element(By.XPATH,"//[@id=‘kw’]")
②. 用xpath通过name属性定位
driver.find_element(By.XPATH,"//[@name=‘wd’]")
③. 用xpath通过class属性定位
driver.find_element(By.XPATH,"//*[@class=‘s_ipt’]")
其他属性
CSS
css除了上述以外，也可以通过其他属性定位
①. css通过name属性定位：
driver.find_element(By.CSS_SELECTOR,"[name=‘wd’]")
②. css通过autocomplete属性定位：
driver.find_element(By. CSS_SELECTOR,"[autocomplete=‘off’]")
③.css通过type属性定位:
driver.find_element(By.CSS_SELECTOR,"[type=‘text’]")
Xpath
没有上述属性，可以通过其他属性定位
driver.find_element(By.XPATH,"//*[@autocomplete=‘off’]")
标签
CSS
css页可以通过标签与属性的组合来定位元素
①. css通过标签与class属性的组合定位driver.find_element(By.CSS_SELECTOR,“input.s_ipt”)
②. css通过标签与id属性的组合定位driver.find_element(By.CSS_SELECTOR,“input#kw”)
③. css通过标签与其他属性组合定位driver.find_element(By.CSS_SELECTOR,“input[id=‘kw’]”)
Xpath
1、如果同一个属性，同名的比较多，可以通过标签筛选
①. 用xpath通过其他属性定位driver.find_element(By.XPATH,"//input[@autocomplete=‘off’]")
②. 用xpath通过id属性定位driver.find_element(By.XPATH,"//input[@id=‘kw’]")
③. 用xpath通过name属性定位driver.find_element(By.XPATH,"//name[@id=‘wd’]")
层级关系
CSS
如：//form[@id=‘form’]/span/input和//form[@class=‘fm’]/span/input
①. css通过层级关系定位driver.find_element(By.CSS_SELECTOR,“form#form>span>input”)
②. css通过层级关系定位driver.find_element(By.CSS_SELECTOR,“form.fm>span>input”)
Xpath
1、如果一个元素，他的属性不明显，无法直接定位，可以先找到他的父元素，找到父元素，再找下一级就能定位
①. 通过定位父元素来定位input输入框driver.find_element(By.XPATH,"//span[@id=‘s_kw_wrap’]/input")
②. 通过定位爷元素来定位input输入框driver.find_element(By.XPATH,"//form[@id=‘form’]/span/input")
索引
CSS
1、css也可以通过索引option：nth-child(1)来定位子元素
①. 选择第一个子元素driver.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(1)”)
②. 选择第二个子元素driver.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(2)”)
③. 选择第三个子元素driver.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(3)”)
Xpath
1、可以通过排序定位
①. 用xpath定位第一位driver.find_element(By.XPATH,"//select[@id=‘nr’]/option[1]")
②. 用xpath定位第二位driver.find_element(By.XPATH,"//select[@id=‘nr’]/option[2]")
③. 用xpath定位第三位driver.find_element(By.XPATH,"//select[@id=‘nr’]/option[3]")
模糊匹配
CSS
driver.find_element(By.CSS_SELECTOR,“input:contains(‘kw’)”)
Xpath
1、xpath强大的模糊匹配
2、by_partial_link，模糊匹配定位
driver.find_element(By.XPATH,"//*[contains(text(),‘hao123’)]")
什么是css定位呢？
它是Selenium中的一种定位剂，通过它我们可以识别网页上的Web元素。CSS代表级联样式表，用于样式化HTML网页的不同元素。CSS选择器定位器始终是在网页上定位元素的最佳方法。不论浏览器如何，CSS始终相同。
css定位方法：find_element_by_css_selector()
css几种定位方式
1：id选择器
说明：根据元素id属性来选择
格式：#id属性值 如：#userA(选择id属性值为userA的所有元素)
示例：打开百度首页，通过css定位，id属性来输入搜索关键字
from selenium import webdriver
import time
# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
# 通过css id属性来定位
driver.find_element_by_css_selector('#kw').send_keys('selenium')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()2：class选择器
说明：根据元素class属性来选择
格式：.class属性值 如：.telA(选择class属性值为telA的所有元素)
示例：打开百度首页，通过css定位，class属性来输入搜索关键字
from selenium import webdriver
import time
# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('.s_ipt').send_keys('hello python')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()3：属性选择器
说明：根据元素的属性名和值来选择
格式：[attribute=value] 如：[type=‘password’]（选择所有type属性为password的值）
示例：打开百度首页，通过css定位，属性选择器来输入搜索关键字
from selenium import webdriver
import time
# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('[name="wd"]').send_keys('你好，python')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()4：层级选择器
说明：根据元素的父子关系来选择
格式：element>element 如：p>input（返还所有P元素下所有的input元素）
提示：>可以用空格代替，如：p input或者 p [type=‘password’]
示例：打开百度首页，通过css定位，层级选择器来输入搜索关键字
from selenium import webdriver
import time
# 打开chrome浏览器
driver = webdriver.Chrome()
# 打开百度搜索页面
driver.get('https://www.baidu.com')
# 通过css 层级选择器定位
driver.find_element_by_css_selector('form > span > input').send_keys('层级属性')
# 强制等待2秒查看效果
time.sleep(2)
# 关闭浏览器
driver.quit()5：通过绝对路径定位
什么是绝对路径？绝对路径其实就是从开始标签（html）一级一级找到目标元素，上下级元素分隔符为>或者空格
例如：通过css绝对路径定位百度输入框，并输入内容检索，代码如下：
from selenium import webdriver
import time
# 打开浏览器
driver=webdriver.Chrome()
# 加载项目地址（百度）
driver.get("http://www.baidu.com")
time.sleep(3)
#定位百度输入框
driver.find_element_by_css_selector("html body div div div div div form span input").send_keys("小龙女")
driver.find_element_by_css_selector("html>body>div>div>div自动化测试Python+Selenium中对于web测试定位页面元素的两种主流XPATH和CSS定位方式XPATH定位和CSS定位很相似，XPATH功能更强大一些，但CSS定位方式速度更快，但是某些浏览器不支持CSS定位，并且一般在自动化测试过程中使用xpath定位方式要比css更普遍。
希望本文对你有所帮助~~如果对软件测试、接口测试、自动化测试、面试经验交流感兴趣可以私聊我或关注公众号“特斯汀软件测试”。免费领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！技术大牛解惑答疑，同行一起交流。