使用 webdriverio 定位显示的元素答案

【问题标题】：locate displayed element with webdriverio使用 webdriverio 定位显示的元素
【发布时间】：2022-01-24 09:32:06
【问题描述】：

在 Ionic 框架中开发时，生成的 html 有时会包含重复的 DOM 元素，其中除了一棵元素树之外的所有元素都被隐藏，顶层为 class="ion-page-hidden"。

当使用 webdriverio 尝试在此树中定位元素时，它会找到重复的元素。由于 ion-page-hidden 类位于树的顶部，而不是元素本身，我们如何使用 Xpath 仅定位显示的元素。

我想不出用第二个条件修改 XPath 选择器的任何方法，因为元素完全相同！

所以我尝试使用 webdriverio isDisplayed() 函数：

get openHamburgerMenu()         { return Utils.visibleElement($$("//ion-button[@name='button-open-menu']")); }

Utils 函数在哪里：

async visibleElement(elementArray) {
    let returnElement;
    elementArray.forEach(element => {
        if (element.isDisplayed()) {
            returnElement = element;
        }
    });
    return returnElement;
}

但 no 元素被传递到函数中。在 chrome 浏览器中，我可以看到两个匹配 xpath //ion-button[@name='button-open-menu']。我需要不在 ion-page-hidden 块中的那个！

树

树看起来像这样：

app-for-homes[1]/ion-header/ion-toolbar/ion-buttons[1]/ion-button app-for-homes[2]/ion-header/ion-toolbar/ion-buttons[1]/ion-button

app-for-homes[2] 恰好有 ion-page-hidden 类。

我认为应该可以使用祖先来识别与 xpath 匹配的两个元素中的哪一个，不是否具有该类的第 4 级祖先？但是在使用 xpaths 的第一天，我已经超出了我的深度......

【问题讨论】：

能否请您添加一个最小的 html 示例？
@SiebeJongebloed 感谢您的关注。虽然我绝对不是专家，但根据我的经验，Xpaths 似乎是使用路径符号以简写形式表达的，而不是完整的 html 代码。它要简洁得多。我最终设法弄清楚了。请参阅下面的答案。如果您不介意删除您的反对票，因为我认为由于提供的原因，它不会添加任何东西来使这个问题与 html 混淆。

标签： selenium xpath webdriver-io

【解决方案1】：

又快又脏

使用这个 Xpath 可以达到预期的结果：

//app-for-homes[1]/ion-header/ion-toolbar/ion-buttons/ion-button[@name='button-open-menu']

但是，这只适用于元素出现的顺序已知的情况。

更好的答案

当您恰好有 1 个未隐藏的元素时，Xpaths 允许您查看元素的祖先，只要您想识别隐藏类的存在/不存在。在这种情况下，我们首先找到不包含 ion-page-hidden 类的祖先 app-for-homes：

//app-for-homes[not(contains(@class,'ion-page-hidden'))]

然后简单地将路径的其余部分附加到所需的元素。完整答案=

//app-for-homes[not(contains(@class,'ion-page-hidden'))]/ion-header/ion-toolbar/ion-buttons/ion-button[@name='button-open-menu']

【讨论】：