Selenium3自动化测试【20】CSS定位元素
作者：互联网
CSS 指层叠样式表 (CascadingStyleSheets)，CSS一种用来表现HTML或XML等文件样式的计算机语言，其能够灵活的为页面提供丰富样式的风格。
CSS使用选择器为页面元素绑定属性（如ID、class等），这些选择器可以被Selenium使用来进行定位元素。CSS较为灵活的选择控件的任意属性，CSS定位元素的速度比xpath速度快。
CSS定位是通过find_element_by_css_selector方法。
仍然以bing搜索页为例介绍CSS定位的用法。
要操作Bing搜索页。
- 通过CSS找到搜索框与搜索按钮元素；
- 通过键盘输入检索的关键字；
- 用鼠标单击搜索按钮；
- 提交搜索请求。
搜素框元素的html代码。
```
```
搜索按钮元素的html代码
```
```
**1. ID定位**
通过元素的ID，find_element_by_css_selector()方法实现的源码如下。
```
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
driver.find_element_by_css_selector("#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("#sb_form_go").click()
sleep(3)
driver.quit()
```
**2. class定位**
通过元素的class, find_element_by_css_selector()方法实现的源码如下。
```
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
```
**通过css - class定位**
```
driver.find_element_by_css_selector(".b_searchbox").send_keys("bella")
driver.find_element_by_css_selector(".b_searchboxSubmit").click()
sleep(1)
driver.quit()
```
3. 通过name属性定位
借助name属性，通过的find_element_by_css_selector()方法实现的源码如下。
```
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
```
通过css-属性定位
```
driver.find_element_by_css_selector("[name='q']").send_keys("bella")
driver.find_element_by_css_selector("[name='go']").click()
sleep(1)
driver.quit()
```
**4. CSS层级定位**
类似XPath的层级定位，CSS也可以通过层级（父元素）实现元素的定位。
搜索框元素的上一级是1个div标签，该div标签的clalss属性等于b_searchboxForm，html代码如下：
```
……
……
```
搜索按钮元素的上一级也是1个div标签，该div标签的id属性等于sb_go_par，该div的html代码如下：
```
。
```
搜素框元素与父元素（class等于b_searchboxForm）的结合。
```
find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q")
```
搜索按钮元素与父元素（id等于sb_go_par）的结合。
```
find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit")
```
可以看到父元素与子元素是通过 > 连接起来的。
通过CSS层级定位，find_element_by_css_selector()方法实现的源码如下。
```
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
```
**通过css 层级定位**
输入框为id，搜索按钮为class
```
driver.find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit").click()
sleep(1)
driver.quit()
```
可以通过FireFox浏览器自带的FireFox Developer Tools工具快速生成CSS语法，生成的操做方法与XPath相同，如图所示。
单击【CSS选择器】，即可复制搜素框元素的CSS语法（#sb_form_q），这样快速的获取某元素的CSS语法。
单击【CSS路径】，可获取搜素框元素的CSS路径（类似XPath绝对路径），如图所示。
搜素框元素的CSS路径。
```
html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox
```
搜素按钮元素的CSS路径。
```
html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm div#sb_go_par input#sb_form_go.b_searchboxSubmit
```
通过CSS绝对路径，find_element_by_css_selector()方法实现的源码如下。
```
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
driver.get("http://cn.bing.com/")
```
通过css 层级 # 通过完成css路径来定位
```
driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox").send_keys("bella")
driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_go.b_searchboxSubmit").click()
sleep(3)
driver.quit()
```
如果你觉的文章读的不过瘾，可以查看详细的视频教程。
【2021】UI自动化测试：Selenium3自动化测试
https://edu.51cto.com/course/26488.html
【测试全系列视频课程】请点击我哦.....
(https://edu.51cto.com/lecturer/968349.html)
图书京东、当当有售
京东：https://item.jd.com/12784287.html
当当：http://product.dangdang.com/29177828.html
标签：20,driver,selector,css,Selenium3,div,find,CSS 来源： https://blog.51cto.com/starpoint/3006946