【实测】vue/elementUI 的文件上传按钮，如何用selenium来自动化上传？（上）

实测系列，均为一些现实中的行业内难题难点攻关，算是最干的最有营养的系列了，欢迎收看，一键三连~

标题的这个问题在之前的学员中有人问过。如何用自动化的手段来实现。

之前在windows的时候，大家尚且会用一些桌面自动化脚本如autoit等来解决那种 系统本身的文件选择框。

而同样的问题出现在mac的时候，就完蛋了。mac几乎不允许任何软件可以自动的操作界面，所以要有什么办法来解决呢？

【方案一】 模拟键盘操作

既然无法自动化操作界面，那么selenium模仿物理键盘应该没问题吧？在打开的文件选择器上，纯用键盘来输入文件路径，粘贴，剪切，回车等来实现。但是这个方法有时候并不可靠，但却简单易懂。

【方案二】直接用js或者模拟请求等来实现自动化。

这个方法的难度较高，而且针对不同前端框架的写法也不同。属于要随机应变的，如果js和前端功底不够，不建议尝试。

本节就拿最常见的Vue 和 ElementUI的组合来实现吧~

（在传统的html编写中，上传文件代码的按钮元素为Input type="file" ，所以本质上来说，这个按钮还是一个输入框，所以那时候的人们是直接给这个元素进行send_keys('文件本地路径') 的方式来注入文件的。不过近年来，新的前端样式框架越来越多，上传文件按钮也变得五花八门，对我们selenium自动化来说是很致命的打击。本文便是以最新的时代眼光来解决这个陈年旧事~）

为了更好的测试，我们需要自己新建一个vue项目，并且用elementUI做一个上传文件按钮的功能。

在elementui中文件上传按钮组件为：el-upload

我是直接在elementUI官网复制的demo

代码如下：

大家注意，红圈部分 是本次的重点代码。

我们把代码复制到我们的pycharm中测试：

这里已经有了俩个默认展示用的 文件。

我试着上传第三个文件，点击上传按钮后：

果然弹出了文件选择器，然后我选了一个简历修改建议.docx

页面效果如下：

可以看到第三个文件也上去了。

这里要研究下，为什么前面俩个默认的展示用demo，不用我们上传也一开始就在那了呢？我们要做的自动化不就是想实现这个效果么？

原来，前两个文件在bom层的vue的data中一开始就写好了：

这个fileList是通过el-upload的 固有属性关联的。

那么我们现在来假设一下，假如我们可以让这个fileList 数据直接填充某个文件的名字和地址。那会不会就直接实现了上传文件了呢？

为了验证，我们来做个实验：

步骤一：

在bom层给vue实例加上一个可浏览器暴露的引用：

这样，我们就可以通过myData来在浏览器直接控制vue的内部data

步骤二：在浏览器的控制台console中输入下面命令，然后回车

这样我们就强行给vue的data中加入了这个目标上传文件-简历修改建议。

步骤三：观察dom层效果

可以发现，确实是增加了。

步骤四：再循环增加几个数据测试

效果如下：

所以我们这个猜想大致上是ok的。

但是这个问题还是没完全结束，毕竟在写selenium自动化中，我们要上传一段js命令，基本上是：

js = 'var q=document.getElementById(\"idddd\");q.style.xxx=(\"xxxx\");'
driver.execute_script(js)

这样的写法。

那么我们这里理论上的写法应该是先看页面的这些data内的变量名称。

然后：

js = 'myData._data.fileList.push({name: '简历修改建议', url: '/Users/wangzijia/Downloads/简历修改建议.docx'})'
driver.execute_script(js)

看起来很简单，也很容理解。

虽然elementUI还有其他几种上传方式，比如拖拽等等，但是归根结底都是在同步类似fileList这个变量，我们只要抓住这个变量，并让其随意变化即可。

但是新问题就来了，如果页面一开始并没有暴露vue实例中的data呢？

对于此问题，涉及的就是另一个领域的问题了。

本节内容够多了，这个问题我们下节再研究了。