Selenium Vue 等这种前端框架生成的前端页面的项目,如何做自动化测试?

勇伢子 · December 05, 2019 · Last by 槽神 replied at December 10, 2019 · 2080 hits

众所周知,我们对于web项目一般都是采用Selenium来做,但是Selenium本质上是去通过dom节点进行操作的。对于Vue等一些框架生成的页面,用传统的Selenium貌似没有好的办法来做,请问有没有做过类似项目的童鞋,出来分享下经验?
问题:Selenium 的一些方法在vue项目中,不太好使,拖拽,填写等一些操作都无效。用js方法也不好使

共收到 20 条回复 时间 点赞

selenium的库是可以实现拖拽的呀,好像是什么actionchains库

kuale 回复

试过了,无效

selenium 操作 vue要找对元素. webpack的前端都比较繁琐。。。

vdom V只是V在运算中不需要反复渲染而已,又不是说最终到浏览器上了也不渲染,具体难点在哪里能不能说一下,没明白到底有啥问题是不能支持的
而且vue官方推荐的测试框架里面就有selenium,我记得以前用vue-cli初始化一个工程出来,test里面就有selenium的内容

https://github.com/vuejs/vue/blob/4821149b8bbd4650b1d9c9c3cfbb539ac1e24589/package.json
搜selenium

槽神 回复

我先研究下,我的主要问题是普通的Java selenium相关api来做的,实际操作起来,拖拽等等一些功能好像对其不生效

最大的痛点我认为是现在vue采用数据双向绑定,前端不会在控件上加类似id进行标识,以方便操作dom,用selenium做自动化时由于页面上大部分控件都没有特殊标识,定位很麻烦(不是说不行,可以通过xpath用文本等方式定位,但相比id定位这种方式复杂很多)

ThreeClick 回复

就算不用双向绑定也很少有人每个控件搞一个ID吧😅

ThreeClick 回复

是的,这也是一大痛点

执行js脚本会吗

也试过

可以参考Katalon的定位准则和方式。
可以实际操作一下,如果不将它作为测试框架的话,但是可以参考它们定位元素的方法。或者将它作为辅助工具。
https://docs.katalon.com/katalon-studio/docs/xpath_katalon_studio_tips.html#xpath-basics

勇伢子 回复

不行就别测UI,从接口入手,接口测试维护成本低很多

没什么难的啊,我当时直接给所有前端元素加上个id😏

这个我自然是知道的,但是有时候有这个要求呢

给出你的html代码片段或截图,你说不能拖放,具体要看什么样的组件... 最好能放出demo页 @勇伢子

Karaser 回复

1、我说id只是一个比较浅显的比方,其实这是涉及到前端开发数据交互的一种方式,原来类似与jquery,前端需要考虑数据交换,比方说一个输入框,他需要获取这个款输入的值,他也会主动的在的个控件上加个id(即使不加也会在上级加个标识class之类),这个跟自动化测试其实是一致的,就是说你需要操作这个控件,前端也需要,他们会主动加。换成vue就不一定了(实际上在大多数场景下不要了,而且大多数开发者认为vue下直接操作dom会影响性能,会尽量避免),这就造成现在的vue页面控件基本上没有人为设置的属性标识。对于这样一种页面,有些xapth玩的溜的也可以定位,但是效率会大打折扣。
2、当然有些大佬在团队内有话语权,推动前端去主动加id,这个问题对于他们是不存在的😏

xpath正解,vue本身就是html组件,一个组件内的xpath基本是固定的,分层次往下找就行

ThreeClick 回复

1、用到css还是会添加特殊class名的,其实就算直接操作dom也不会去添加一个ID
2、使用xpath比直接用ID的效率会差很多么,感觉还是要测试一下再说吧
3、使用xpath应该不是什么难点吧,花个几小时学一下不就都能写了么
4、这个问题被说成最大的痛点我不是很赞同

Karaser 回复

不想争论太多哈,xpath和id想对来说用的还是自认为还是比较熟,而且jquery和vue我都用过写过页面,对这两种前端框架还是有一点了解,你可以找一个vue的页面写个selenium脚本试试看。
xpath定位是不难,但是如果每一个元素都需要从父级或者父级的父级,或者n代祖宗开始,你就知道有多蛋疼了,请问原来jquery页面会是这样吗?即便你玩的xpath玩的很溜,这都基本不影响你效率,那项目内推广呢,后续维护呢?你是不是需要想再回想下xpath的层级关系

ThreeClick 回复

这么跟你说吧:
1、同一拨人写前端,以前用jq习惯加ID的用vue也会加,现在用vue不加id的人写jq也不会加的
2、再者,class无论是用jq还是vue,都必须有的,除非前端无样式,cssSelector也是可以用的
3、xpath写的不好维护不是因为xpath本身,而是写的人没写好,多用相对路径配合class-name、id、text,也是很好维护的,至于那么几毫秒的性能差别在UI自动化测试中基本体现不出来,可以忽略不计
4、我不知道新版的selenium对vue的refs有没有支持,如果没有你可以去selenium官方提一个feature request来支持FindBy.refs,因为写vue加ref的几率的确要比ID高很多倍

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up