Protractor使用sendKeys发送TAB、RETURN键时报sendKeysToActiveElement错误

错误触发原因 #

该UnsupportedOperationError: sendKeysToActiveElement报错的核心原因是调用全局键盘事件时，页面没有可接收按键的激活态交互元素，按键事件找不到发送目标，具体由以下代码问题导致：

1. 全局browser.actions().sendKeys()没有绑定具体元素，依赖当前页面自动激活的焦点，TAB键按下后没有校验目标输入框是否成功聚焦，焦点状态不可控。
2. 下拉选项选择逻辑存在错误：by.cssContainingText('ng-dropdown-panel ng-select-top', '+91')的选择器写法错误，空格代表后代选择器，实际ng-dropdown-panel和ng-select-top是同一元素的两个类，应该用.连接，导致匹配不到目标选项；同时代码仅查询了元素，没有做点击/聚焦操作，直接按回车时焦点不在下拉选项上，事件无法下发。
3. 缺少异步等待逻辑：点击输入框后下拉面板是异步渲染的，未等面板渲染完成、选项可交互就直接触发按键操作，也会导致焦点不存在。
4. 原代码缺少搜索文本输入步骤，不符合先搜索再选中的操作逻辑，下拉面板未触发筛选也可能导致选项未加载。

解决方案 #

按照以下步骤修改代码即可解决：

1. 修正下拉选项的CSS选择器，确保能正确匹配到+91的选项元素
2. 所有按键操作优先绑定到具体目标元素，不依赖全局激活焦点
3. 增加显式等待，等下拉面板和目标选项渲染完成后再执行选中操作
4. 补充输入搜索内容的步骤，触发下拉选项筛选

修正后的参考代码：

// 提前声明ExpectedConditions工具类
const EC = protractor.ExpectedConditions;

// 按TAB后先等待目标国家码输入框可交互
browser.actions().sendKeys(protractor.Key.TAB).perform();
const countryInput = page.getUsercountrycodeinput();
browser.wait(EC.elementToBeClickable(countryInput), 5000).then(() => {
  countryInput.click();
  // 输入搜索内容触发下拉选项筛选
  countryInput.sendKeys('+91');
  // 修正选择器，匹配渲染出来的+91选项，可根据实际页面结构调整标签选择器
  const targetOption = countryInput.element(by.css('.ng-dropdown-panel.ng-select-top'))
    .element(by.cssContainingText('span', '+91'));
  browser.wait(EC.elementToBeClickable(targetOption), 5000).then(() => {
    // 优先直接点击选项，兼容性比发送回车更好，也可根据需求替换为sendKeys回车操作
    targetOption.click();
  });
});

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