从影子根节点下的列表中通过文本查找特定元素

Question

我有一个使用 WebDriverIO 和 Typescript 自动化的网页。我想单击位于影子根节点深处的单选按钮列表中的单选按钮，如下所示：

这就是我所做的并且它有效（我想单击带有文本=“欺诈”的单选按钮）

var listOfClassifications = await $("#classification").shadow$("wc-flyout").$("[slot='flyout-content']").$$("wc-dropdown-option");
await listOfClassifications[4].click();

现在，该列表的顺序可以更改，因此我尝试通过文本单击此单选按钮。我尝试了以下方法：

await $("#classification").shadow$("wc-flyout").$(".dropdown-options").shadow$("wc-checkbox*=Fraud").click();

or 

await $("#classification").shadow$("*=Fraud").click();

但没有任何效果。

如何在这个深层阴影根节点中找到这个特定元素？

Answer 1

我的解决方案是，我编写一个函数来循环遍历

shadow-root

下的项目数组，获取每个项目的文本并比较文本，然后单击具有我要查找的文本的项目，如下：

var listOfClassifications = await this.dialogClassification.shadow$("wc-flyout").$("[slot='flyout-content']").$$("wc-dropdown-option");
for (var i = 0; i < listOfClassifications.length; i++) {
    var classification = await listOfClassifications[i].shadow$("div").$("wc-checkbox").getText();
    if (classification === "Fraud") {
        await listOfClassifications[i].click();
        break;
    }
}

如果有人有其他解决方案，请分享。