清單 3. WebDriver 特有的定位方式
//by Partial Link Text
WebElement element = driver.findElement(By.partialLinkText("Con")); (10)//in WebDriver
//by Tag Name
WebElement element = driver.findElement(By.tagName("p")); (09)/in WebDriver
//by Class
List<WebElement> WEs = driver.findElements(By.className("required"));(4&5)//in WebDriver
CSS 選擇器
CSS 選擇器是由關(guān)系符分開(kāi)的一個(gè)或多個(gè)簡(jiǎn)單選擇器序列組成的選擇器序列鏈，后一個(gè)簡(jiǎn)單選擇器序列的后面還可以添加一個(gè)偽元素。簡(jiǎn)單選擇器序列是單純由簡(jiǎn)單選擇器組成的選擇器鏈，它通常由一個(gè)標(biāo)簽選擇器或者通配符選擇器開(kāi)頭，之后序列中不允許再出現(xiàn)其他標(biāo)簽選擇器和通配符選擇器。簡(jiǎn)單選擇器可以是 ID 選擇器、類(lèi)選擇器、類(lèi)型（標(biāo)簽）選擇器、通配符選擇器、屬性選擇器和偽類(lèi)選擇器。關(guān)系符可以是空格、大于號(hào)、加號(hào)和波浪符。關(guān)系符和簡(jiǎn)單選擇器周?chē)试S出現(xiàn)空白（空格符、tab 符、換行符、回車(chē)符、換頁(yè)符）。多個(gè) CSS 選擇器還可以用逗號(hào)拼接為一個(gè)組合選擇器，滿足任意其中一個(gè)選擇器的元素都會(huì)被該組合選擇器選中，逗號(hào)的前后允許出現(xiàn)空白。某些選擇器支持命名空間前綴，命名空間前綴的聲明機(jī)制應(yīng)該由使用選擇器的語(yǔ)言指定，如果使用選擇器的語(yǔ)言沒(méi)有指定命名空間前綴聲明機(jī)制，那么沒(méi)有前綴聲明。在 CSS 中，命名空間通過(guò) @namespace 規(guī)則聲明。
清單 4. HTML 示例 2
(01)<html>
(02) <body>
(03) <form id="loginForm" name="loginFrom">
(04) <input class="required" name="username" type="text" />
(05) <input class="required passfield" name="password" type="password" />
(06) <input name="continue" type="submit" value="Login" />
(07) </form>
(08) <p class="ask">Are you sure you want to do this?</p>
(09) <a href="continue.html">Continue</a>
(10) <a href="cancel.html" hreflang=en-US>Cancel</a>
(11) <div>
(12) <ul id="structure">
(13) <li>Cat</li>
(14) <li>Dog</li>
(15) <p>fish</p>
(16) <li>Car</li>
(17) <li>Goat</li>
(18) </ul>
(19) </div>
(20)</body>
(21)<html>
簡(jiǎn)單選擇器
ID、類(lèi)、類(lèi)型（標(biāo)簽）、通配符選擇器
文檔中可能包含被聲明為 ID 類(lèi)型的屬性，ID 類(lèi)型的屬性的特殊之處在于一份文檔中的任意兩個(gè)元素不會(huì)有相同的 ID 值。無(wú)論文檔語(yǔ)言是什么，ID 類(lèi)型的屬性可以用來(lái)地標(biāo)識(shí)它所在的元素。ID 選擇器由數(shù)目符號(hào) (U+0023， #) 和合法的 ID 值組成，ID 選擇器指代具有與定位器匹配的 ID 值的文檔元素，如清單 5 所示 (行末括號(hào)中的數(shù)字顯示當(dāng)前行定位器將定位到清單 4HTML 文檔中的第幾行元素)。當(dāng)在 HTML 中表示 class 屬性時(shí)通常將句點(diǎn)符號(hào) ( U+002E) 作為~=的替代符號(hào)，因此在 HTML 中 div.value 與 div[class~=value] 具有相同的意義，均定位到 class 為 value 的 div 元素。需要特別注意的是形如 p.pastoral.marine{color:green} 的選擇器將匹配到 class 屬性既包含 pastoral 又包含 marine 且二者用空格分隔的 p 標(biāo)簽，例如匹配到 class="pastoral blue aqua marine"而匹配不到 class="pastoral blue"。類(lèi)型選擇器中的類(lèi)型是元素類(lèi)型的名稱(chēng)，類(lèi)型選擇器指代文檔樹(shù)中具有相同類(lèi)型的元素，如清單 5 所示。通配符選擇器使用星號(hào) (* U+002A) 指代任意元素類(lèi)型的合法名稱(chēng)。如果星號(hào)表示的通配符選擇器不是簡(jiǎn)單選擇器序列的組件或者它的后面緊跟著一個(gè)偽元素，那么可以省略該星號(hào)而暗指含有一個(gè)通配符選擇器，然而有些情況下不推薦省略，比如 div *:first-child 比 div :first-child 更易讀，不至于和 div:first-child 混淆。另外類(lèi)型選擇器和通配符選擇器都支持命名空間前綴，命名空間前綴使用豎線 (U+007C， |) 與選擇器分隔，可以為空也可以為通配符星號(hào)。在沒(méi)有命名空間前綴和分隔符的情況下，若沒(méi)有聲明命名空間則表示任意命名空間，若已聲明默認(rèn)命名空間則表示默認(rèn)命名空間。
屬性選擇器
屬性選擇器通過(guò)對(duì)元素屬性進(jìn)行匹配來(lái)進(jìn)行選擇和定位。屬性選擇器又分為存在和值選擇器以及子串匹配屬性選擇器。前者又分為四種:[att] 指代具有 att 屬性的元素，而不論屬性的值是什么；[att=val] 指代屬性的值為 val 的元素；[att~=val] 指代這樣的元素，其屬性值由空格分隔的多個(gè)值組成，其中一個(gè)值和 val 完全匹配；[att|=val] 指代屬性值為 val 或者前綴為“val-”。子串匹配屬性選擇器提供了匹配屬性值子串的能力，比如 [att^=val] 指代屬性值前綴為 val 的元素；[att$=val] 指代屬性值后綴為 val 的元素；[att*=val] 指代屬性值中含有 val 字符串的元素。在這兩種屬性選擇器中屬性值必須為 CSS 合法字符，大小寫(xiě)敏感度與具體的文檔語(yǔ)言有關(guān)。詳細(xì)示例如清單 5 所示。屬性選擇器也支持命名空間前綴，與類(lèi)型和通配符選擇器不同的是對(duì)于沒(méi)有命名空間前綴或者命名空間前綴為空的屬性選擇器，其只匹配到?jīng)]有命名空間前綴的元素。
偽類(lèi)選擇器
偽類(lèi)選擇器可以說(shuō)是定位 Web 元素的后救命稻草，它允許使用文檔樹(shù)以外的信息選取元素，這能完成很多其它選擇器不能完成的工作。偽類(lèi)總是由一個(gè)前面加了冒號(hào)的偽類(lèi)名組成，偽類(lèi)可以存在于所有的選擇器序列中，它可以位于主選擇器或者通配符選擇器之后。偽類(lèi)區(qū)分大小寫(xiě)，有些偽類(lèi)是互斥的，有些偽類(lèi)則可以同時(shí)使用。偽類(lèi)可以是動(dòng)態(tài)的，某種意義上說(shuō)隨著用戶與文檔的交互一個(gè)偽類(lèi)可以獲得或者失去對(duì)一個(gè)元素的匹配。偽類(lèi)從實(shí)現(xiàn)方式可分為動(dòng)態(tài)偽類(lèi)（如互斥的:link 和:visited， :hover， :active， :focus），目的偽類(lèi)（:target），語(yǔ)言偽類(lèi)（:lang），元素狀態(tài)偽類(lèi)（:enabled， :disabled， :checked， :indeterminate），結(jié)構(gòu)偽類(lèi)，內(nèi)含偽類(lèi)和否定偽類(lèi)，若以定位元素為目的的話這里只有結(jié)構(gòu)偽類(lèi)和內(nèi)含偽類(lèi)才對(duì)我們有用，其他偽類(lèi)主要應(yīng)用在元素樣式渲染領(lǐng)域特別是隨著用戶操作自動(dòng)改變?cè)貥邮降膱?chǎng)景。
結(jié)構(gòu)偽類(lèi)可以基于文檔樹(shù)的結(jié)構(gòu)定位元素，其中標(biāo)準(zhǔn)文本和其它非節(jié)點(diǎn)元素沒(méi)有被算進(jìn)父節(jié)點(diǎn)的子節(jié)點(diǎn)列表中，子節(jié)點(diǎn)的位置索引從 1 開(kāi)始計(jì)算。結(jié)構(gòu)偽類(lèi)包含十二種：:root 偽類(lèi)指代文檔的根節(jié)點(diǎn)，在 Html4 中通常指 HTML 元素；:nth-child(an+b)， n>=0 偽類(lèi)指代在第 an+b 個(gè)孩子節(jié)點(diǎn)，即其之前有 an+b-1 個(gè)兄弟節(jié)點(diǎn)的元素，舉例來(lái)說(shuō):nth-child(2n) 指代第偶數(shù)個(gè)孩子節(jié)點(diǎn)，:nth-child(2n+1) 指代第奇數(shù)個(gè)孩子節(jié)點(diǎn)，:nth-child(4) 指代第 4 個(gè)元素孩子節(jié)點(diǎn)；tag:nth-of-type(an+b)， n>=0 指代第 an+b 個(gè)類(lèi)型為 tag 的孩子節(jié)點(diǎn)，非 tag 類(lèi)型的節(jié)點(diǎn)不參與計(jì)數(shù)；:nth-last-child(an+b)，n>=0 偽類(lèi)指代從后往前數(shù)第 an+b 個(gè)孩子節(jié)點(diǎn)，即其后有 an+b-1 個(gè)兄弟節(jié)點(diǎn)；:nth-last-of-type 指代從后往前數(shù)第 an+b 個(gè)類(lèi)型為 tag 的節(jié)點(diǎn)；:first-child，:last-child，:first-of-type，:last-of-type 分別是上述四種偽類(lèi)的特例，指代第一個(gè)或者后一個(gè)孩子節(jié)點(diǎn)；:only-child 偽類(lèi)指代沒(méi)有兄弟節(jié)點(diǎn)的孩子節(jié)點(diǎn)；:only-of-type 偽類(lèi)指代沒(méi)有相同類(lèi)型的兄弟節(jié)點(diǎn)的孩子節(jié)點(diǎn)；:empty 偽類(lèi)指代沒(méi)有孩子節(jié)點(diǎn)的節(jié)點(diǎn)。詳細(xì)示例見(jiàn)清單 5。
內(nèi)含偽類(lèi)（:contains()）通過(guò)元素上包含的文本來(lái)定位元素，由于在翻譯驗(yàn)證性測(cè)試的特殊性，該定位方法需配合英文文本與本地化翻譯文本的映射才能有效使用。
清單 5. CSS 簡(jiǎn)單選擇器
//by ID selector
#loginForm(03)
//by Class selector
.ask(08)
/by Type selector
p.ask(08)
//by Universal selector
*|*(all)
//by attribute presence and value selector
input[value](06)
input[name="continue"](06)
input[class~="required"][name="password"](05)
a[hreflang|="en"](10)
//by substring matching attribute selector
a[href^="cancel"](10)
a[name$="name"](04)
a[name*="pass"](05)
//by structural pseudo-classes
ul#structure li:nth-child(4)//只有當(dāng)?shù)谒膫�(gè)子元素是 li 時(shí)才可成功定位到 (16)
ul#structure li:nth-of-type(4)(17)
ul#structure nth-last-child(3)(15)
ul#structure li:nth-last-of-type(3)(14)
//by contains pseudo-class
li:contains("Cat")(13)
關(guān)系選擇器
由于編碼不規(guī)范等問(wèn)題，僅僅通過(guò)簡(jiǎn)單選擇器有時(shí)候并不能定位到我們預(yù)期得到的元素，這時(shí)我們還可以通過(guò)元素間的代繼關(guān)系，首先定位到目標(biāo)元素的祖先或父親或兄弟節(jié)點(diǎn)，然后借助關(guān)系選擇器進(jìn)行定位。常見(jiàn)的關(guān)系選擇器有后代選擇器、子選擇器和兄弟選擇器三種：后代選擇器使用空格分隔兩個(gè)簡(jiǎn)單選擇器以代表二者具有祖先、后代關(guān)系，形如“A B”的后代選擇器代表目標(biāo)元素 B 為 A 的任意后代元素；子選擇器使用大于號(hào)分隔兩個(gè)簡(jiǎn)單選擇器以代表其父子關(guān)系，形如“A B”的子選擇器代表目標(biāo)元素 B 為 A 的子元素；兄弟選擇器分為兩種，相鄰兄弟選擇器和一般兄弟選擇器。相鄰兄弟選擇器使用加號(hào)分隔兩個(gè)簡(jiǎn)單選擇器以代表二者具有相同的父元素且位置臨近，形如“A + B”的兄弟選擇器代表目標(biāo)元素 B 為緊隨 A 后面的兄弟元素。一般兄弟選擇器使用波浪號(hào)分隔兩個(gè)簡(jiǎn)單選擇器以代表后者與前者具有相同的父元素，而并不要求這兩個(gè)元素位置臨近。如清單 6 所示：
清單 6. 關(guān)系選擇器
//by Descendant combinator
div p(15)
//by Child combinators
body > p(08)
//by General sibling combinator
form + p 或者 div ~ p(08)
技巧&難點(diǎn)拾遺
由上文可見(jiàn)，在編寫(xiě)翻譯驗(yàn)證性測(cè)試自動(dòng)化腳本的時(shí)候一般這樣依次選取定位元素的方法：有 ID 或者 name 屬性直接用其定位。對(duì)于無(wú) ID 或 name 的情況，屬性組合能定位的可采用 CSS 屬性選擇器，文檔結(jié)構(gòu)能定位的可采用 CSS 結(jié)構(gòu)偽類(lèi)選擇器；對(duì)于 CSS 屬性選擇器和結(jié)構(gòu)偽類(lèi)仍不能解決的情況，如果相關(guān)元素可以精確定位的話還可以借助關(guān)系選擇器進(jìn)行定位。后，雖然翻譯驗(yàn)證性測(cè)試自動(dòng)化腳本“一次編寫(xiě)，多個(gè)語(yǔ)言環(huán)境執(zhí)行”的特點(diǎn)限制了 CSS 內(nèi)含偽類(lèi)的開(kāi)箱即用，但是如果能借助外部程序?qū)崿F(xiàn)用戶界面中需要翻譯的英文字符串與翻譯好的本地化字符串之間的映射的話，可以直接在英文環(huán)境下編寫(xiě)自動(dòng)化腳本時(shí)將英文字符串作為內(nèi)含偽類(lèi)的參數(shù)定位元素，當(dāng)在其他本地化環(huán)境下運(yùn)行腳本時(shí)將內(nèi)含偽類(lèi)的參數(shù)替換為本地化字符串即可。
此外，有時(shí)會(huì)發(fā)現(xiàn)明明定位器語(yǔ)法正確但是仍然無(wú)法獲得元素，這可能是由于 iframe 存在的緣故。對(duì)于 iframe 里的元素，要先顯示進(jìn)入那個(gè) iframe 之后才可定位（比如在 selenium IDE 里要先 selectFrame 進(jìn)入那個(gè) iframe，參數(shù)為 iframe 的名字）。
后，實(shí)際應(yīng)用中一般無(wú)需完全掌握 XPath 或 CSS 選擇器的語(yǔ)法，利用一些諸如 XPath Checker 和 Firebug/FirePath 的瀏覽器插件可以方便地獲取 XPath/CSS Path 并驗(yàn)證其正確性（一般在插件控制臺(tái)中可以使用$$() 驗(yàn)證 CSS Path，利用 $x() 驗(yàn)證 XPath）。
總結(jié)
綜上所述，由于 Web 技術(shù)的發(fā)展及翻譯驗(yàn)證性自動(dòng)化測(cè)試需求的特殊性，在編寫(xiě) Selenium 自動(dòng)化腳本定位元素時(shí)存在著一些難點(diǎn)，本文通過(guò)實(shí)例詳述了各種定位尤其是 CSS Path 定位的方法，并針對(duì)上述難點(diǎn)分享了一些個(gè)人見(jiàn)解，希望對(duì)大家有所啟發(fā)。
