css中的xpath,定位css 和xpath

推荐的定位方式的优先级

优先级最高：ID

优先级其次：name

优先级再次：CSS selector

优先级再次：Xpath

针对css selector和xpath的优先级做一个简单的说明

在项目中我们可能用的最多的是css或者xpath，那么针对这两种，我们优先选择css，原因在哪些？

原因1：css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀

原因2：语言简洁，明了，相对xpath

原因3：前段开发主要是使用css，不使用xpath，所以在技术上面，我们可以获得帮助的机会非常多

1.xpath选择元素

/ 表示直接子节点

//所有的子节点

//li[@text()=‘文本内容’]  通过文本内容查找元素

//div[@id='hello']/../p      通过父节点查找元素

//div[@style]                 有style属性的div

//div[last()]        最后一个div元素

//div[position()<=2]            前两个div元素

//p[@id='ui']/preceding-sibling::div         选择兄弟节点前所有的div元素

//p[@id='ui']/following-sibling::div          选择兄弟节点后所有的div元素

2.css选择元素

2.1  css可以通过元素的id、class、标签这三个常规属性直接定位到

2.2 .css用#号表示id属性,如：#kw

2.3   css用.表示class属性，如：.s_ipt

2.4 .css直接用标签名称，无任何标示符，如：input

>表示直接子节点

div p 表示div下的所有p

hello>p,div       所有的p和所有的div

div+p               兄弟节点，紧挨着div下的p

div~p               兄弟节点div下所有的p

div[@style]       拥有style属性的所有div

div：nth-of-type(1)           元素中为div的第一个

div：nth-of-child(1)          子元素中所有_元素的第一个

driver.find_element_by_css_selector("#kw")

driver.find_element_by_css_selector(".s_ipt")

css 通过name 定位

driver.find_element_by_css_selector("[name='wd']")

css 通过autocomplete 定位

driver.find_element_by_css_selector("[autocomplete='off']")

css 通过type 定位

driver.find_element_by_css_selector("[type='text']")

css 组合标签和属性组合定位

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')")

同时匹配两个属性，中间不用and关键字

driver.find_element_by_css_selector("input[id='kw'][name='wd']")

属性值由多个空格隔开，匹配其中一个值的方法

driver.find_element_by_css_selector("input[class~='btn']")

匹配属性值为字符串开头的方法

driver.find_element_by_css_selector("input[class^='btn']")

匹配属性值字符串结尾的方法

driver.find_element_by_css_selector("input[class$='s_btn']")

匹配被-分割的属性值的方法,如上图的class

driver.find_element_by_css_selector("input[class|='s']")  #要求精确填写的属性值

driver.find_element_by_css_selector('#u_sp > a:nth-child(1)')#id为u_sp的下面的第一个a标签。

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)，如字面意思：倒数第几个标签

E:first-child,第一个标签

E:last-child,最后一个标签

E:only-child,唯一的标签

class 字符串的含有空格,空格用点号代替

li a.js-cartitem-count.cartitem-count

用add 包含多种属性

//*[@data-accountid = '27221' and @data-type='job']

XPath轴(XPath Axes)可定义某个相对于当前节点的节点集：

1、child选取当前节点的所有子元素

2、parent选取当前节点的父节点

3、descendant 选取当前节点的所有后代元素(子、孙等)

4、ancestor选取当前节点的所有先辈(父、祖父等)

5、descendant-or-self选取当前节点的所有后代元素(子、孙等)以及当前节点本身

6、ancestor-or-self选取当前节点的所有先辈(父、祖父等)以及当前节点本身

7、preceding-sibling 选取当前节点之前的所有同级节点

8、following-sibling 选取当前节点之后的所有同级节点

9、preceding   选取文档中当前节点的开始标签之前的所有节点

10、following   选取文档中当前节点的结束标签之后的所有节点

11、self  选取当前节点

12、attribute  选取当前节点的所有属性

13、namespace 选取当前节点的所有命名空间节点