Css 如何使用 Cypress 从 React 下拉列表中进行 Select

发布于08月02日

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

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>

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

Css 如何使用 Cypress 从 React 下拉列表中进行 Select

推荐答案

Css相关问答推荐

CSS Grid，意想不到的差距

我控制的自定义单选按钮无法重新 Select

在carousel组件上应用css转换时出现问题

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

为什么在RadixUi上应用Tailwincss和自定义css类不起作用？

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

在具有特定类的 td 之后，如何编写适用于该行上所有 td 元素的表行的 CSS Select 器？

SASS 中的计算表达式

应用边框半径的 iframe 在 4 个角上有细曲线

如何在相对位置和绝对位置之间转换元素？

使用 React 和 Flexbox 文本溢出框外

css ：：part 伪 Select 器 Chrome 兼容性？

条件宽度和省略号不适用于样式化组件 - React.js

CSS网格列随着长内容改变大小

CSS，居中的 div，缩小以适应？

固定元素在 Chrome 中消失

如何设置表格单元格的最大高度？

如何使用 Bootstrap 3 阻止按钮保持压抑状态

模拟显示：React Native 中的内联