- 1. 介绍XPath和CssSelector
- 2. XPath有哪些方式
- 3. CssSelector有哪些方式
- 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的选择
根据Microsoft的推荐: 也是推荐CssSelector, 理由如下:
- Xpath在不同浏览器中会不同(Xpath engines are different in each browser)
- Xpath比较难阅读(XPath can become complex and therefore more difficult to read)
- Css selector更快(CSS selectors are faster)
- Css是一种基于JQuery的定位策略(CSS is JQuery's locating strategy)
- IE没有Xpath引擎(Internet Explorer does not have a native XPath engine)
CssSelector的劣势:
- 无法找到某元素的父亲元素(当然这种也很难遇到)
所以个人定位经验总结:
- 首先考虑这个元素有无唯一的属性, 比如id/name;
- 查看改元素有无唯一的text, 用CssSelector的text()定位;
- 这个元素是否为多个属性, 多个属性用And连接起来是否可能唯一, 用CssSelector的And关键字;
- 首选从这个元素的父亲元素/祖宗元素, 有无唯一属性, 善用CssSelector的后代选择器和子元素选择器;
- 使用约束, 用findelements(By.CssSelector("")).first(ele => ele.Text == "");
- 再复杂的我目前还没见过;
5. 定位的一些优化方法
- 尽可能的不要用findelements
List<IWebElement> elements = driver.findelements(By.CssSelector(""));
element = elements.first()
- 尽量减少和服务的通信:
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();
}