推薦的定位方式的優(yōu)先級(jí)
優(yōu)先級(jí)最高:ID
優(yōu)先級(jí)其次:name
優(yōu)先級(jí)再次:CSS selector
優(yōu)先級(jí)再次:Xpath
針對(duì)css selector和xpath的優(yōu)先級(jí)做一個(gè)簡(jiǎn)單的說(shuō)明
在項(xiàng)目中我們可能用的最多的是css或者xpath凶赁,那么針對(duì)這兩種,我們優(yōu)先選擇css,原因在哪些弯予?
原因1:css是配合html來(lái)工作叨襟,它實(shí)現(xiàn)的原理是匹配對(duì)象的原理斋射,而xpath是配合x(chóng)ml工作的悠垛,它實(shí)現(xiàn)的原理是遍歷的原理咒吐,所以兩者在設(shè)計(jì)上野建,css性能更優(yōu)秀
原因2:語(yǔ)言簡(jiǎn)潔,明了恬叹,相對(duì)xpath
原因3:前段開(kāi)發(fā)主要是使用css候生,不使用xpath,所以在技術(shù)上面绽昼,我們可以獲得幫助的機(jī)會(huì)非常多
1.xpath選擇元素
/ 表示直接子節(jié)點(diǎn)
//所有的子節(jié)點(diǎn)
//li[@text()=‘文本內(nèi)容’] ?通過(guò)文本內(nèi)容查找元素
//div[@id='hello']/../p ? ? ?通過(guò)父節(jié)點(diǎn)查找元素
//div[@style] ? ? ? ? ? ? ? ? 有style屬性的div
//div[last()] ??? ? ?最后一個(gè)div元素
//div[position()<=2] ? ? ? ? ? ?前兩個(gè)div元素
//p[@id='ui']/preceding-sibling::div ? ? ? ? 選擇兄弟節(jié)點(diǎn)前所有的div元素
//p[@id='ui']/following-sibling::div ? ? ? ? ?選擇兄弟節(jié)點(diǎn)后所有的div元素
2.css選擇元素
2.1? css可以通過(guò)元素的id唯鸭、class、標(biāo)簽這三個(gè)常規(guī)屬性直接定位到
2.2 .css用#號(hào)表示id屬性,如:#kw
?2.3? ?css用.表示class屬性绪励,如:.s_ipt
? 2.4 .css直接用標(biāo)簽名稱肿孵,無(wú)任何標(biāo)示符,如:input
>表示直接子節(jié)點(diǎn)
div p 表示div下的所有p
hello>p,div ? ? ? 所有的p和所有的div
div+p ? ? ? ? ? ? ? 兄弟節(jié)點(diǎn)疏魏,緊挨著div下的p
div~p ? ? ? ? ? ? ? 兄弟節(jié)點(diǎn)div下所有的p
div[@style] ? ? ? 擁有style屬性的所有div
div:nth-of-type(1) ? ? ? ? ? 元素中為div的第一個(gè)
div:nth-of-child(1) ? ? ? ? ?子元素中所有_元素的第一個(gè)
driver.find_element_by_css_selector("#kw")
driver.find_element_by_css_selector(".s_ipt")
css 通過(guò)name 定位
driver.find_element_by_css_selector("[name='wd']")
css 通過(guò)autocomplete 定位
driver.find_element_by_css_selector("[autocomplete='off']")
css 通過(guò)type 定位
driver.find_element_by_css_selector("[type='text']")
css 組合標(biāo)簽和屬性組合定位
driver.find_element_by_css_selector("input[id='kw']")
driver.find_element_by_css_selector("input#kw")
driver.find_element_by_css_selector("input.s_ipt")
driver.find_element_by_css_selector("input:contains('kw')")
同時(shí)匹配兩個(gè)屬性停做,中間不用and關(guān)鍵字
driver.find_element_by_css_selector("input[id='kw'][name='wd']")
屬性值由多個(gè)空格隔開(kāi),匹配其中一個(gè)值的方法
driver.find_element_by_css_selector("input[class~='btn']")
匹配屬性值為字符串開(kāi)頭的方法
driver.find_element_by_css_selector("input[class^='btn']")
匹配屬性值字符串結(jié)尾的方法
driver.find_element_by_css_selector("input[class$='s_btn']")
匹配被-分割的屬性值的方法,如上圖的class
driver.find_element_by_css_selector("input[class|='s']") ?#要求精確填寫(xiě)的屬性值
driver.find_element_by_css_selector('#u_sp > a:nth-child(1)')#id為u_sp的下面的第一個(gè)a標(biāo)簽大莫。
find_element_by_css_selector(“a[id=\”kw1\”]”)
find_element_by_css_selector(“a[name=\”wd\”]”)
find_element_by_css_selector(“a[title=\”web\”]”)
find_element_by_css_selector(“a.RecycleBin”)
E:nth-last-child(n)蛉腌,如字面意思:倒數(shù)第幾個(gè)標(biāo)簽
E:first-child,第一個(gè)標(biāo)簽
E:last-child,最后一個(gè)標(biāo)簽
E:only-child,唯一的標(biāo)簽
class 字符串的含有空格,空格用點(diǎn)號(hào)代替
li a.js-cartitem-count.cartitem-count
用add 包含多種屬性
//*[@data-accountid = '27221' and @data-type='job']
? XPath軸(XPath Axes)可定義某個(gè)相對(duì)于當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)集:
1、child選取當(dāng)前節(jié)點(diǎn)的所有子元素
2只厘、parent選取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
3烙丛、descendant?選取當(dāng)前節(jié)點(diǎn)的所有后代元素(子、孫等)
4羔味、ancestor選取當(dāng)前節(jié)點(diǎn)的所有先輩(父河咽、祖父等)
5、descendant-or-self?選取當(dāng)前節(jié)點(diǎn)的所有后代元素(子赋元、孫等)以及當(dāng)前節(jié)點(diǎn)本身
6忘蟹、ancestor-or-self選取當(dāng)前節(jié)點(diǎn)的所有先輩(父、祖父等)以及當(dāng)前節(jié)點(diǎn)本身
???? 7搁凸、preceding-sibling 選取當(dāng)前節(jié)點(diǎn)之前的所有同級(jí)節(jié)點(diǎn)
???? 8媚值、following-sibling 選取當(dāng)前節(jié)點(diǎn)之后的所有同級(jí)節(jié)點(diǎn)
???? 9、preceding?? 選取文檔中當(dāng)前節(jié)點(diǎn)的開(kāi)始標(biāo)簽之前的所有節(jié)點(diǎn)
???? 10护糖、following?? 選取文檔中當(dāng)前節(jié)點(diǎn)的結(jié)束標(biāo)簽之后的所有節(jié)點(diǎn)
???? 11褥芒、self? 選取當(dāng)前節(jié)點(diǎn)
???? 12、attribute? 選取當(dāng)前節(jié)點(diǎn)的所有屬性
???? 13嫡良、namespace 選取當(dāng)前節(jié)點(diǎn)的所有命名空間節(jié)點(diǎn)