在selenium中使用css選取器進行元素定位

1.大家在使用selenium元素定位的時候，通常更多使用的是XPATH，css定位方式用得比較少

   但有時候css定位方式還是有一些優勢的，

   優勢1：一般情況下定位速度要比XPATH快

   優勢2：文法要比XPATH更簡潔

下面簡要介紹一下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)	匹配不符合當前選取器的任何元素

例如這樣一段html代碼的網頁

<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>

匹配樣本：

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>

2.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>

3.

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>