如何在Selenium中定位动态ID的ShadowDom内搜索框？

针对Shadow DOM里带动态类名/ID的搜索框，你可以通过以下几种方式让定位路径保持稳定：

• 依赖元素的静态属性与标签结构
  放弃动态生成的类名和ID，改用元素的固定标签名、角色属性（role）、aria标签（aria-label）或占位符（placeholder）等静态特征。比如原路径里的ui9-static-area-header.ui8wc_92，如果页面中只有一个ui9-static-area-header元素，直接去掉动态类名即可；内层元素不用动态ID，改用搜索框的类型或功能属性。

  示例代码：

  WebElement searchBox = (WebElement) jse.executeScript("""
      return document.querySelector('body > ui9-area > ui9-static-area-header')
                 .shadowRoot.querySelector('[role="search"]')
                 .shadowRoot.querySelector('input[type="text"]');
  """);
  

• 用DOM层级与相对定位缩小范围
  利用元素在DOM树中的层级关系，结合父元素的静态特征定位。比如先找到唯一的ui9-area，再逐层定位到目标Shadow DOM，最后通过搜索框的功能属性匹配。如果浏览器支持CSS伪类:has()，还可以通过关联元素（比如搜索图标）定位：

  示例代码：

  WebElement searchBox = (WebElement) jse.executeScript("""
      return document.querySelector('ui9-area')
                 .querySelector('ui9-static-area-header')
                 .shadowRoot.querySelector(':has(> [icon="search"])')
                 .shadowRoot.querySelector('input[aria-label="搜索"]');
  """);
  

• 递归遍历所有Shadow DOM节点
  写一个JS递归函数，自动遍历页面中所有Shadow DOM树，直接匹配你需要的元素特征（比如input[type="search"]），不用关心层级结构。这种方法适合层级复杂或动态变化的场景：

  示例代码：

  WebElement searchBox = (WebElement) jse.executeScript("""
      function findInShadowDom(selector) {
        function traverse(node) {
          let match = node.querySelector(selector);
          if (match) return match;
          for (let child of node.children) {
            if (child.shadowRoot) {
              match = traverse(child.shadowRoot);
              if (match) return match;
            }
          }
          return null;
        }
        return traverse(document);
      }
      return findInShadowDom('input[type="search"]');
  """);
  

• 通过关联文本或可见元素定位
  如果搜索框旁边有固定的文本（比如"搜索"字样），可以先找到包含该文本的元素，再通过父/子关系定位到搜索框。注意原生JS不支持:contains()，需要用textContent过滤：

  示例代码：

  WebElement searchBox = (WebElement) jse.executeScript("""
      let headerShadow = document.querySelector('ui9-static-area-header').shadowRoot;
      let searchLabel = Array.from(headerShadow.querySelectorAll('span'))
                          .find(el => el.textContent.includes('搜索'));
      return searchLabel.parentElement.shadowRoot.querySelector('input');
  """);
  

内容的提问来源于stack exchange，提问作者Rushit Vashrambhai Patel