使用Selenium+Node.js测试React应用时下拉框选择后页面空白问题

我之前也碰到过类似的react-select组件在Selenium自动化测试中出问题的情况，你遇到的页面空白+JS未启用提示，大概率不是真的JS没开，而是自动化操作触发了React应用的异常，或者元素交互的时机不对导致的。下面给你几个可行的解决方案：

1. 改用Async/Await替代嵌套Then回调，提升异步控制能力 #

你的代码嵌套了多层then回调，很容易出现异步顺序混乱的问题——比如还没等下拉选项完全加载完成就去遍历操作，最终触发应用异常。换成async/await会让逻辑清晰很多，也能更好控制操作时机：

async function selectCityFromDropdown(targetCity) {
  // 等待下拉框容器可点击，再触发展开操作
  const dropdownContainer = await driver.wait(
    until.elementLocated(By.className('react-select__value-container')),
    10000 // 10秒超时，避免无限等待
  );
  await driver.wait(until.elementIsEnabled(dropdownContainer), 5000);
  await dropdownContainer.click();

  // 等待下拉选项列表完全加载
  const options = await driver.wait(
    until.elementsLocated(By.className('react-select__option')),
    10000
  );

  // 遍历选项找到目标城市并点击
  for (const option of options) {
    const optionText = await option.getText();
    console.log('当前选项文本:', optionText);
    if (optionText === targetCity) {
      // 确保选项处于可点击状态再操作
      await driver.wait(until.elementIsEnabled(option), 5000);
      await option.click();
      break; // 找到目标后停止遍历
    }
  }
}

// 调用函数
selectCityFromDropdown(city);

2. 用Actions模拟真实用户的点击行为 #

有时候直接调用元素的click()方法会绕过React的事件处理逻辑，导致应用崩溃。可以试试用Selenium的Actions类模拟真实鼠标的移动+点击流程：

const { Actions } = require('selenium-webdriver');

async function selectCityWithActions(targetCity) {
  const dropdownContainer = await driver.wait(
    until.elementLocated(By.className('react-select__value-container')),
    10000
  );
  
  // 模拟鼠标移动到容器上再点击，更贴近手动操作逻辑
  await new Actions(driver).move({origin: dropdownContainer}).click().perform();

  const options = await driver.wait(
    until.elementsLocated(By.className('react-select__option')),
    10000
  );

  for (const option of options) {
    const optionText = await option.getText();
    if (optionText === targetCity) {
      await new Actions(driver).move({origin: option}).click().perform();
      break;
    }
  }
}

3. 检查浏览器驱动与浏览器版本兼容性 #

如果你的ChromeDriver（或其他浏览器驱动）和本地浏览器版本不匹配，很可能会出现JS执行异常的问题。去对应浏览器的驱动官网下载和当前浏览器版本一致的驱动，替换后再测试。

4. 查看浏览器控制台的具体报错信息 #

在自动化测试运行时，让浏览器自动打开开发者工具，看看页面空白时控制台有没有具体的JS报错，这能帮你精准定位问题根源。比如初始化ChromeDriver时添加参数：

const chromeOptions = new chrome.Options();
chromeOptions.addArguments('--auto-open-devtools-for-tabs');
const driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();

按照上面的方法调整后，应该能解决页面空白的问题。我之前用async/await+等待元素可交互的方式，顺利解决了react-select的自动化操作异常。

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