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()

1. 通过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)!