如何在多层Shadow Root节点中按文本定位指定单选按钮？

在WebDriverIO中，shadow$方法仅支持标准CSS选择器，不兼容其自定义的*=文本这类文本匹配语法，这是你之前尝试的方法无效的核心原因。要定位多层Shadow DOM中的文本元素，可通过以下两种可靠方式实现：

方法一：逐层遍历Shadow DOM并筛选文本 #

逐层进入每个Shadow Root，获取目标元素列表后通过文本内容匹配：

// 进入第一层Shadow Root
const classificationShadow = await $("#classification").shadowRoot();
// 找到wc-flyout元素
const flyout = await classificationShadow.$("wc-flyout");
// 找到dropdown-options元素
const dropdownOptions = await flyout.$(".dropdown-options");
// 进入第二层Shadow Root
const dropdownShadow = await dropdownOptions.shadowRoot();

// 获取所有wc-checkbox元素并筛选文本为Fraud的选项
const checkboxes = await dropdownShadow.$$("wc-checkbox");
for (const checkbox of checkboxes) {
    const text = await checkbox.getText();
    if (text.trim() === "Fraud") {
        await checkbox.click();
        break;
    }
}

方法二：直接在浏览器上下文执行JS操作 #

利用executeScript绕过WebDriverIO定位器限制，直接在浏览器端遍历Shadow DOM并定位元素：

await browser.execute(() => {
    // 逐层进入Shadow DOM
    const classificationEl = document.querySelector("#classification");
    const classificationShadow = classificationEl?.shadowRoot;
    if (!classificationShadow) return;

    const flyoutEl = classificationShadow.querySelector("wc-flyout");
    if (!flyoutEl) return;

    const dropdownEl = flyoutEl.querySelector(".dropdown-options");
    const dropdownShadow = dropdownEl?.shadowRoot;
    if (!dropdownShadow) return;

    // 筛选文本为Fraud的单选按钮并点击
    const fraudOption = Array.from(dropdownShadow.querySelectorAll("wc-checkbox"))
        .find(el => el.textContent.trim() === "Fraud");
    fraudOption?.click();
});

关键说明 #

• Shadow DOM是封闭的DOM子树，必须逐层通过shadowRoot()方法进入，无法跨层级直接定位
• 标准CSS选择器不支持文本匹配，因此需要通过getText()或textContent手动筛选元素

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