Webdriver.io自动化：Chrome中嵌套Shadow元素输入文本失败求助

方案1：使用Webdriver.io原生shadow$链式穿透 #

Webdriver.io v7及以上版本原生支持Shadow DOM元素定位，可通过逐层链式调用shadow$穿透多层Shadow结构：

// 1. 定位弹窗元素（替换为实际弹窗选择器）
const modal = await $('#modal-container');
// 等待弹窗加载完成
await modal.waitForDisplayed();

// 2. 逐层穿透Shadow DOM，替换为各层实际选择器
const shadowLevel1 = await modal.shadow$('[data-test="shadow-layer-1"]');
const shadowLevel2 = await shadowLevel1.shadow$('[data-test="shadow-layer-2"]');
const targetInput = await shadowLevel2.shadow$('[data-test="target-input"]');

// 3. 输入文本
await targetInput.setValue('测试文本');

注意：优先使用data-test这类测试专用属性作为选择器，避免依赖易变动的CSS类或ID。

方案2：通过executeScript直接操作DOM并触发事件 #

如果原生Shadow定位失效，可直接用JS获取Shadow元素并设置值，同时触发前端框架所需的输入事件：

await browser.execute(() => {
  // 逐层获取ShadowRoot，替换为实际DOM选择器
  const modal = document.querySelector('#modal-container');
  const shadow1 = modal.shadowRoot.querySelector('[data-test="shadow-layer-1"]');
  const shadow2 = shadow1.shadowRoot.querySelector('[data-test="shadow-layer-2"]');
  const input = shadow2.shadowRoot.querySelector('[data-test="target-input"]');
  
  // 设置值并触发事件（确保前端框架感知到输入变化）
  input.value = '测试文本';
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('change', { bubbles: true }));
});

方案3：添加显式等待确保元素就绪 #

若之前操作失败是因为元素未完全加载，可添加循环等待逻辑：

// 等待弹窗出现
await browser.waitUntil(async () => {
  const modal = await $('#modal-container');
  return await modal.isDisplayed();
}, { timeout: 5000, timeoutMsg: '弹窗未按时加载' });

// 等待目标输入框在Shadow DOM中可用
const targetInput = await browser.execute(async () => {
  const getInput = () => {
    const modal = document.querySelector('#modal-container');
    if (!modal?.shadowRoot) return null;
    const shadow1 = modal.shadowRoot.querySelector('[data-test="shadow-layer-1"]');
    if (!shadow1?.shadowRoot) return null;
    const shadow2 = shadow1.shadowRoot.querySelector('[data-test="shadow-layer-2"]');
    if (!shadow2?.shadowRoot) return null;
    return shadow2.shadowRoot.querySelector('[data-test="target-input"]');
  };
  
  // 循环等待元素出现
  let input = null;
  for (let i = 0; i < 20; i++) {
    input = getInput();
    if (input) break;
    await new Promise(resolve => setTimeout(resolve, 200));
  }
  return input;
});

// 输入文本
await browser.execute((input, text) => {
  input.value = text;
  input.dispatchEvent(new Event('input', { bubbles: true }));
}, targetInput, '测试文本');

排查要点 #

• 确认弹窗挂载位置：部分第三方弹窗组件会挂载到document.body外层，需调整初始定位的根元素。
• 检查Shadow DOM模式：若为closed模式，外部JS无法访问，需联系开发改为open模式或添加测试钩子。

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