如何为引导下拉列表创建正确的定位器 - XPath 或当此元素的每个定位器都混乱时的任何便利答案

【问题标题】：How to create proper locator for bootstrap dropdown list - XPath or any convinient when each locator of this element is messy如何为引导下拉列表创建正确的定位器 - XPath 或当此元素的每个定位器都混乱时的任何便利
【发布时间】：2021-12-07 15:47:31
【问题描述】：

我有一些带有 boostrap 下拉列表的 html：

<div class="Box-sc-106yp7x-0 SearchBareeu__CategorySelectorWrapper-sc-2tpr15-8 lnyoNZ"><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 CategorySelector__FlexWrapper-sc-97y5w2-0 kBrXmV"><div class="Box-sc-106yp7x-0 SelectInput__Container-sc-169omlt-1 jVHySC"><div><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 dd-header SelectInput__InputContainer-sc-169omlt-7 kyJRJI" data-testitd="bar-category-selector-weu_SelectInput_InputContainer"><div class="SelectInput__TextContainer-sc-169omlt-3 gKnTHQ"><span color="text" class="Box-sc-106yp7x-0 Text-sc-10gb8b4-0 SelectInput__StyledText-sc-169omlt-0 jDnjaV">Wszystkie kategorie</span><span class="SelectInput__Value-sc-169omlt-4 gmvvmW"></span></div><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 SelectInput__ArrowContainer-sc-169omlt-2 fNZDGv"><svg width="21" height="33" viewBox="0 0 21 33" fill="currentColor" class="SelectInput__ArrowDown-sc-169omlt-5 jMgpdX"><path d="M21 3.85L7.94595 16.5L21 29.15L17.027 33L1.18875e-06 16.5L17.027 -1.74303e-07L21 3.85Z" fill="currentColor"></path></svg></div></div></div></div></div></div>

我复制了 xpath 并添加到 IDE 中，如下所示。但是它不像字符串那样绿色。我知道 xptah 不是以正确的方式创建的。

您有什么建议可以让 ide 中的 xpath 绿色或更好的定位器吗？我想单击它并从引导下拉列表中选择选项。谢谢

【问题讨论】：

标签： selenium-webdriver xpath selenide

【解决方案1】：

XPath 没有任何问题。很可能，您在 IntelliJ IDEA 中安装了 Selenium UI Testing 插件。这个插件提供了 XPath 表达式的语法高亮。因此它看起来不像一个普通的字符串。

我在上面的 HTML sn-p 中看到内部 div 元素有一个自定义属性：[data-testitd="bar-category-selector-weu_SelectInput_InputContainer"]。因此，您可以使用这个选择器来代替复杂且非常不可读的 XPath 表达式：

SelenideElement innerDiv = $("[data-testitd='bar-category-selector-weu_SelectInput_InputContainer']");

如果您仍然需要父 div，则可以使用该元素的部分类：

SelenideElement parentDiv = $("[class^='SearchBareeu__CategorySelectorWrapper']");

【讨论】：