css 如何选择从React下拉与Cypress

jxct1oxe 于 2023-08-09 发布在 React

关注(0)|答案(1)|浏览(128)

学习Cypress：我有以下代码。我能让它工作，但似乎这不是正确的方法。这个页面上有25个类似的下拉列表
有人能在这里提供一点指导吗？THX

// 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();
}

字符串
超文本标记语言

<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>

型

css

来源：https://stackoverflow.com/questions/76815827/how-to-select-from-react-dropdown-with-cypress

1条答案

按热度按时间

cld4siwp1#

Cypress已经放弃了cypress-xpath包，所以你最好坚持使用你开始使用的CSS语法。

CSS可读性更强
实际上使用xpath什么也得不到
您就不必添加软件包
不要在.click()后再链查询

这里有一个警告：click()
在.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()
}

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

css 如何选择从React下拉与Cypress

1条答案

相关问题

热门标签

最新问答