给大家分享一下UI自动化的2种常见的元素定位方法
1.xpath（特点是功能强大，几乎可以定位所有h5元素，缺点是基于文本查找模式，速度稍慢）
首先我们看xpath的结构组成体
/ 从根节点选取。
// 从匹配选择的当前节点选择文档中的节点，而不考虑它 们的位置。
. 选取当前节点。
.. 选取当前节点的父节点。
@ 选取属性。

样例：
/html/body/div[1] 选取属于/html/body 子元素的第一个 div 元素。
/html/body/div[last()] 选取属于/html/body 子元素的最后一个 div 元素。
/html/body/div[last()-1] 选取属于/html/body 子元素的倒数第二个 div 元素。
/html/body/div[position() ❤️] 选取最前面的两个属于/html/body元素的子元素的 div元素
//input[@type] 选取所有拥有名为type的属性的 input元素 //input[@class='div1- input'] 选取所有 input 元素，且这些元素拥有值为 div1- input 的 class 属性

• 匹配任何元素节点
  @* 匹配任何属性节点

parent 选取当前节点的父节点。 //img[@alt=‘div2- img’]/parent::div 查找到alt属性值为div2-img的图 片，并基于图片位置找到他上一级 的div元素
ancestor 选取当前节点的所有先辈 （父、祖父等）。 //img[@alt=‘div2- img’]/ancestor::div 查找到alt属性值为div2-img的图 片，并基于图片位置找到它所有先 辈div元素
ancestor-or- self 选取当前节点的所有先辈 （父、祖父等）以及当前 节点本身。 //img[@alt=‘div2- img’]/ancestor-or-self::div 查找到alt属性值为div2-img的图 片，并基于图片位置找到它所有先 辈div元素
descendant 选取当前节点的所有后代 元素（子、孙等）。 //div[@name='div2']/descenda nt::img 查找到name属性值的div元素，并 基于div位置找到它下级所有img元 素
descendant- or-self 选取当前节点的所有后代 元素（子、孙等）以及当 前节点本身。 //div[@name='div2']/descenda nt-or-self::img 查找到name属性值的div元素，并 基于div位置找到它下级所有img元 素
following 选取文档中当前节点的结 束标签之后的所有节点。 //input[@name='div1- input']/following::img 查找name属性值为div1-input的 div元素，并基于div的位置找到它 后面节点中所有的img元素
following- sibling 选取文档中当前节点的结 束标签之后的所有同级节 点。 //input[@name='div1- input']/following-sibling::img 查找name属性值为div1-input的 input元素，并基于它的位置找到 它后面节点中的img元素
preceding 选取文档中当前节点的开 始标签之前的所有节点。 //input[@value='查 询']/preceding::img 查找value属性值为查询的input元 素，并基于它的位置找到它前面节 点中所有的img元素
preceding- sibling 选取当前节点之前的所有 同级节点。 //input[@value='查 询']/preceding-sibling::img 查找value属性值为查询的input元 素，并基于它的位置找到它前面节 点中的img元素

text 当前节点的文本 //label[text()='xpath测试'] 查找label标签内文本为xpath测试 的元素
contains 判断某个字符串包含另外 一个字符串 //div[contains(@class, 'test')] 查找class属性值包含test的div元素
starts-with 判断某个字符串以另外一 个字符串开头 //div[starts-with(@class, 'class')] 查找class属性值以class开头的div 元素
ends-with 判断某个字符串以另外一 个字符串结尾 //div[ends-with(@class, 'test')] 查找class属性值以test结尾的div元 素(xpath2.0语法1.0不支持)
last 当前元素的最后一个索引 //body/div[last()] 查找body下最后一个div元素 position 获取当前元素的位置 //body/div[position()=2] 查找body下第二个div元素
not 将一个布尔值或者返回为 布尔值的表达式取反 //div[not(contains(@class, 'test'))] 查找class属性值不包含test的div元 素

| 计算两个节点 集 //div[@class='class1'] | //input[@id='username'] 查找class属性值为class1的div， 以及id属性值为username的input 元素
= 等于 //div[@class='class1’] 查找class属性值为class1的div元 素
!= 不等于 //div[@class!='class1’] 查找class属性值不为class1所有的 div元素
or 或 //div[@class='class1' or @id='xpath'] 查找class属性值为class1、以及id 为xpath的div元素
and 且 //input[@name='div-input' and @class='div2-input'] 查找name属性值为div-input并且 class属性值为div2-input的input 标签

2.css 需要页面支持jQery 语法相对简洁，速度快 但是不如xpath全面

绝对路径
div span 相对路径

element=driver.findElement(By.cssSelector(".s_ipt"));//CSS样式名称定位百度搜索输入框
element=driver.findElement(By.cssSelector("#kw"));//CSSID定位百度搜索输入框
element=driver.findElement(By.cssSelector("div,a"));//CSS定位所有div对象和a对象
element=driver.findElement(By.cssSelector("div a"));//CSS定位div标签内所有的a对象
element=driver.findElement(By.cssSelector("div>a"));//CSS定位父对象是div的所有a对象
element=driver.findElement(By.cssSelector("div+a"));//CSS定位紧接在

对象之后的所有 对象
element=driver.findElement(By.cssSelector("[target='_blank']"));//选择target="_blank" 的所有对象。
element=driver.findElement(By.cssSelector("a[name='tj_trnews'][class='mnav']"));//定位A标签中name='tj_trnews'并且class='mnav'的对象
element=driver.findElement(By.cssSelector("a[href^='http']"));//选择a标签对象中href 属性值以"http" 开头的每个 对象。
element=driver.findElement(By.cssSelector("a[href$='.com']"));//选择a标签对象中href属性值以".com"结尾的对象
element=driver.findElement(By.cssSelector("a[href*='news']"));//选择a标签对象中href属性值中包含news的对象
element=driver.findElement(By.cssSelector("a:nth-last-child(2)"));//选择属于其父对象的首个 对象的每个 对象。
element=driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-nomac.soutu-env-index form#form.fm span.bg.s_ipt_wr.quickdelete-wrap input#kw.s_ipt"));//通过css绝对路径定位

css也可以通过索引nth-child(1)来定位子元素，直接翻译过来就是第几个小孩
　　总结：选择标签后，找第几个小孩即可
　　Select控件第三个Opel
　　#select>select>option:nth-child(3)
　　CheckBox第一个Volvo
　　#checkbox>input:nth-child(1)
　　CheckBox第二个Saab
　　#checkbox>input:nth-child(4)
　　RadioBox第二个Saab
　　#radio>input:nth-child(4)
　　通过索引nth-of-type(2)来定位子元素，按照分类指定
　　选择select的saab
　　#select>select>option:nth-of-type(2);
　　选择 id 为 radio 的 div 下的第 1 个子节点
　　div#radio>input:nth-of-type(4)+label
　　选择id 为radio 的div 下的第4 个input 节点之后挨着的 label
　　节点
　　div#radio>input:nth-of-type(4)~label
　　css:逻辑运算
　　css同样也可以实现逻辑运算，同时匹配两个属性，这里跟xpath不一样，无需写and关键字
　　[type='checkbox'][name='checkbox1']
　　css语法远远不止上面提到的，还有更多更强大定位策略，有兴趣的同学可以继续深入研究