css - 如何使用 Cypress 从 react 下拉列表中进行选择

Question

学习 Cypress:我有以下代码。我能够让它工作，但这似乎不是正确的方法。此页面上有 25 个类似的下拉菜单

有人可以在这里提供一些指导吗？谢谢

// choice = 'No' or 'Yes" in this case
setSellChargeOffs(choice){
  cy.get('[dt-label="sellChargeOffFlag"].ui.selection.dropdown').click()
    .xpath(`//div[@dt-label='sellChargeOffFlag']/div[contains(@class, 'menu')]/div[@role='option']/span[text()='${choice}']`)
    .click();
} 

html

<div dt-label="sellChargeOffFlag" role="listbox" aria-expanded="true" class="ui active visible selection dropdown" tabindex="0">
   <div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Yes</div>
   <i aria-hidden="true" class="dropdown icon" />
   <div class="visible menu transition">
      <div role="option" aria-checked="false" aria-selected="true" class="selected item" style="pointer-events: all;">
         <span class="text">Yes</span>
      </div>
      <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">
         <span class="text">No</span>
      </div>
   </div>
</div>

Answer 1

Cypress 已删除 cypress-xpath 包，因此您最好坚持使用开始时使用的 CSS 语法。

• CSS 更具可读性
• 使用 xpath 实际上没有任何好处
• 您无需添加软件包

不要在.click()之后链接更多查询

这里有一个警告:click()

It is unsafe to chain further commands that rely on the subject after .click()

所以点击后不要使用.xpath()或.get()。

据我了解，原因是 click() 是一个可能导致 DOM 重新渲染的操作(即有一个事件处理程序)，并且如果您以这种方式链接进一步的查询您现在正在使用旧版本的 DOM。

不要为每个下拉菜单创建一个功能

setSellChargeOffs(choice) 仅适用于一个下拉列表 - 您打算再制作 24 个类似的下拉列表吗？

相反，参数化一个可以切换任何下拉菜单的函数

setDropdown (name, choice) {

  const dropdownSelector = `[dt-label="${name}"].dropdown`; 

  cy.get(dropdownSelector).click()

  cy.get(`${dropdownSelector} div.menu div[@role='option']`)
    .find(`span:contains(${choice})`)
    .click()
}