XPath和CssSelector定位总结

• 1. 介绍XPath和CssSelector
• 2. XPath有哪些方式
  • 2.1 通过XPath语法
  • 2.2 Contains关键字
  • 2.3 Start-With
  • 2.4 Or和And关键字
  • 2.5 Text()
  • 2.6 轴方法
  • 2.7 补充知识点
    • 2.7.1 绝对路径和相对路径的区别
    • 2.7.2 XPath在不同浏览器上的区别
• 3. CssSelector有哪些方式
  • 3.1 类选择器
  • 3.2 属性选择器
  • 3.3 后代选择器
  • 3.4 子元素选择器
  • 3.5 伪类选择器
• 4. XPath和CssSelector的选择
• 5. 定位的一些优化方法
• 6. 参考资料

---

本文链接: https://www.cnblogs.com/hchengmx/p/10755116.html

1. 介绍XPath和CssSelector

XPath: XPath 最初是用来在 XML 文档中定位 DOM 节点的语言，由于 HTML 也可以算作 XML 的一种实现，所以 Selenium 也可以利用 XPath 这一强大的语言来定位 Web 元素。XPath 在传统属性定位之外扩展了诸如“定位第三个多选框”等定位能力，以便应对没有 ID 或 name 属性的情况。

CSS (Cascading Style Sheets) 是一种用于渲染 HTML 或者 XML 文档的语言，CSS 利用其选择器可以将样式属性绑定到文档中的指定元素，即前端开发人员可以利用 CSS 设定页面上每一个元素的样式。所以理论上说无论一个元素定位有多复杂，既然开发人员能够定位到并设置样式，那么测试人员同样应该也能定位继而操作该元素。
多个 CSS 选择器还可以用逗号拼接为一个组合选择器，满足任意其中一个选择器的元素都会被该组合选择器选中，逗号的前后允许出现空白。

所以 从工作机制来讲：XPath使用路径标记在XML文档层次结构中进行导航，简单说就是遍历文档路径。Selector则是一种匹配模式，速度上优化于XPath。

2. XPath有哪些方式

2.1. 通过XPath语法

XPath = //tagname[@attribute='value']

• // 目前的节点
• tagname:想要选的节点的tag,input，div，img等, 但也经常被替换为*
• Attribute: 想要选择节点的属性
• Value: 属性的值

用XPath选择的其他例子:

Xpath=//input[@type='text']             
Xpath=  //label[@id='message23']
Xpath=  //input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='http://demo.guru99.com/']
Xpath= //img[@src='//cdn.guru99.com/images/home/java.png']

补充知识点2: 如何用XPath获取该元素的父亲:

public static IWebElement GetParent(this IWebElement element)
{
    return element.FindElement(By.XPath(".."));
}

2.2. Contains关键字

适用于某个属性动态的值变化, 但是其值总是包含什么特定的字符串。

//*[contains(@id,'message')]

2.3. Start-With

可以理解为contains的延申, 选择某元素的值总是以XXX开头

Xpath=//label[starts-with(@id,'message')]

2.4. Or和And关键字

用Or的话, 两个条件其中之一为真则为真, 用And的话, 两个条件均为真则真(个人用And多一点, 用来筛选元素)。

Xpath=//input[@type='submit' and @name='btnLogin']

2.5. Text()

适用于其内的text在页面唯一的情况, 书写起来也最简单;

2.6. 轴方法

轴名称	结果
ancestor	选取当前节点的所有先辈（父、祖父等）。
ancestor-or-self	选取当前节点的所有先辈（父、祖父等）以及当前节点本身。
attribute	选取当前节点的所有属性。
child	选取当前节点的所有子元素。
descendant	选取当前节点的所有后代元素（子、孙等）。
descendant-or-self	选取当前节点的所有后代元素（子、孙等）以及当前节点本身。
following	选取文档中当前节点的结束标签之后的所有节点。
namespace	选取当前节点的所有命名空间节点。
parent	选取当前节点的父节点。
preceding	选取文档中当前节点的开始标签之前的所有节点。
preceding-sibling	选取当前节点之前的所有同级节点。
self	选取当前节点。

eg:

Xpath=//*[@type='text']//following::input
Xpath=//*[@id='java_technologies']//child::li
Xpath=//*[text()='Enterprise Testing']//ancestor::div
Xpath=//*[@id='rt-feature']//parent::div

2.7. 补充知识点

2.7.1. 绝对路径和相对路径的区别

绝对路径:以单斜杠 / 开头, 表示选择当前节点, 一般从根节点来选取元素, 通过这样的XPath表达式特别长:

html/body/div[3]/div/div[2]

相对路径:以双斜杠 // 开头，可以选择页面上的任何元素

2.7.2. XPath在不同浏览器上的区别

以下来自selenium官方文档, 原文可以看这里。

从原理上来讲, 每个浏览器都应该有自己的原生xpath方法，要是没有的话，才会用selenium提供的方法。
具体区别如下:

Driver	Tag and Attribute Name	Native XPath Support
HtmlUnit Driver	Lower-cased	Yes
Internet Explorer Driver	Lower-cased	No
Firefox Driver	Case insensitive	Yes

下面是一个例子:

<input type="text" name="example" />
<INPUT type="text" name="other" />

用代码

List<WebElement> inputs = driver.findElements(By.xpath("//input"));

用几个driver分别会找到下面几个元素

XPath expression	HtmlUnit Driver	Firefox Driver(同chrome)	Internet Explorer Driver
//input	1 (“example”)	2	2
//INPUT	0	2	0

3. CssSelector有哪些方式

3.1 类选择器

语法: tag.class

eg:

div.ibm-alternate-rule

3.2 属性选择器

语法: css=tag[attribute=value], 更多包括通配符的例子可以看这里。

eg:

ul[role='tablist']

3.3 后代选择器

详细介绍可以看这里

语法:

tag1 tag2   //tag1的所有后代中的tag为tag2的

eg:

div.sidebar a //结合类选择器使用, 找到属性为div且class为sidebar的所有tag为a的后代

3.4 子元素选择器

详细介绍可以看这里

语义: 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

eg:

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

3.4 伪类选择器

动态伪类: 未被访问/已被访问/活动/获得焦点
UI元素状态伪类: 第n个孩子;
CSS3的：nth选择器: element 状态(禁用/启用/被选中)

可以在这里 查看详情。

4. XPath和CssSelector的选择

XPath的劣势:

1. 不同的浏览器 XPath 引擎不同甚至没有自己的 Xpath 引擎，这就导致了 XPath 定位速度较慢
2. Xpath往往变得复杂，因此在我看来很难阅读

CssSelector的劣势:

1. 无法找到某元素的父亲元素(当然这种也很难遇到)

所以个人定位经验总结:

1. 首先考虑这个元素有无唯一的属性, 比如id/name;
2. 查看改元素有无唯一的text, 用CssSelector的text()定位;
3. 这个元素是否为多个属性, 多个属性用And连接起来是否可能唯一, 用CssSelector的And关键字;
4. 首选从这个元素的父亲元素/祖宗元素, 有无唯一属性, 善用CssSelector的后代选择器和子元素选择器;
5. 使用约束, 用findelements(By.CssSelector("")).first(ele => ele.Text == "");
6. 再复杂的我目前还没见过;

5. 定位的一些优化方法

1. 尽可能的不要用findelements

List<IWebElement> elements = driver.findelements(By.CssSelector(""));
element = elements.first()

1. 尽量减少和服务的通信:

if(driver.findelements(By.CssSelector("li[role='radio']").Count() != 0)
{
    driver.findelement(By.CssSelector("li[role='radio']")).click();
}

上面需要和driver通信两次, 查找元素两次, 可以考虑替换为下面的代码。

var element = driver.findelement(By.CssSelector("li[role='radio']"))
if(element!=null)
{
    element.click();
}

6. 参考资料

1. XPath in Selenium WebDriver: Complete Tutorial
2. 全球化测试中利用 Selenium 定位 Web 元素难点解析
3. 记一次元素定位优化行动
4. XPath 语法
5. XPath 节点
6. XPath Axes（轴）
7. selenium官方关于xpath的介绍
8. 一招让 IOS 自动化化快的飞起

---

本文希望对您有所帮助，如何问题可联系我的个人微信

转载于:https://www.cnblogs.com/hchengmx/p/10755116.html