Selenium自动化测试-CSS定位详解（六）

了解过前端知识的人，应该对css熟悉。它是用于给html页面添加样式和布局的，css的定位包括class,ID选择器，元素属性选择器和伪类等。其实selenium的css定位跟页面的css语法非常的像，有点异卵双胞胎的意思，为啥不是同卵双胞胎呢？因为它们之间还是有点区别的。现在我们来具体学习下。大体上我们把它们的定位方式分成三类，还是以百度搜索为例。

第一类：单个的属性定位，除了id,class属性写法不同以外，其他的属性的写法都是：[属性名称=属性值]

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
#元素标签名定位
input_el = driver.find_element_by_css_selector("input")
#元素的id定位
input_el = driver.find_element_by_css_selector("#kw")
#元素的class定位
input_el = driver.find_element_by_css_selector(".s_ipt")
#元素的name属性定位
input_el = driver.find_element_by_css_selector("[name=wd]")
#元元素的type属性定位
input_el = driver.find_element_by_css_selector("[type=text]")

第二类：组合定位，单个属性有时候不一定能定位得到，而且复杂的页面有很多重复的元素和属性，那么这种情况就可以使用组合定位来解决；

#匹配input元素且id=kw
input_el = driver.find_element_by_css_selector("input#kw")
#匹配input元素且class=s_ipt
input_el = driver.find_element_by_css_selector("input.s_ipt")
#匹配input元素且name=wd
input_el = driver.find_element_by_css_selector("input[name='wd']")
#匹配input元素且有type属性，注意这里的属性值为空也是可以的
input_el = driver.find_element_by_css_selector("input[type]")
#匹配input元素且name=wd且maxlength=100
input_el = driver.find_element_by_css_selector("input[name='wd'][maxlength=100]")
#对于class有多个，且用空格隔开的，可以匹配input元素且class其中的一个值为s_ipt
input_el = driver.find_element_by_css_selector("input[class ~= 's_ipt']")
#匹配input元素且class的值以s_ipt开头的
input_el = driver.find_element_by_css_selector("input[class ^= 's_ipt']")
#匹配input元素且class的值以s_ipt结尾的
input_el = driver.find_element_by_css_selector("input[class $= 's_ipt']")
#对于以破折号-分割的class,比如：<input class="abcssss-ss-sss">  ，匹配input元素且class的值以abcssss开头的，注意此处开头的必须要截至破折号前的所有的字符
input_el = driver.find_element_by_css_selector("input[class |= 'abcssss']")

第三类：层级定位，html文档是一个树结构，层级关系很复杂，有时候只定位某一层元素比较困难，那么这个时候可以从该元素父级开始定位，以上图为例：

#匹配id=form的form标签 > span > input且name=wd
input_el = driver.find_element_by_css_selector("span[class ~= 'bg']>input[name='wd']")
#匹配id=s_kw_wrap的span标签的子元素中第0个input
input_el = driver.find_element_by_css_selector("span[class ~= 'bg'] > input:nth-child(1)")
#匹配id=s_kw_wrap的span标签的子元素中倒数第1个input
input_el = driver.find_element_by_css_selector("span[class ~= 'bg'] > input:nth-last-child(1)")
#匹配id=s_kw_wrap的span标签的子元素中第1个input
input_el = driver.find_element_by_css_selector("span[class ~= 'bg'] > input:first-child")
#匹配id=s_kw_wrap的span标签的子元素中最后一个input
input_el = driver.find_element_by_css_selector("span[class ~= 'bg'] > input:last-child")
#匹配id=s_kw_wrap的span标签的子元素唯一一个input
input_el = driver.find_element_by_css_selector("span[class ~= 'bg'] > input:only-child")

这么多的定位方式，怎么记得住啊。其实不用去记，先每个方法都去试一遍，脑海里有个映象，等用到的时候，再翻出来看下就好了。