如何在Cypress JS中获取#shadow-root (user-agent)并修改div值

user-agent shadow root是浏览器原生组件的封闭影子DOM，常规网页脚本无法直接访问，以下是几种可行的处理方式：

• 临时调试修改（仅用于测试）
  打开Chrome DevTools（F12），定位到包含shadow root的元素，右键选择「Reveal in Elements panel」，展开shadow root节点后可直接修改DOM内容，不过此修改仅临时生效，页面刷新后会重置。

• 通过浏览器扩展/用户脚本操作
  只有拥有特殊权限的环境（如浏览器扩展、Tampermonkey用户脚本）才能访问封闭的user-agent shadow root。示例代码：

  // 先定位到包含shadow root的宿主元素
  const hostElement = document.querySelector('your-host-element-selector');
  // 访问shadow root
  const shadowRoot = hostElement.shadowRoot;
  if (shadowRoot) {
    // 找到要修改的div元素
    const targetDiv = shadowRoot.querySelector('div.target-class-or-id');
    if (targetDiv) {
      targetDiv.textContent = '你需要的新值';
    }
  }
  

• 替代方案：直接操作关联的表单控件
  如果你的需求是修改输入框的显示值，直接修改shadow root内的div可能无效，因为原生组件的显示值通常和底层<input>元素绑定。可以尝试修改input的value并触发事件：

  const targetInput = document.querySelector('your-input-selector');
  targetInput.value = '新的输入值';
  // 触发input事件以同步组件状态
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  

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