使用Cypress自动化Web应用登录功能时Shadow DOM下输入值未被识别问题求助

根因说明 #

你遇到的问题本质是自定义Shadow DOM输入组件的双向绑定事件未触发：当前绝大多数基于前端框架封装的自定义输入组件，状态存储在框架内部上下文，不会直接读取DOM节点的value属性。你使用{force: true}强制输入时，仅修改了DOM节点的展示值，没有触发组件监听的input/change事件，导致组件内部状态仍为空，提交表单时自然识别不到输入内容。Selenium抛出elementNotInteractable异常也是因为自定义组件默认屏蔽了原生交互校验，原生输入方法无法满足交互触发条件。

Cypress 修复方案 #

1. 优先移除不必要的{force: true}配置，先校验元素可交互性，输入后主动触发对应事件：

// 用户名输入逻辑
cy.get('#LoginUserName')
  .shadow()
  .find('#input')
  .should('be.visible')
  .should('be.enabled')
  .type('AdminUser')
  .trigger('input')
  .trigger('change')
  .blur()

// 密码输入逻辑同理
cy.get('#LoginPassword')
  .shadow()
  .find('#input')
  .should('be.visible')
  .should('be.enabled')
  .type('AdminPassword')
  .trigger('input')
  .trigger('change')
  .blur()

// 提交登录
cy.get('#LoginButton').should('be.enabled').click()

提示：如果触发input/change事件仍未生效，可以查看对应组件的源码，确认其监听的事件类型，部分自定义组件可能会监听blur或自定义事件，替换为对应事件名即可。

2. 如果上述方案还是无法更新状态，可以直接通过JS调用设置值再触发事件：

cy.get('#LoginUserName')
  .shadow()
  .find('#input')
  .invoke('val', 'AdminUser')
  .trigger('input')
  .trigger('change')

Selenium 修复方案 #

针对elementNotInteractable异常，可以直接通过JS执行器操作Shadow DOM元素，绕过原生交互校验同时触发绑定事件：

// 首先获取Shadow DOM内的输入框（Selenium 4+原生支持Shadow DOM操作）
WebElement usernameHost = driver.findElement(By.id("LoginUserName"));
SearchContext shadowRoot = usernameHost.getShadowRoot();
WebElement usernameInput = shadowRoot.findElement(By.id("input"));

// 通过JS设置值并触发事件
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value = 'AdminUser';", usernameInput);
js.executeScript("arguments[0].dispatchEvent(new Event('input'));", usernameInput);
js.executeScript("arguments[0].dispatchEvent(new Event('change'));", usernameInput);

// 密码输入逻辑同理
WebElement passwordHost = driver.findElement(By.id("LoginPassword"));
SearchContext pwdShadowRoot = passwordHost.getShadowRoot();
WebElement passwordInput = pwdShadowRoot.findElement(By.id("input"));
js.executeScript("arguments[0].value = 'AdminPassword';", passwordInput);
js.executeScript("arguments[0].dispatchEvent(new Event('input'));", passwordInput);
js.executeScript("arguments[0].dispatchEvent(new Event('change'));", passwordInput);

// 点击登录
driver.findElement(By.id("LoginButton")).click();

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