Node.js中Selenium WebDriver遇ElementNotInteractableError的解决方法

问题核心分析 #

你当前定位的.filedrop-container width-for-mobile是页面的拖拽上传容器，并非实际负责接收文件的元素。这类可视化拖拽区域通常基于隐藏的<input type="file">原生元素实现，直接操作容器会触发系统文件选择弹窗，而Headless模式下Selenium无法控制系统弹窗，同时容器本身不支持sendKeys方法，进而导致ElementNotInteractableError。

具体解决思路 #

1. 定位正确的文件上传元素
   直接查找页面中隐藏的<input type="file">元素，这才是真正接收文件路径的入口。原生input元素支持sendKeys直接传入本地文件路径，无需触发系统弹窗。

2. 优化Headless Chrome参数
   WSL2环境下运行Headless Chrome需要额外参数规避权限和内存限制：

   • --no-sandbox：禁用沙箱模式，解决WSL下的权限问题
   • --disable-dev-shm-usage：避免/dev/shm内存不足导致的浏览器崩溃
   • --window-size=1920,1080：显式设置窗口大小，确保页面元素正常渲染

3. 修正显式等待逻辑
   避免提前调用driver.findElement，直接将定位器传给until.elementLocated，确保元素完全加载后再进行操作。

修改后的代码示例 #

const { Builder, Browser, By, Key, until } = require("selenium-webdriver");
const chromeDriver = require("selenium-webdriver/chrome");
const chromeOptions = new chromeDriver.Options();

const chromeExample = async () => {
  // 配置Headless Chrome必要参数
  chromeOptions.headless()
    .addArguments("--no-sandbox")
    .addArguments("--disable-dev-shm-usage")
    .addArguments("--window-size=1920,1080");

  const driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .setChromeOptions(chromeOptions)
    .build();

  try {
    await driver.get("https://products.aspose.app/cad/text-extractor/dwg");

    // 等待原生文件上传input元素加载完成
    const fileInput = await driver.wait(
      until.elementLocated(By.css('input[type="file"]')),
      10 * 1000
    );

    // 直接向input元素发送本地文件路径
    await fileInput.sendKeys("/home/yeongori/workspace/Engineering-data-search-service/macro/public/images/testfile1.dwg");

    // 可选：等待上传完成后，定位转换按钮继续操作（需根据页面实际元素调整）
    await driver.wait(
      until.elementIsEnabled(By.className("convert-btn")),
      15 * 1000
    );
    // await driver.findElement(By.className("convert-btn")).click();
  } catch (error) {
    console.error("执行出错:", error);
  } finally {
    // 测试完成后关闭浏览器
    // await driver.quit();
  }
};

// 执行函数
chromeExample();

补充说明 #

• 若页面存在多个<input type="file">元素，可通过更精确的定位器缩小范围，例如By.css('.filedrop-container input[type="file"]')。
• 确保本地文件路径为Linux格式且文件真实存在，WSL2下无法直接访问Windows路径，需使用挂载后的Linux路径。

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