本篇文章给大家带来了关于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 webdriverimport 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 webdriverimport 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 webdriverimport 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 webdriverimport 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自动化、接口、框架搭建学习资料！技术大牛解惑答疑，同行一起交流。