在Ionic框架中开发时，生成的html有时会包含重复的DOM元素，其中除了一个元素树之外的所有元素都用class="离子页隐藏"；在最高级别。
当使用webdriverio尝试在该树中查找元素时，它会发现重复的元素。由于ion页面隐藏类位于树的顶部，而不是元素本身，我们如何使用Xpath仅定位显示的元素。
我想不出用第二个条件修改XPath选择器的任何方法，因为元素完全相同！
因此，我尝试使用webdriverioisDisplayed((函数：
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;
}
但是没有元素被传递到函数中。在chrome浏览器中，我可以看到两个匹配xpath//ion按钮[@name='button-open-menu']的按钮。我需要一个不在离子页隐藏块！
树
树看起来像这样：
家庭应用程序[1]/ion标题/ion工具栏/ion按钮[1]/ion按钮家庭应用程序[2]/离子头/离子工具栏/离子按钮[1]/离子按钮
家庭应用程序[2]恰好有隐藏的离子页面类。
我认为应该可以使用祖先来识别匹配xpath的两个元素中的哪一个，不具有该类的第四级祖先？但在与xpath合作的第一天，我就太力不从心了。。。
快速且肮脏
使用Xpath：可以实现所需的结果
//app-for-homes[1]/ion-header/ion-toolbar/ion-buttons/ion-button[@name='button-open-menu']
但是，这只适用于已知元素出现顺序的情况。
更好的答案
当您正好有一个未隐藏的元素时，Xpath允许您查看元素祖先，只要您想确定隐藏类的存在/不存在。在这种情况下，我们首先要找到家庭的祖先应用程序，该应用程序不包含离子页面隐藏类：
//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']