如何等待Shadow Root内的img元素定位成功？

要等待Shadow Root内的<img>元素可用，核心是先确保宿主元素（包含Shadow Root的元素）加载完成，再在Shadow Root内部执行带等待的查找逻辑——Selenium默认的等待条件无法穿透Shadow Root，直接调用findElement又没有等待机制，所以会出现时而成功时而失败的情况。

具体实现代码 #

// 1. 先等待宿主元素出现（替换成实际的宿主元素CSS选择器）
const hostElement = await driver.wait(until.elementLocated(By.css('.shadow-host')));

// 2. 等待Shadow Root生成（部分元素的Shadow Root不会随宿主立即创建）
const shadowRoot = await driver.wait(async () => {
  const root = await hostElement.getShadowRoot();
  return root !== null;
}, 10000); // 自定义超时时间，单位毫秒

// 3. 在Shadow Root内等待img元素加载完成
const targetImg = await driver.wait(async () => {
  try {
    const img = await shadowRoot.findElement(By.css('img'));
    return img;
  } catch (err) {
    return false;
  }
}, 10000);

代码说明 #

• 宿主元素是Shadow Root的载体，必须先确保它存在于DOM中，才能获取到对应的Shadow Root。
• 部分组件的Shadow Root会延迟生成，所以需要额外等待它不为null。
• 最后通过driver.wait封装查找逻辑，在超时时间内反复尝试，直到找到元素或超时，替代了无等待的findElement调用，避免元素未加载完成时抛出错误。

简化合并写法 #

如果想减少变量、简化代码，可以把步骤合并为一个等待逻辑：

const targetImg = await driver.wait(async () => {
  try {
    const host = await driver.findElement(By.css('.shadow-host'));
    const shadowRoot = await host.getShadowRoot();
    if (!shadowRoot) return false;
    return await shadowRoot.findElement(By.css('img'));
  } catch (err) {
    return false;
  }
}, 10000);

该写法会在超时时间内循环执行回调，直到成功定位到Shadow Root内的img元素。

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