2. [Java UI] web元素定位

元素定位的原则：通过元素定位表达式，能找到唯一的目标元素。

1. 标签：
2. 属性：id，name，class
3. 文本：超链接

一、六大基础元素定位

1. id 定位 – 通过元素的 id 属性

By.id("XX");

WebElement webElement = driver.findElement(By.id("kw"));
webElement.sendKeys("CSDN”);

2. name 定位 – 通过元素的 name 属性

By.name("XX");

WebElement webElement = driver.findElement(By.name("wd"));
webElement.sendKeys("CSDN”);

3. tagName 标签名定位 – 通过元素的标签名（几乎不用，因为在一个页面中经常会有很多重复的标签名）

By.tagName("XX");

4. className 样式名定位 – 通过元素的 class 属性
   坑1：样式名要以实际运行场景为准
   坑2：样式名的值有多个的情况下，不支持的；此时可以用其中一个样式来进行定位

By.className("XX");

driver.findElement(By.className("s_ipt")).sendKeys("CDSN");
driver.findElement(By.className("s_ipt")).click();

5. linkText 超链接完整文本定位 – 通过超链接元素文本值（完整的）来进行定位

By.linkText("XX");

driver.findElement(By.linkText("hao123")).click();

6. partialLinkText 超链接部分文本定位 – 通过超链接元素文本值（部分的）来进行定位

By.partialLinkText("XX");

• 优先级：id定位 > name定位 > className定位 > linktText定位
• findElement：找到符合定位条件的一个元素（如果符合条件的元素有多个的情况下，默认使用第一个元素）
• findElements：找到符合定位条件的所有元素

二、 cssSelector元素定位

1. 根据元素标签名定位，类似By.tagName()

By.cssSelector("input");

List<WebElement> allElement = driver.findElement(By.cssSelector("input"));
system.out.println(allElement.size());

2. 根据ID，类似By.id()

By.cssSelector("#id");
By.cssSelector("标签名#id"); 

3. 根据className(样式名)，类似By.className(), 能支持多样式定位

By.cssSelector(".样式名");
By.cssSelector("标签名.样式名"); 

4. 单属性选择定位

By.cssSelector("标签名[属性名='属性值']");

5. 多属性选择定位

By.cssSelector("标签名[属性1='属性值'][属性2='属性值']");

三、 xpath元素定位

• xpath其实就是一个path（路径），一个描述页面元素位置信息的路径，相当于元素的坐标
• xpath基于XML文档树状结构，是XML路径语言，用来查询xml文档中的节点
• 既可以用于XML，也可以用于HTML

1、xpath绝对定位 --禁止
绝对路径以单/号表示，而且是让解析引擎从文档的根节点开始解析，也就是html这个节点下开始解析

/html/body/div[2]/div/form/div[5]/button

缺点 ：后期维护性差

2、xpath相对定位

打开UI上XPath搜索框的快捷键：ctrl+F(windows)，start+F(Mac)

相对路径则以//表示，则表示让解析引擎从文档的任意符合的元素节点开始进行解析

定位方式

• 属性定位

//标签名[@属性名='值']
//标签名[@属性名1='值1' and @属性名2=‘值2’] 

• 文本定位

//标签名[text()='值']

• 模糊匹配

  属性模糊匹配

//标签名[contains(@属性名,'值')]  

文本模糊匹配

//标签名[contains(text(),'值')]  

• 层级关系定位

  使用场景：

   如果通过常规的方法定位到的元素不是唯一的，那么可以考虑先通过他们不同的父级或父级的父级来定位。
  

  方式一：先找父级再找对应元素

//*[@id='father']/child

方式二：先找父级的父级…再找对应元素

//*[@id='ancestor']//child

xpath轴定位

以上方式都无法定位到元素的情况下，可以考虑轴定位

轴名称	释义
ancestor	选取当前节点的所有祖先节点（包括父节点）
parent	选取当前节点的父节点
preceding	选取当前节点之前的所有节点
preceding-sibling	选取当前节点之前的所有兄弟节点–找哥哥
following	选取当前节点之后的所有节点
following-sibling	选取当前节点之后的所有兄弟节点–找弟弟

使用语法：

轴名称::标签名

示例：

//a[text()='登录']//parent::td

总结

1、六大基础元素定位：id、name、classname、tagname、linktext、partialLinktext

2、css Selector选择器定位，支持基础的id、tagname、class属性的定位，以及还支持其他的属性选择/多属性组合选择定位

3、xpath定位，绝对路径-不要用
4、相对路径：

• 属性
• 文本
• 模糊匹配
• 层级关系
  5、 补充：
  https://www.cnblogs.com/ybbybb/p/14279974.html
  https://blog.csdn.net/m0_64132019/article/details/124391275
  html行元素有哪些： https://m.php.cn/faq/483611.html
  HTML基础知识： https://blog.csdn.net/weixin_44706267/article/details/121022104
  html行内元素和块状元素有哪些： https://www.php.cn/faq/470675.html

常见面试题

1、请尽可能多的列出自动化测试中元素定位方式，以及你最常用的定位方式？

2、如果一个元素无法定位，你一般会考虑哪些方面的原因？

3、动态属性元素如何定位？