Selenium Vue 等这种前端框架生成的前端页面的项目，如何做自动化测试？
众所周知，我们对于 web 项目一般都是采用 Selenium 来做，但是 Selenium 本质上是去通过 dom 节点进行操作的。对于 Vue 等一些框架生成的页面，用传统的 Selenium 貌似没有好的办法来做，请问有没有做过类似项目的童鞋，出来分享下经验？
问题：Selenium 的一些方法在 vue 项目中，不太好使，拖拽，填写等一些操作都无效。用 js 方法也不好使
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 高很多倍
selenium 操作 vue 要找对元素. webpack 的前端都比较繁琐。。。
vdom V 只是 V 在运算中不需要反复渲染而已，又不是说最终到浏览器上了也不渲染，具体难点在哪里能不能说一下，没明白到底有啥问题是不能支持的
而且 vue 官方推荐的测试框架里面就有 selenium，我记得以前用 vue-cli 初始化一个工程出来，test 里面就有 selenium 的内容
https://github.com/vuejs/vue/blob/4821149b8bbd4650b1d9c9c3cfbb539ac1e24589/package.json
搜 selenium
最大的痛点我认为是现在 vue 采用数据双向绑定，前端不会在控件上加类似 id 进行标识，以方便操作 dom，用 selenium 做自动化时由于页面上大部分控件都没有特殊标识，定位很麻烦（不是说不行，可以通过 xpath 用文本等方式定位，但相比 id 定位这种方式复杂很多）
执行 js 脚本会吗
可以参考 Katalon 的定位准则和方式。
可以实际操作一下，如果不将它作为测试框架的话，但是可以参考它们定位元素的方法。或者将它作为辅助工具。
https://docs.katalon.com/katalon-studio/docs/xpath_katalon_studio_tips.html#xpath-basics
没什么难的啊，我当时直接给所有前端元素加上个 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 的层级关系
selenium 的库是可以实现拖拽的呀，好像是什么 actionchains 库
大佬使用 selenium 对 VUE 组件进行自动化落地了吗？我在用的过程中，拖拽无法生效，请问有解决办法吗？