CSS定位

CSS定位方法

​ CSS通过选择器为页面元素绑定属性，CSS选择器可以较为灵活地选择控件的任意属性，定位速度优于XPath。

CSS选择器常见语法：

选择器	例子	描述
.class	.main	class选择器，选择class="main"的所有元素
#id	#aside	id选择器，选择id="aside"的所有元素
*	*	选择所有元素
element	p	选择所有< p >元素
element > element	div > input	选择父元素为< div >的所有< input >元素
element + element	div + input	选择同一级中紧接着< div >元素之后的所有< input >元素
[attribute = value]	[target = _blank]	选择target="_blank"的所有元素

通过Web Driver + Python举例

百度输入框和百度搜索按钮的HTML代码：

1. 通过class定位

   find_element_by_css_selector(".s_ipt")
   find_element_by_css_selector(".bg s_btn")
   

2. 通过id定位

   find_element_by_css_selector("#kw")
   find_element_by_css_selector("#su")
   

3. 通过标签名定位

   find_element_by_css_selector("input")
   

4. 通过标签层级关系定位

   find_element_by_css_selector("span > input")
   

5. 通过属性定位

   find_element_by_css_selector("[autocomplete=off]")
   find_element_by_css_selector("[name='wd']")
   find_element_by_css_selector("[type="submit"]")
   

   对属性值来说引号可加可不加

6. 组合定位

   通过组合定位增加定位元素的唯一性

   find_element_by_css_selector("form.fm > span > input.s_ipt")
   find_element_by_css_selector("form#form > span > input#kw")
   

7. 更多

   #1.查找class属性包含“s_ipt_wr”字符串的元素
   find_element_by_css_selector("[class*=s_ipt_wr]")
   
   #2.查找class属性以“bg”字符串开头的元素
   find_element_by_css_selector("[class^=bg]")
   
   #3.查找class以“warp”字符串结尾的元素
   find_element_by_css_selector("[class$=warp]")
   
   #4.查找form标签下面第二个input标签的元素
   find_element_by_css_selector("form > input:nth-child")