Angular自动化测试：sendKeys与executeScript的差异及替代实现

核心差异 #

• sendKeys方法：Selenium原生模拟用户输入行为，会完整触发focus、keydown、keypress、keyup、input等一系列DOM事件。Angular的数据绑定依赖这些事件感知值的变化，因此插值功能能正常更新视图。
• executeScript直接修改value：只是直接改动DOM元素的value属性，但不会自动触发Angular所需的输入事件，Angular检测不到值的变化，导致插值功能失效。额外添加的click()仅触发点击事件，无法替代输入事件对数据绑定的触发作用。

用executeScript实现sendKeys的完整效果 #

要让Angular同步更新视图，需在修改value后手动触发必要事件，或调用Angular内部的更新逻辑，以下两种方案可靠有效：

方案1：触发DOM输入事件 #

修改value后，手动触发input和change事件（Angular表单核心监听事件）：

WebElement stateSelect = driver.findElement(By.id("name"));
((JavascriptExecutor) driver).executeScript("" +
    "arguments[0].value='testing angular interpolation';" +
    // 触发input事件，通知Angular值已变化
    "var inputEvent = new Event('input', { bubbles: true });" +
    "arguments[0].dispatchEvent(inputEvent);" +
    // 可选：触发change事件，适配依赖该事件的场景
    "var changeEvent = new Event('change', { bubbles: true });" +
    "arguments[0].dispatchEvent(changeEvent);", 
stateSelect);

方案2：调用Angular内部API（更适配框架） #

如果是Angular表单控件，直接调用ngModel控制器方法，强制同步数据绑定：

WebElement stateSelect = driver.findElement(By.id("name"));
((JavascriptExecutor) driver).executeScript("" +
    "arguments[0].value='testing angular interpolation';" +
    // 获取Angular的ngModel控制器实例
    "var ngControl = angular.element(arguments[0]).controller('ngModel');" +
    "if (ngControl) {" +
    "   ngControl.$setViewValue(arguments[0].value);" +
    "   ngControl.$render();" +
    "}" +
    // 同时触发input事件兼容其他监听逻辑
    "var inputEvent = new Event('input', { bubbles: true });" +
    "arguments[0].dispatchEvent(inputEvent);", 
stateSelect);

补充说明 #

sendKeys能正常工作的原因，在于它完全模拟真实用户的输入流程，每一次按键都会触发对应的键盘事件，Angular的表单监听会自动捕获这些事件，更新ngModel并触发变更检测，最终让插值表达式实时更新视图。

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