元素定位之CssSelector
一:使用chrome console检查css selector/xpath的有效性【检查】 步骤 1. 按F12打开chrome的开发者工具; 2. 再按Esc键调出console,chrome的Elements和Console展示在同一个窗口,便于查看。 3、在Console控制太重输入 $(selector)和$$(selector) CSS定位大全: CssSelector常用定位 一、通过id定位 (1)#kw 定位id=kw的元素 (2)input#kw 定位id=kw的input标签元素 python:driver.find_element_by_css_selector("input#kw") java:driver.findElement(By.cssSelector("input#kw")) robotframework:css=input#kw 为什么我要一一举例,就是想说明下,selenium对于支持不同语言,方法组成写法会有一些不同,但是定位路径都是一致的。 二、通过classname定位 说classname定位前,又要操心的说一下啦,在学习css的时候,应该都知道有两种选择器,一种是id选择器,一种是class类选择器,而id用#表示,类选择器用.(点)表示,所以别问我上面id定位的#是什么意思啊。知识点会比较多,所以基础还是比较重要的。 (1).s_ipt 定位class=s_ipt的元素 (2)class=bg s_ipt_wr quickdelete-wrap,类似这种叫复合class,由多个类选择器组成,定位的写法则是:.bg.s_ipt_wr.quickdelete-wrap,所有空格用.(点)代替 三、元素属性定位 (1)input[id=kw] (2)input[class=s_ipt] (3)input[id=kw][class=s_ipt] 还支持模糊匹配的,主要是太长的属性值方便使用;以class=bg s_ipt_wr quickdelete-wrap举例: (1)span[class ^=bg] 匹配所有span标签class属性值bg开头的元素 (2)span[class $=rap] 匹配所有span标签class属性值rap结尾的元素 (3)span[class *=quick] 匹配所有span标签class属性值中间有quick的元素 四、元素层级定位 1、子元素定位(>大于号) (1)span>input 定位span标签下的input标签 (2)form>span>input 定位form标签下span标签下的input标签 以大于号>为分层,查找元素定位必须一层一层的以>往下写,有多个则匹配多个 2、后代元素(空格) (1)span input 定位span下所有的input标签,包括span下的所有层次的input,注意不是span下一层的input,是所有 3、元素层级css还支持三个方法,分别是first-child、last-child、nth-child(n) (1)first-child:第一个后代元素 (2)last-child:最后一个后代元素 (3)nth-child(N):指定第N个后代元素 下面举例: (1)input:first-child 定位所有层次第一个为input的元素,注意是第一个元素为input标签的 (2)span input:first-child 定位span标签下,第一个为input标签的元素 (3)span :last-child 定位span标签下,最后一个元素 (4)span input:last-child 定位span标签下,最后一个为input标签的元素 (5)span :nth-child(2) 定位span标签下,第二个元素 (6)form.fm>:nth-child(2) 定位form标签,class等于fm下的第二个元素
其中 :nth-child(n)是在匹配元素的父元素中选择第n个元素,n自1开始,然后判断是否符合选择器条件,而 :eq(n)是在匹配的元素中取下标为n的元素,n自0开始。
我们首先使用如下语句进行选择:
<p>paragraph 1</p> <ul> <li>CSS1</li> <li>CSS2</li> <li>CSS3</li> <li>CSS4</li> </ul> <ul> <li>jQuery1</li> <li>jQuery2</li> <li>jQuery3</li> <li>jQuery4</li> </ul>
$("ul:eq(1)").css("background-color", "yellow");
这条语句的作用是选择文档中 第二个ul 元素部分的内容(时刻记住位置过滤器是jQuery特有的所以其起始位索引为0),你会发现li中内容为jQuery部分的背景色变成了黄色,若我们使用如下的语句进行重新选择:
$("ul:nth-child(2)").css("background-color", "yellow");
这条语句的意思是选择文档中ul元素排在所有元素第二位的那部分元素,所以背景色变成黄色的部分换成了内容为CSS的那部分li元素,因为此时p元素是第一个元素,忽略比较时的元素类型,自然是内容为CSS的ul被选中了。
总结:相对于xpath,css定位会相对来说更复杂,特别是层级的定位,但是其实搞懂两点,以大于号>层次的是一层一层下的,而空格则是后代元素,也就是所有的层。当然css定位组合也是很灵活,具有很多可变性,非常实用。