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

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 - contains...如上例所示很简单，但有些事情在 dom 中更难。

问题：

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

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

2. 有没有简单的方法可以将 selenium xpath 转换为 cypress...

注意：我知道赛普拉斯的 xpath 有扩展，不确定性能是否好。

Answer 1

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- 开头并且您想过滤掉它们，我建议您使用两种不同的数据属性：一种用于过滤，它没有是唯一的（例如data-testid='option'），并且另一个具有有趣的值（例如data-value='1'）

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