testing - 在 Cypress 的某个元素中查找多个元素

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 中更难。

问题:

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

   是否有一行 cy.get() 我可以使用类似于By.xpath(//div[@data-testid='menu-list']//button[contains(@data-testid,'option-')]) ?

2. 是否有简单的方法将 selenium xpath 转换为 cypress...

注意:我知道有 cypress 的 xpath 扩展，不确定性能是否好。

Answer 1

1. 据我所知，不可能在 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')

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