大部分人在使用 selenium 定位元素时，用的是 xpath 定位，css 定位往往被忽略掉了，其实 css 定位也有它的价值，css 定位更快，语法更简洁。

我们先来看看 css 定位与 xpath 定位的区别在哪？

CSS 与 Xpath 定位的区别

属性定位

CSS
css 可以通过元素的 id、class、标签这三个常规属性直接定位

  1. css 用 #号表示 id 属性，如：
    id=’kw’ 可以写成：#kw
  2. css 用. 表示 class 属性，如：
    class=”s_ipt”可以写成：.s_ipt
  3. css 直接用标签名称，无任何标识符，如：input

Xpath
xpath 也可以通过元素的 id、name、class 这些属性定位

  1. 用 xpath 通过 id 属性定位
    driver.find_element(By.XPATH,”//[@id=’kw’]”)
  2. 用 xpath 通过 name 属性定位
    driver.find_element(By.XPATH,”//[@name=’wd’]”)
  3. 用 xpath 通过 class 属性定位
    driver.find_element(By.XPATH,”//*[@class=’s_ipt’]”)

其他属性

CSS
css 除了上述以外，也可以通过其他属性定位

  1. css 通过 name 属性定位：
    driver.find_element(By.CSS_SELECTOR,”[name=’wd’]”)
  2. css 通过 autocomplete 属性定位：
    driver.find_element(By. CSS_SELECTOR,”[autocomplete=’off’]”)
  3. css 通过 type 属性定位:
    driver.find_element(By.CSS_SELECTOR,”[type=’text’]”)

Xpath
没有上述属性，可以通过其他属性定位
driver.find_element(By.XPATH,”//*[@autocomplete=’off’]”)

标签

CSS
css 页可以通过标签与属性的组合来定位元素

  1. css 通过标签与 class 属性的组合定位 driver.find_element(By.CSS_SELECTOR,’input.s_ipt’)
  2. css 通过标签与 id 属性的组合定位 driver.find_element(By.CSS_SELECTOR,’input#kw’)
  3. css 通过标签与其他属性组合定位 driver.find_element(By.CSS_SELECTOR,’input[id=’kw’]’)

Xpath
1、如果同一个属性，同名的比较多，可以通过标签筛选

  1. 用 xpath 通过其他属性定位 driver.find_element(By.XPATH,”//input[@autocomplete=’off’]”)
  2. 用 xpath 通过 id 属性定位 driver.find_element(By.XPATH,”//input[@id=’kw’]”)
  3. 用 xpath 通过 name 属性定位 driver.find_element(By.XPATH,”//name[@id=’wd’]”)

层级关系

CSS
如：//form[@id=’form’]/span/input 和 //form[@class=’fm’]/span/input

  1. css 通过层级关系定位 driver.find_element(By.CSS_SELECTOR,’form#form>span>input’)
  2. 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”)
  2. 通过定位爷元素来定位 input 输入框 driver.find_element(By.XPATH,”//form[@id=’form’]/span/input”)

索引

CSS
css 也可以通过索引 option：nth-child(1) 来定位子元素

  1. 选择第一个子元素 driver.find_element(By.CSS_SELECTOR,’select#nr>option:nth-child(1)’)
  2. 选择第二个子元素 driver.find_element(By.CSS_SELECTOR,’select#nr>option:nth-child(2)’)
  3. 选择第三个子元素 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]”)
  2. 用 xpath 定位第二位 driver.find_element(By.XPATH,”//select[@id=’nr’]/option[2]”)
  3. 用 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 属性来输入搜索关键字

1
2
3
4
5
6
7
8
9
10
11
12
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 属性来输入搜索关键字

1
2
3
4
5
6
7
8
9
10
11
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 定位，属性选择器来输入搜索关键字

1
2
3
4
5
6
7
8
9
10
11
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 定位，层级选择器来输入搜索关键字

1
2
3
4
5
6
7
8
9
10
11
12
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 绝对路径定位百度输入框，并输入内容检索，代码如下：

1
2
3
4
5
6
7
8
9
10
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 更普遍。