Selenium + Python 自学笔记（第十一天）css定位

CSS定位

    CSS是一种语言，用来描述HTML和XML文档的表现，CSS使用选择器为页面绑定元素属性

     CSS选择器可以较为灵活的选择控件的任意属性，一般情况下，CSS定位速度比Xpath要快，但是对于初学者来说学习起来稍微有点难度，        下面介绍CSS选择器和语法的使用

    CSS常见语法表

        

 

 

选择器	例子	描述
.class	.intro	class选择器，选择class="intro"的所有元素
#id	#firstnamc	id选择器，选择id="firstnamc"的所有元素
*	*	选择素有元素
element	p	选择所有<p> 元素
element>element	div>input	选择符元素为<div>的所有<input>元素
element+element	div+input	选择同一级中近紧接在<div>元素后的<input>元素
[attribute=value]	[target=_blank]	选择 target="tlank"的所有元素

 

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

<span class="s_ipt_wr">

                <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

            </apsn>

            <span class="s_btn_wr">

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

            </span>

    1.通过class定位

        find_element_by_css_selector(".s_ipt")

        find_element_by_css_selector(".s_btn")

        find_element_by_css_selector()方法用于在css中定位元素，点号（.）表示通过class来定位元素

    2.通过id定位

        find_element_by_css_selector("#kw")

        find_element_by_css_selector("#wu")

        find_element_by_css_selector()#表示通过id来定位元素

    3.通过标签名来定位

        find_element_by_css_selector("input")

        find_element_by_css_selector()  在css中，用标签名定位元素时不需要任何表示符号，直接使用标签名即可

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

        find_element_by_css_selector("span > input")

        find_element_by_css_selector()这种写法表示有父元素，父元素的标签名为<span>查找span中所有标签为input的子元素

    5.通过属性定位

        find_element_by_css_selector("[autocomplete=off]")

        find_element_by_css_selector("[name='kw']")

        find_element_by_css_selector("[type='submit']")

        find_element_by_css_selector()    在css中使用元素的任意属性定位，只要这些属性可以位移标识这个元素，对属性值来说，可以加引号，           也可以不加注意整个字符串的引号区分

    6.组合定位

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

         find_element_by_css_selector("from.fm > span > input.s_ipt")

         find_element_by_css_selector("from#from > span > input#kw")

         我们要定位这个元素标签名为input，这个元素的class属性为s_ipt，并且他有一个父标签名为span，他的父标签还有元素标签名为from，            class属性为fm我们要找的就是满足这些条件的一个元素

    7.更多定位用法   

        find_element_by_css_selector("[class * =s_ipt_wr]")

        查找class属性包含 s_pit_wr 字符串元素

        find_element_by_css_selector("[class^=bg]")

        查找class属性以bg字符串开头的元素

        find_element_by_css_selector("[class$=warp]")

        查找class属性以warp字符串结尾的元素

        find_element_by_css_selector("from  > input:nth-child(2)")

        查找from标签下的第二个input

        

        CSS选择呢器的更多方法可以查看W3CSchool网站中的CSS选择器参考手册（http://www.w3school.com.cn/cssref/css_select ors.asp）

 

        通过前面的学习我们了解到了Xpath 和CSS都提供了非常强大而灵活的定位方法，相比较而言CSS语法更加简洁，但是理解和使用的难度要大一点，两种方法掌握一种即可，至于选择哪一种就看自己个了