（八）WebDriver API之定位元素-CSS定位

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

　　学习selenium自动化之前，最好先学习HTML、CSS、JavaScript等知识，有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料，

这里就不多做介绍了，所有例子均使用python3.6+selenium执行的。

#------------------------------------------------我是可耻的分割线-------------------------------------------

 

CSS定位

　　CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。

CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度要比XPath快，但对于初学者来说学习起来稍微有点难度，下面我们就详细地介绍CSS的语法与使用。

 

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

下面同样以百度输入框和搜索按钮为例介绍CSS定位的用法。

...

<span class=’bg s_ipt_wr’>

<input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’

</span>

<span class=’bg s_ipt_wr’>

<input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’ 

</span>

 

...

1）通过class属性定位：

find_element_by_css_selector(‘.s_ipt’)

find_element_by_css_selector(‘.bg s_btn’)

find_element_by_css_selector()方法用于CSS语言定位元素，点号(.)表示通过class属性来定位元素。

2）通过id属性定位：

find_element_by_css_selector(‘#kw’)

find_element_by_css_selector(‘#su’)

井号(#)表示通过id属性来定位元素

3）通过标签名定位：

find_element_by_css_selector(‘input’)

在CSS语言中，用标签名定位元素不需要任何符号标识，直接使用标签名即可。但我们前面已经了解了，标签名重复的概率非常大，所以通过这种方式很难找到想要的元素。

我们可以通过以下几种方式来使标签名查找方式生效：

1、通过父子关系定位：

find_element_by_css_selector(‘span>span’)

上面的写法表示有父亲，它的标签名为span，查找它的所有标签名交input的子元素

2、通过属性定位：

find_element_by_css_selector(“[autocomplete=off]”)

find_element_by_css_selector(“[name=’kw’]”)

find_element_by_css_selector(“[type=’submit’]”)

在CSS当中也可以使用元素的任意属性，只要这些属性可以唯一标识这个元素。对于属性值来说，可加引号，也可以不加，但注意和整个字符串的引号进行区分。

3、组合定位：

我们当然可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。

find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)

find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)

有一个父元素，它的标签名叫span；它有一个class属性值叫bg s_ipt_wr；它有一个子元素，标签名叫inout，并且这个子元素的class属性值叫s_ipt。好吧，我们要找的就是具有这么多特征的一个子元素。