使用Selenide做E2E测试，动态生成的自动点击input如何上传文件？

问题描述 #

你在使用Selenide编写文件上传E2E测试时遇到了如下场景：

• 文件上传所需的<input type="file">元素并非初始存在于DOM中，仅在点击页面特定按钮后，才会通过JS动态创建
• 该input元素创建后会自动触发点击操作，对应的核心JS代码如下：

const input = document.createElement('input');
input.type = 'file';
input.click();

你希望使用Selenide原生的uploadFile()方法完成文件上传，需要解决input元素未提前存在于DOM时的操作问题。

解决方案1：手动注入隐藏的input元素（推荐） #

绕过原页面的动态创建逻辑，直接向页面注入一个隐藏的文件上传input，再用Selenide原生方法操作：

1. 注入input元素到页面
   通过Selenide的executeJavaScript()方法在页面body中添加隐藏的file input：

   // 注入隐藏的file input，避免干扰页面布局
   executeJavaScript("const input = document.createElement('input'); input.type = 'file'; input.style.display = 'none'; document.body.appendChild(input);");
   

2. 定位元素并上传文件
   注入完成后，用定位器找到该元素，调用uploadFile()上传目标文件：

   // 通过css定位器找到刚注入的隐藏input
   $("input[type='file'][style='display: none;']").uploadFile(new File("你的文件绝对路径/文件名"));
   

3. 触发后续上传逻辑（按需）
   根据页面实际流程，点击上传确认按钮或执行对应JS事件，完成整个上传流程。

解决方案2：拦截原按钮逻辑，复用动态创建的input #

如果希望复用页面原有的动态创建逻辑，可以拦截按钮的默认行为，获取创建后的input元素：

// 给上传按钮添加点击事件拦截，阻止默认的自动文件选择弹窗，同时保留input创建逻辑
executeJavaScript("document.querySelector('#你的上传按钮选择器').addEventListener('click', function(e) { e.preventDefault(); const input = document.createElement('input'); input.type = 'file'; document.body.appendChild(input); });");

// 定位创建后的input元素并上传文件
$("input[type='file']").uploadFile(new File("你的文件绝对路径/文件名"));

注意：需要替换#你的上传按钮选择器为页面中实际的上传按钮定位符，确保拦截逻辑不会影响页面其他交互。

内容的提问来源于stack exchange，提问作者Maksim