实测系列，均为一些现实中的行业内难题难点攻关，算是最干的最有营养的系列了，欢迎收看，一键三连~
标题的这个问题在之前的学员中有人问过。如何用自动化的手段来实现。
之前在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命令，基本上是：
代码语言：javascript复制js = 'var q=document.getElementById("idddd");q.style.xxx=("xxxx");'
driver.execute_script(js)这样的写法。
那么我们这里理论上的写法应该是先看页面的这些data内的变量名称。
然后：
代码语言：javascript复制js = 'myData._data.fileList.push({name: '简历修改建议', url: '/Users/wangzijia/Downloads/简历修改建议.docx'})'
driver.execute_script(js)看起来很简单，也很容理解。
虽然elementUI还有其他几种上传方式，比如拖拽等等，但是归根结底都是在同步类似fileList这个变量，我们只要抓住这个变量，并让其随意变化即可。
但是新问题就来了，如果页面一开始并没有暴露vue实例中的data呢？
对于此问题，涉及的就是另一个领域的问题了。
本节内容够多了，这个问题我们下节再研究了。
