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