简单对象定位——css定位

CSS定位：

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

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

CSS 选择器的常见语法：

*  ：通用元素选择器，匹配任何元素

E  ：标签选择器，匹配所有使用E 标签的元素

.info ：class 选择器，匹配所有class 属性中包含info 的元素

#footer ：id 选择器，匹配所有id 属性等于footer 的元素

E,F ：多元素选择器，同时匹配所有E 元素或F 元素，E 和F 之间用逗号分隔

E F ：后代元素选择器，匹配所有属于E 元素后代的F 元素，E 和F 之间用空格分隔

E > F ：子元素选择器，匹配所有E 元素的子元素F

E + F： 毗邻元素选择器，匹配紧随E 元素之后的同级元素F （只匹配第一个）

E ~ F ：同级元素选择器，匹配所有在E 元素之后的同级F 元素

E[att='val'] ：属性att 的值为val 的E 元素（区分大小写）

E[att^='val']： 属性att 的值以val 开头的E 元素（区分大小写）

E[att$='val']： 属性att 的值以val 结尾的E 元素（区分大小写）

E[att*='val']： 属性att 的值包含val 的E 元素（区分大小写）

E[att1='v1'][att2*='v2'] ：属性att1 的值为v1，att2 的值包含v2 （区分大小写）

E:contains('xxxx') ：内容中包含xxxx 的E 元素

E:not(s)： 匹配不符合当前选择器的任何元素

例如下面一段代码：

<div class="formdiv">
<form name="fnfn">
<input name="username" type="text"></input>
<input name="password" type="text"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
<input value="SYS123456" name="vid" type="text">
<input value="ks10cf6d6" name="cid" type="text">
</form>
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>
</div>

通过CSS 语法进行匹配的实例：

locator                                                                 匹配

css=div
css=div.formdiv                                            <div class="formdiv">

css=#recordlist
css=ul#recordlist                                          <ul id="recordlist">

css=div.subdiv p
css=div.subdiv > ul > p                                 <p>Heading</p>

css=form + div                                             <div class="subdiv">

 
css=p + li
css=p ~ li                                                     二者定位到的都是<li>Cat</li>但是storeCssCount 的时候，前者得到1，后者得到4

css=form > input[name=username]               <input name="username">
css=input[name$=id][value^=SYS]               <input value="SYS123456" name="vid" type="hidden">
css=input:not([name$=id][value^=SYS])      <input name="username" type="text"></input>
css=li:contains('Goa')                                   <li>Goat</li>
css=li:not(contains('Goa'))                            <li>Cat</li>

css 中的结构性定位:

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。

Selenium 中则是采用了来自Sizzle 的css3定位扩展，它的语法更加灵活易懂。

Sizzle Css3的结构性定位语法：

E:nth(n)
E:eq(n)                                  在其父元素中的E 子元素集合中排在第n+1 个的E 元素(第一个n=0)

 
E:first                                    在其父元素中的E 子元素集合中排在第1 个的E 元素
E:last                                     在其父元素中的E 子元素集合中排在最后1 个的E 元素
E:even                                   在其父元素中的E 子元素集合中排在偶数位的E 元素(0,2,4…)

E:odd                                    在其父元素中的E 子元素集合中排在奇数的E 元素(1,3,5…)
E:lt(n)                                   在其父元素中的E 子元素集合中排在n 位之前的E 元素(n=2,则匹配0,1)
E:gt(n)                                  在其父元素中的E 子元素集合中排在n 位之后的E 元素(n=2，在匹配3,4)
E:only-child                           父元素的唯一一个子元素且标签为E
E:empty                                不包含任何子元素的E 元素，注意，文本节点也被看作子元素

 

例如下面一段代码：
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>

 

匹配示例：

locator                                                匹配

css=ul > li:nth(0)                              <li>Cat</li>

css=ul > *:nth(0)
css=ul > :nth(0)                                <p>Heading</p>

css=ul > li:first                                  <li>Cat</li>

css=ul > :first                                    <p>Heading</p>

css=ul > *:last
css=ul > li:last                                   <li>Goat</li>

css=ul > li:even                                   Cat, Car

css=ul > li:odd                                   Dog, Goat

css=ul > :even                                 <p>Heading</p>

css=ul > p:odd                                    [error] not found

css=ul > li:lt(2)                                   <li>Cat</li>

css=ul > li:gt(2)                                  <li>Goat</li>

css=ul > li:only-child
css=ul > :only-child
css=ul > *:only-child                        [error] not found （ul 没有only-child）

css=div.subdiv > :only-child                 <ul id="recordlist">
                                                          .......
                                                          </ul>

下面是一些XPATH 和CSS 的类似定位功能比较（缺乏一定的严谨性）。

 

定位方式                                            XPath                                                CSS

标签                                                   //div                                               div

By id                                            //div[@id='eleid']                                  div#eleid

By class                                        //div[@class='eleclass']
                                                   //div[contains(@class,'eleclass')]             div.eleclass

By 属性                                         //div[@title='Move mouse here']              div[title=Move mouse here]
                                                                                                                div[title^=Move]
                                                                                                                div[title$=here]
                                                                                                                div[title*=mouse]

定位子元素                                          //div[@id='eleid']/*                            div#eleid >*

                                                        //div/h1                                             div#eleid >h1    

定位后代元素                                       //div[@id='eleid']//h1                          div h1

By                                                    index //li[6]                                         li:nth(5)

By content                                       //a[contains(.,'Issue 1164')]                  a:contains(Issue 1164)

通过对比，我们可以看到，CSS 定位语法比XPath 更为简洁，定位方式更多灵活多样；不过对CSS 理解起来要比XPath 较难；但不管是从性能还是定位更复杂的元素上，CSS 优于XPath，笔者更推荐使用CSS定位页面元素。

 

关于自动化的定位问题:

自动化测试的元素定位一直是困扰自动化测试新手的一个障碍，因为我们在自动化实施过程中会碰到各式各样的对象元素。虽然XPath 和CSS 可以定位到复杂且比较难定位的元素，但相比较用id 和name 来说增加了维护成本和学习成本，相比较来说id/name 的定位方式更直观和可维护，有新的成员加入的自动化时也增加了人员的学习成本。所以，测试人员在实施自动化测试时一定要做好沟通，规范前端开发人员对元素添加id/name 属性，或者自己有修改HTML 代码的权限。