UI自动化测试中，selenium常用css表达式、Xpath表达式进行元素定位

路径选择

从根节点开始的，到某个节点，每层都依次写下来，每层之间用 / 分隔的表达式，就是某元素的 路径

• Xpath : /html/body/div
• CSS : html>body>div

相对路径选择

选择所有div元素里面的子节点p

• Xpath : //div//p
• CSS :
  1. 选择直接子元素（父元素是div的p元素）div>p
  2. 选择后代子元素（div元素里的所有p元素）div p

通配符*

选择所有div节点的所有直接子节点

• Xpath : //div/*
• CSS : div>*

根据属性选择

选择所有class为a的b元素

• Xpath : //b[@class='a']
• CSS : .a

选择style属性为color的所有元素

• Xpath : //*[@style='color']
• CSS : [style='color']

选择a属性包含b的所有元素

• Xpath : //*[contains(@a,'b')]
• CSS : [a*='b']

选择a属性开头为b的所有元素

• Xpath : //*[starts-with(@a,'b')]
• CSS : [a^='b']

选择a属性结尾为b的所有元素(xpath2.0语法，浏览器不支持)

• Xpath : //*[ends-with(@a,'b')]
• CSS : [a$='b']

选择a属性包含a1，b属性开头b1，c属性结尾为c1的d元素

• CSS : d[a*='a1'][b^='b1'][c$='c1']

按次序选择元素

选择父元素为div中的p类型第2个子元素

• Xpath : //div/p[2]
• CSS : div p:nth-child(2)

选择父元素为div的第2个子元素

• Xpath : //div/*[2]
• CSS : div :nth-child(2)

选取p类型倒数第2个子元素

• Xpath : //p[last()-1]
• CSS : p:nth-last-child(2)

选择a元素的第n个p子节点

• CSS : a p:nth-of-type(n)

选择a元素的倒数第n个p子节点

• CSS : a p:nth-last-of-type(n)

选择a元素的偶数子节点

• CSS : a p:nth-of-type(n)

选择a元素的奇数子节点

• CSS : a :nth-child(even)

选择a元素的p类型的偶数子节点

• CSS : a p:nth-of-type(even)

选择a元素的p类型的奇数子节点

• CSS : a p:nth-of-type(even)

按范围选择元素

选取option类型第1到2个子元素

• Xpath : //option[position()<=2]

选择class属性为a的前3个子元素

• Xpath : //*[@class='a']/*[position()<=3]

选择class属性为a的后3个子元素

• Xpath : //*[@class='a']/*[position()>=last()-2]

组选择

选所有class为a的元素，和所有id为b的元素

• Xpath : //*[@class='a'] | //*[@id='b']
• CSS : .a , #b

根据子节点选择父节点

父节点没有特征，但子节点有特征时，可通过子节点定位父节点

查找后2代元素包含a元素的节点

• Xpath : //a/../..

兄弟节点选择

选择 class 为 a 的元素的所有后续兄弟节点

• Xpath : //*[@class='a']/following-sibling::*
• CSS : .a ~ *

选择 class 为 a 的元素的所有前置兄弟节点

• Xpath : //*[@class='a']/preceding-sibling::*
• CSS : 不支持