元素定位之CssSelector

元素定位之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 1p>
<ul>
<li>CSS1li>
<li>CSS2li>
<li>CSS3li>
<li>CSS4li>
ul>
<ul>
<li>jQuery1li>
<li>jQuery2li>
<li>jQuery3li>
<li>jQuery4li>
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定位组合也是很灵活，具有很多可变性，非常实用。

 

 

 

posted @ 2019-02-18 20:40 嗯哼~ 阅读( ...) 评论( ...) 编辑 收藏