Cypress无DOM中input元素时能否用selectFile选择文件？

结论 #

可以实现，但需要根据是否能修改应用代码选择不同方案——因为Cypress的selectFile方法默认要求目标<input type="file">元素存在于DOM中。

方案1：修改应用代码（推荐） #

如果有权限调整上传逻辑，只需将动态创建的input元素添加到DOM中（即使设为隐藏），就能直接使用selectFile：

// 调整后的应用上传代码
const inputEl = document.createElement("input");
inputEl.type = "file";
inputEl.multiple = true;
inputEl.style.display = "none"; // 隐藏元素但保留在DOM内
document.body.appendChild(inputEl); // 挂载到DOM
inputEl.click();
inputEl.onchange = (e) => { /* 原处理逻辑 */ };

对应的Cypress测试代码：

// 定位到隐藏的file input，强制选择文件
cy.get('input[type="file"]').selectFile('cypress/fixtures/test.jpg', { force: true });

方案2：不修改应用代码，拦截input创建 #

如果无法调整应用代码，可以通过拦截document.createElement方法，在动态input创建时直接注入测试文件并触发change事件：

// 拦截input元素的创建过程
cy.window().then((win) => {
  const originalCreate = win.document.createElement;
  win.document.createElement = function(tagName) {
    const el = originalCreate.call(this, tagName);
    if (tagName === 'input' && el.type === 'file') {
      // 创建测试文件
      const testFile = new File(['测试文件内容'], 'test.png', { type: 'image/png' });
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(testFile);
      el.files = dataTransfer.files;
      
      // 手动触发change事件，触发应用的上传逻辑
      el.dispatchEvent(new Event('change'));
    }
    return el;
  };
});

// 点击上传按钮触发逻辑
cy.get('[data-testid="upload-btn"]').click();

注意事项 #

• 若应用中动态input未挂载到DOM，selectFile无法直接定位元素，必须通过上述两种方式处理。
• 方案2中需注意匹配应用创建input的时机，确保拦截逻辑在点击上传按钮前执行。

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