selenium使用css selector和xpath的比较

写在前面的话

我还是那个不怎么会带娃的测试，上周我去参加了一个线下关于“UI自动化测试”的分享，收获颇多，希望能够借助写文章巩固一下知识。
这篇文章主要是对selenium中使用css selector的优点，使用语法，使用注意事项做一个简单的说明。

selenium提供的定位方式（常用）

• ID
• NAME
• CLASS
• CSS SELECTOR
• XPATH

推荐的定位方式的优先级

1. 优先级最高：ID
2. 优先级其次：name
3. 优先级再次：CSS selector
4. 优先级再次：Xpath

针对css selector和xpath的优先级做一个简单的说明

在项目中我们可能用的最多的是css或者xpath，那么针对这两种，我们优先选择css，原因在哪些？

• 原因1：css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀
• 原因2：语言简洁，明了，相对xpath
• 原因3：前段开发主要是使用css，不使用xpath，所以在技术上面，我们可以获得帮助的机会非常多

题外话:据说xpath和css现在基本没有什么太大的区别了，css已经实现了大多数的xpath功能，只有个别功能没有实现。具体的数据列证还需要找更多的数据进行填充。

使用css selector的搜索器帮助我们定位元素

• 选择你需要定位的页面元素，右键单击鼠标，弹出上下文菜单，点击“检查”标签，成功的弹出chrome的开发者工具，
• 在开发者中工具=》elements中，可以使用ctrl+f弹出css selector搜索框，我们可以在这里搜索框中输入“string”，“selector”，“XPath”,回车之后可以搜索到匹配的数据
• 开发者工具=》console模块中，我们可以输入js的代码进行操作，当我们需要使用js定位元素的时候，这里非常有用

css选择器语法

建议直接去这里进行学习，学习成本没有多高

定位元素的注意事项（划重点）

1. 找到待定位元素的唯一属性
2. 如果该元素没有唯一属性，则先找到能被唯一定位到的父元素/子元素/相邻元素，再使用“>”," ","+"等进行辅助定位。
3. 不要使用随机唯一属性定位
4. 最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生。