时间戳

首页 > 解决方案 > 在赛普拉斯的某个元素中查找多个元素

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

问题描述

代码：

<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 有扩展，不确定性能是否好。

标签： testingreact-reduxautomated-testse2e-testingcypress

解决方案

  1. AFAIK不可能contains在css选择器中使用类似的东西（这是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 一起使用的唯一方法。关于性能，我没有任何数据。我相信cy.get使用 css 选择器会更慢，就像在 Selenium 中一样。但我也相信在大多数情况下它是毫无意义的。与任何性能问题一样，最好的答案是在与您相关的上下文中执行您自己的测量。

推荐阅读