xPath

Question

我有这样一段代码：

<ul class="open-menu">
  <span>
    <li data-testid="menu-item" class="menu-item option">
      <svg>...</svg>
      <div>
        <strong>Text Here</strong>
        <small>...</small>
      </div>
    </li>

    <li data-testid="menu-item" class="menu-item option">
      <svg>...</svg>
      <div>
        <strong>Text</strong>
        <small>...</small>
      </div>
    </li>
  </span>
</ul>

我正在尝试 select 基于确切文本的菜单项，就像在开发工具中一样：

$x('.//*[contains(@data-testid, "menu-item") and normalize-space() = "Text"]');

但这似乎不是 select元素。但是，当我这样做时：

$x('.//*[contains(@data-testid, "menu-item")]');

我可以看到两个菜单项。

更新：

这似乎有效：

$x('.//*[contains(@class, "menu-item") and normalize-space() = "Text"]');

不确定为什么在此上下文中使用 class 而不是 data-testid。如何获得我的 xpath select 或使用我的 data-testid？

Answer 1

Why is this exact text selector not working

两个 li 元素都与 XPath 表达式匹配的事实如果省略条件 normalize-space() = "Text" 是一个线索。 normalize-space() returns ... Text Here ... 第一个 li 在发布的 XML 和 ... Text ... 第二个（或其他一些代替 div/svg 或 div/small 中的 ... 的内容）导致 normalize-space() = "Text" 失败。

在更新中你说相同的条件成功。这无关使用 @class 而不是 @data-testid；它必须被触发通过一些内容更改。

How can I get my xpath selector to work with my data-testid?

通过测试 li 的后代 strong 中的精确文本匹配元素，

.//*[@data-testid = "menu-item" and div/strong = "Text"]

与第二个 li 匹配。使测试更健壮通常是按顺序，例如

.//*[contains(@data-testid,"menu-item") and normalize-space(div/strong) = "Text"]

例如，将 /div/small 或 /descendant::small 附加到 XPath 仅提取 small 文本的表达式。

Answer 2

data-testid="menu-item" 匹配外部 li 元素，而您要查找的文本内容位于内部 strong 元素内。
因此，要根据 data-testid 属性值和内部 strong 元素文本值定位外部 li 元素，您可以像这样使用 XPath 表达式：

//*[contains(@data-testid, "menu-item") and .//normalize-space() = "Text"]

或

.//*[contains(@data-testid, "menu-item") and .//*[normalize-space() = "Text"]]

我已经测试过，两个表达式都可以正常工作

xPath - 为什么这个精确的文本选择器不能使用数据测试 ID？

xPath - Why is this exact text selector not working with the data test id?

webdriver-io