Selenium Webdriver中sendKeys无效无法触发表单JS验证问题

方案1：调整元素等待与交互逻辑，使用原生输入触发验证 #

elementLocated仅验证元素存在于DOM树，无法保证元素处于可交互状态，优先调整等待条件后再执行输入、失焦操作：

// 未引入Key依赖需先引入：const { Key } = require('selenium-webdriver');
await driver.wait(until.elementIsVisible(driver.findElement(By.className('combi-select__input'))), 15000);
const sets = await driver.findElement(By.className('combi-select__input'));

// 先主动聚焦元素
await sets.click();
await sets.sendKeys("IRELAND");
// 优先用原生TAB触发失焦
await sets.sendKeys(Key.TAB);
// 若TAB无效可直接通过JS触发失焦事件
// await driver.executeScript("arguments[0].blur();", sets);

方案2：手动赋值后主动派发校验事件 #

如果原生sendKeys始终无法填入内容，在JS修改值后手动触发前端表单监听的输入、变更、失焦事件，即可激活验证逻辑：

await driver.wait(until.elementLocated(By.className('combi-select__input')), 15000);
const sets = await driver.findElement(By.className('combi-select__input'));
    
await driver.executeScript("arguments[0].setAttribute('value','IRELAND');", sets);
// 依次触发三类常用校验监听事件，bubbles设为true保证事件能冒泡到上层绑定的校验逻辑
await driver.executeScript(`
  arguments[0].dispatchEvent(new Event('input', { bubbles: true }));
  arguments[0].dispatchEvent(new Event('change', { bubbles: true }));
  arguments[0].dispatchEvent(new Event('blur', { bubbles: true }));
`, sets);

注意事项 #

• 部分组合选择器组件的combi-select__input为外层展示容器，真实可交互的输入框是其内部的<input>子元素，可先打印await sets.getTagName()确认定位元素是否为真实输入节点，若不是需调整选择器定位到实际输入标签。
• 若表单绑定的是特定的自定义校验事件，可替换上述dispatchEvent中的事件名为对应自定义事件名即可。

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