Question

代码：

<div class="title">
  <button data-testid="tg-menu" class="hitbox-border">
    <img src="asldij">
  </button>
  <div class="menu" data-testid="menu-list">
    <button class="text-left" data-testid="option-1">
      <span>Menu Option 1</span>
    </button>
    <button class="text-left" data-testid="option-2">
      <span>Menu Option 2</span>
    </button>
    <div class="row">
      <div class="flex-grow">
        <hr class="lightgrey-border">
      </div>
      <div class="flex-grow">
        <hr class="lightgrey-border">
      </div>
    </div>
    <button class="text-left" data-testid="option-3">
      <span>Menu Option 3</span>
      </button>
  </div>
</div>

工具：赛普拉斯

我有与上面类似的代码，并且想要轻松地做几件事，而在选择元素时不使用-类名。

我可以将其作为cy.get（'[data-testid =“ menu-list”]'）。children（'button'）进行操作，但希望使其类似于xpath-包含...如上例所示很简单，但是有些事情在dom中比较困难。

问题：

在菜单列表下找到所有按钮名称。

是否可以使用一行cy.get（）类似于 By.xpath（//div[@data-testid='menu-list']//button[contains(@data-testid,'option-')]）吗？
是否有简单的方法将硒xpath转换为柏树...

注意：我知道cypress的xpath有扩展名，不确定性能方面是否良好。

Answer 1

AFAIK不能在css选择器中使用contains之类的东西（cy.get正在使用）。但是，您可以获取所有按钮并在它们上调用each以获取data-testid的值例如：

cy.get（'[data-testid =“ menu-list”]'）。children（'button'）。each（btn => cy.log（btn.getAttribute（“ data-testid”））））

如果您的按钮的data-testid属性不是以option-开头，并且想要过滤掉它们，我建议您使用2种不同的数据属性：一种用于过滤，即不必是唯一的（例如data-testid='option'），也可以是另一个拥有有趣值的（例如data-value='1'）

cypress-xpath扩展名是我知道将xpath与Cypress一起使用的唯一方法。关于性能，我没有任何数据。我相信使用CSS选择器会比cy.get慢，就像它在Selenium中一样。但我也相信，在大多数情况下，这是毫无意义的。与任何性能问题一样，最好的答案是在与您相关的环境中执行自己的测量。

在赛普拉斯的某些元素中查找多个元素

1 个答案: