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代码。
<input class="b_searchbox" id="sb_form_q" name="q" title="输入搜索词" type="search" value="" maxlength="100" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" aria-controls="sw_as" aria-autocomplete="both" aria-owns="sw_as">
搜索按钮元素的html代码
<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">
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()
- 通过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代码如下：
<div class="b_searchboxForm" role="search" data-bm="15">
……
……
</div>
搜索按钮元素的上一级也是1个div标签，该div标签的id属性等于sb_go_par，该div的html代码如下：
<div id="sb_go_par" data-sbtip="搜索网页">。
<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">
</div>
搜素框元素与父元素（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://ke.qq.com/course/3172187?tuin=9c43f38e
【测试全系列视频课程】请点击我哦.....
地址：https://ke.qq.com/course/2525707?tuin=9c43f38e
图书京东、当当有售
京东：https://item.jd.com/12784287.html
当当：http://product.dangdang.com/29177828.html)!
