selenium之CSS定位

      功能自動化學習selenium必經之路就是定位，在大部分入門定位中都會涉及id、name、classname定位，這是最簡單的定位，但是由於前端代碼沒有一個規範說一定要使用id、name、classname，在很多前端開發中，使用id、classname大部分都是為了調樣式或者js、jQuery觸發事件，在不使用這些控件觸發事件的前提或者樣式的情況下，大部分是不會有id、classname這種好用的定位，所以xpath、css定位應運而生，靈活的特性在定位中非常好用，但是缺點就是學習成本會很高，特別是css的定位邏輯。當然現在很多瀏覽器都提供了複制xpath、css定位，你可以觀察一下複制出來的定位路徑，要麼就很長、要麼第二天你自己都看不懂是定位什麼，所以還是自己親自來寫，使用自己的邏輯來寫更簡潔更易懂。xpath定位相對於css定位要簡單，下面主要講講CSS定位，當然如果你用xpath定位已經很熟練，css定位可能作用就不大了，兩者任選一種基本都能完成大部分定位啦，技多不壓身，了解下也是可以滴嘛。
        順便解釋一下，很多人在學習功能自動化，經常會被框架所忽悠，比如selenium，會冒出java+selenium、python+selenium、robotframework等，實際呢，三個東西用的都是selenium這套東西，所以在使用定位方法都是一樣的，因為都是selenium；曾經很火的QTP描述性編程用的定位也類似。當然也遇到很多人對框架不理解的，下一篇文章我覺得有必要把測試思想、框架思想這套東西說一下啦。下面以百度為例，為什麼又是百度，因為百度這個首頁是很有代表性的，id、name、class一應俱全。
CSS定位可以在瀏覽器中Console使用$$來驗證，具體使用可以參考《瀏覽器檢查selenium的xpath、css定位，助你輕松搞定元素定位》這篇文章
一、通過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下的第二個元素
總結：相對於xpath，css定位會相對來說更複雜，特別是層級的定位，但是其實搞懂兩點，以大於號>層次的是一層一層下的，而空格則是後代元素，也就是所有的層。當然css定位組合也是很靈活，具有很多可變性，非常實用。