自动化测试元素定位最佳实践
乙醇 创建于 8 months 之前
最后更新: less than a minute 之前
阅读数: 1028
最近在翻阅cypress文档的时候发现一些关于自动化测试中元素定位的思考,觉得很有意思,这里跟大家分享一下。
核心概念
其实元素定义的核心概念很简单,一些元素总有自己独一无二的一些特点,比如我们每个人都有身份证号,利用这种独特性对元素进行定位,从而进一步做后续操作。
有道是君子有所为有所不为,一些在实践中被证明了是不合适的做法是最好不要去采用的,比如不要使用有可能发生改变的属性对元素进行定位。
如果你有能力修改前端代码,那么最佳实践就是:加一个定位专用的属性,比如data-*
,这个属性跟js逻辑以及css样式都无关,这样就做到了定位属性与易变属性(dom/css selector/js selector)隔离。
下面的一些做法是cypress不太推荐的,不过见仁见智,不推荐不代表完全不能这样做。
- 不要用css属性定位,比如
id,class,tag
- 不要用可能会发生变化的文本文字进行定位,比如按钮上的文字等
没有对比就没有伤害
cypress的最佳实践里给大家列举了一些例子进行对比,我们感受一下
选择器 | 推荐程度 | 备注 |
---|---|---|
cy.get('button').click() |
永远不要这样做 | 最差的选择,没有任何上下文,太通用 |
cy.get('.btn.btn-large').click() |
永远不要这样做 | 很差,这些class很容易发生修改 |
cy.get('#main').click() |
不太好 | 还行,不过还是跟js和css选择器耦合在一起 |
cy.get('[name=submission]').click() |
不太好 | 跟html的name属性耦合在了一起 |
cy.contains('Submit').click() |
见仁见智 | 好多了,但是仍然跟按钮文本耦合在了一起 |
cy.get('[data-cy=submit]').click() |
最佳选择 | 单独的属性,与css和js隔离 |
然而,人生十不如意有八九
上面的一些观点,原则上我是非常赞同的。
但是呢,现实往往比理论更加立体,cypress的理念是对于被测项目的前端代码,你必须百分百有控制权,也就是说你需要是这个项目的前端开发人员。
cypress就是为前端开发人员设计的,这样的要求自然是合情合理的。
但很多情况是我们其实并没办法修改前端代码的,在这种艰苦的条件下,一些妥协是可以有的,比如
- 可以用html的name属性定位,因为这个属性相对稳定
- 可以用dom的id属性定位,因为改id的概率可能会比较低
- 不要用基于dom层级关系的xpath或css定位,这里一般指的是在浏览器上直接拷贝出来的xpath和css选择器
总之最佳实践是有前提的,不需要一味的去迷信最佳实践,在我们的工作场景中找到最适合自己的最佳实践才是王道。