[selenium学习----关于元素定位（java）]

By.id -----按元素id

driver.findElement(By.id(“XXX”));

Tips：
1、对于每个页面都是唯一的，定位准确，效率快
2、对于目前前端新框架，可能存在如下问题：
(1)部分页面元素可能没有id字段
(2)元素id可能是动态变化的

By.name-------按元素的名称

driver.findElement(By.name(“XXX”));//获取多个
driver.findElements(By.name(“XXX”));//获取一组

Tips：
同id一样，并不是所有元素都会定义name属性，而且可能会出现重复，因此并不建议使用

By.className-----按元素的类名class定位

driver.findElement(By.className(“XXX”));//单个
driver.findElementS(By.className(“XXX”));//一组

By.tagName------按元素标签，如input,select

driver.findElement(By.tagName(“XXX”));

driver.findElements(By.tagName(“XXX”));
Tips:
往往会有大量相同标签元素，定位具体元素，需要计算数组索引，不建议使用

By.xpath----按元素的相对/绝对路径查找

driver.findElement(By.xpath(“XXX”));
driver.findElement(By.xpath("//[@id=“u1”]/a[7]")//该节点下第8个a标签元素
driver.findElement(By.xpath("//[@id=“u1”]/a") //该节点下的所有a标签元素

Tips:
可分为绝对路径和相对路径两种
一、 绝对路径
方法：根据实际目录，逐层输写。
例子： find_element_by_xpath("/html/body/div[2]/form/span/input") #div[2]指第2个元素
二、相对路径

方法:首先找目录元素是否有”精准元素“即唯一能标识的属性（如：id、name），找到，则用此属性定位；如果目标元素没有唯一属性，则去找到与目标元素相近的上级目录中”唯一元素“作为起始位置，然后根据此相对位置逐层往子目录编写到目标位置

1） 通过元素本身的唯一属性定位

1.1 通过id属性定位

例：find_element_by_xpath("//input[@id=‘input’]") #@后跟属性，可以是任何属性

1.2 通过name属性定位
例：find_element_by_xpath("//div[@name=‘q’]")

2） 通过上一级目录的唯一属性定位

例： find_element_by_xpath("//span[@id=‘input-container’]/input")
find_element_by_xpath("//div[@id=‘hd’]/form/span/input")
find_element_by_xpath("//div[@name=‘q’]/form/span/input")

3) xpath做布尔逻辑运算

例子：find_element_by_xpath("//div[@id=‘hd’ or @name=‘q’]")

4)双条件同时过滤

find_element_by_xpath("//div[@id=‘hd’][@name=‘q’")

5)目录元素存在层级关系

例1： find_element_by_xpath("//ul[@class=‘app-list’]/li[contains(@class,‘safe’)]/div")

例2：定位上一层再定位目标元素（定位dl再定位dt）
find_element_by_xpath("//form[@id='J_login_form]/dl/dt/input[@id=‘J_password’]")

6) 模糊定位

6.1 contains 方法(包含）
find_element_by_xpath("//a[contains(@name,‘trnews’)]")

6.2 start-with方法（以XX开头）
find_element_by_xpath("//a[start-with(@href,‘http’)]")

6.3 text方法

find_element_by_xpath("//a[contains(text(),‘新闻’)]") 查找超链接元素的文本内容

find_element_by_xpath("//*[text()=‘新闻’]") 查找所有内容为退出二字的元素
注意：元素属性值有空格时，尽量不使用带空格，可用contains等其他方法，避开空格

借鉴文章 https://blog.csdn.net/hou_angela/article/details/80305828

By.cssSelector----按css定位元素

driver.findElement(By.cssSelector(".s_ipt"));
driver.findElements(By.cssSelector(“XXX”));

cssSelector也是一种常用的选择器，CSS locator比XPath locator速度快,用CSS Selector能非常精准的定位到想测试的Elements

常见语法：
. 表示class
> 表示子元素，层级
^ 以什么开头
$ 以什么结尾
* 包含什么内容**
#input 选择id为input的节点

部分示例：

.Volvo 选择class为Volvo的节点
div#radio>input 选择id为radio的div下的所有的input节点

div#radio input 选择id为radio的div下的所有的子孙后代input节点

div#radio>input:nth-of-type(4) 选择id为radio的div下的第4个input节点

div#radio>nth-child(1) 选择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)~labe 选择id为radio的div下的第4个input节点之后的所有label节点

input.Vovlo[name=‘identity’] 选择class为.Volvo并且name为identity的input节点

input[name=‘identity’][type=‘radio’]:nth-of-type(1) 选择name为identity且type为radio的第1个input节点

input[name^=‘ident’] 选择以ident开头的name属性的所有input节点

input[name$=‘entity’] 选择以’entity’结尾的name属性的所有input节点

input[name*=‘enti’] 选择包含’enti’的name属性的所有input节点

div#radio>*.not(input) 选择id为radio的div的子节点中不为input的所有子节点

input:not([type=‘radio’]) 选择input节点中type不为radio的所有节点

XPath更强大，而CSS选择器通常语法比较简洁，运行速度更快些

借鉴文章https://blog.csdn.net/qq_40024178/article/details/78945651

By.linkText -----按文字链接中的文字内容，定位元素

driver.findElement(By.linkText(“XXX”));

By.partialLinkText-----按文字链接中的部分文字内容，定位元素

driver.findElement(By.partialLinkText(“XXX”));
Tips:

linkText为完全匹配，partialLinkText为部分包含即可

关于cssSelector 和xpath对比小结

cssSelector也是一种常用的选择器，CSS locator比XPath locator速度快,用CSS Selector能非常精准的定位到想测试的Elements。但xpath所支持的功能更为强大，且目前大多数浏览器通过F12可以轻松粘取到所要元素的绝对路径，使用也相对更为简便，故使用时如何选择，还需结合实际场景

除webdriver外，还可以通过JS定位操作元素

id定位：document.getElementById()
name定位：document.getElementsByName()
tag定位：document.getElementsByTagName()
class定位：document.getElementsByClassName()
css定位：document.querySelectorAll()