Selenium 详解CSS定位

xpath定位是“屠龙刀”，那CSS定位就是"倚天剑了"，相对xpath来说，具有语法简单，定位速度快等优点

一、属性定位

1、可以通过元素的id,class,tag标签这三个属性直接定位

# 表示id属性，如：#kw
. 表示class属性，如：.s_ipt
直接用标签名称，如：input

代码：

1# coding = utf-8
2from time import sleep
3from selenium import webdriver
4
5# 驱动文件路径
6driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
7# 启动浏览器
8driver = webdriver.Chrome(executable_path=driverfile_path)
9# 打开百度首页
10driver.get(r'https://www.baidu.com/')
11# 用CSS通过id属性定位百度搜索框
12# driver.find_element_by_css_selector("#kw").send_keys("selenium")
13
14# 用CSS通过clas属性定位百度搜索框
15# driver.find_element_by_css_selector(".s_ipt").send_keys("selenium")
16
17# 用CSS通过标签属性定位百度搜索框,此处必报错
18driver.find_element_by_css_selector("input").send_keys("selenium")
19
20# 等待5秒
21sleep(5)
22# 退出
23driver.quit()

2、其它属性定位

通过其它属性定位时，直接写属性名和属性值

代码：

1# coding = utf-8
2from time import sleep
3from selenium import webdriver
4
5# 驱动文件路径
6driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
7# 启动浏览器
8driver = webdriver.Chrome(executable_path=driverfile_path)
9# 打开百度首页
10driver.get(r'https://www.baidu.com/')
11# 用CSS通过name属性定位百度搜索框
12# driver.find_element_by_css_selector("[name='wd']").send_keys("selenium")
13
14# 用CSS通过maxlength属性定位百度搜索框
15# driver.find_element_by_css_selector("[maxlength='255']").send_keys("selenium")
16
17# 用CSS通过autocomplete属性定位百度搜索框
18driver.find_element_by_css_selector("[autocomplete='off']").send_keys("selenium")
19
20# 等待5秒
21sleep(5)
22# 退出
23driver.quit()

二、标签和属性组合

代码：

1# coding = utf-8
2from time import sleep
3from selenium import webdriver
4
5# 驱动文件路径
6driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
7# 启动浏览器
8driver = webdriver.Chrome(executable_path=driverfile_path)
9# 打开百度首页
10driver.get(r'https://www.baidu.com/')
11# 用CSS通过标签和id属性组合定位百度搜索框
12# driver.find_element_by_css_selector("input#kw").send_keys("selenium")
13
14# 用CSS通过标签和class属性组合定位百度搜索框
15# driver.find_element_by_css_selector("input.s_ipt").send_keys("selenium")
16
17# 用CSS通过标签和name属性组合定位百度搜索框
18# driver.find_element_by_css_selector("input[name='wd']").send_keys("selenium")
19
20# 用CSS通过标签和autocomplete属性组合定位百度搜索框
21driver.find_element_by_css_selector("input[autocomplete='off']").send_keys("selenium")
22
23# 等待5秒
24sleep(5)
25# 退出
26driver.quit()

三、层级关系

代码：

1# coding = utf-8
2from time import sleep
3from selenium import webdriver
4
5# 驱动文件路径
6driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
7# 启动浏览器
8driver = webdriver.Chrome(executable_path=driverfile_path)
9# 打开百度首页
10driver.get(r'https://www.baidu.com/')
11# 用CSS通过层级关系定位百度搜索框
12driver.find_element_by_css_selector("form#form>span>input").send_keys("selenium")
13
14# 等待5秒
15sleep(5)
16# 退出
17driver.quit()

四、索引

CSS的索引定位与xpath的索引定位有很大不同，我们还以百度首页为例

我们要定位“百度一下”按钮，先定位到“百度一下”元素标签<input>的上级标签<span>，而<span>标签是<form>标签下所有<span>标签的第2个<span>，同时又是<form>标签下的第9个子标签

在xpath定位中这样写的：

driver.find_element_by_xpath("//*[@id='form']/span[2]/input")

但是CSS定位必须这样写

driver.find_element_by_css_selector("form#form>span:nth-child(9)>input")

代码：

1# coding = utf-8
2from time import sleep
3from selenium import webdriver
4
5# 驱动文件路径
6driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe'
7# 启动浏览器
8driver = webdriver.Chrome(executable_path=driverfile_path)
9# 打开百度首页
10driver.get(r'https://www.baidu.com/')
11# 用CSS通过索引系定位百度搜索框
12driver.find_element_by_css_selector("form#form>span:nth-child(8)>input").send_keys("selenium")
13# 用CSS通过索引定位"百度一下"按钮
14driver.find_element_by_css_selector("form#form>span:nth-child(9)>input").click()
15
16# 等待5秒
17sleep(5)
18# 退出
19driver.quit()

五、CSS与xpath定位比较

定位方式

xpath

CSS

标签

//input

input

//input[@id='kw']

input#kw

class

//input[@class='s_ipt']

input.s_ipt

其它属性

//input[@name='username']

input[name=username]

input[name^=user]（以user开头）

input[name$=name]（以name结尾）

input[name*=erna]（包含ernal）

定位子元素

//form[@id='form']/*

//form/input

form#form>*

form#form>input

定位所有后代元素

//form//input

form input

索引

//form/span[2]

form>span[9]

根据子元素回溯父元素

//*[./[@id='su']](定位到父级元素)

根据兄弟元素定位

span.soutu-btn+input